Get DevWP - WordPress Development Theme

HTML Document Structure & Layout

As mentioned before, HTML provides the structure for a webpage / website. This structure is important because it helps a web browser like Chrome, Firefox and others to properly understand and display your content.

Here is a typical structure and layout for an HTML Document.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Html Tutorial">
    <meta name="keywords" content="html, css, javascript etc">
    <title>Home Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
<nav>
</nav>
<section>
    <article>
        <h2></h2>
        <p></p>
    </article>
</section>
<aside>

</aside>
<footer>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</footer>
</body>
</html>

Let’s break down the code above.

The <!DOCTYPE html> is what the browser uses to recognize that the document is an HTML document. This line of code must be the first line of code to be displayed by a browser. There can be no white space of anything placed above this line. Note: this rule excludes server side code but that’s for another tutorial.

The <html lang="en"> is the root of the HTML document and the language choice for this document in english which is what’s referenced in the HTML Attribute lang="en"

The <head> on line 3 along with it’s companion closing tag </head> on line 10 is where meta information along with the title of the page and link references for the style-sheet can be found. This is not displayed on the front-end of a webpage but is important for a browser.

The <body> and it’s companion closing tag </body> on line 32 and any content in between is what will be displayed in the browser on the front end.

The <header> and it’s companion closing tag </header> on line 13 is where you will typically find a site title or logo. You will often find a navigation menu in this area as well.

The <nav> and it’s companion closing tag </nav> is where you would find a navigation menu.

The <section> and it’s companion closing tag </section> is a container element that can be used to group various other HTML elements together.

The <article> and it’s companion closing tag </article> is used for you main content on a page or post or it can be used to display an excerpt of a full article. You will see more of this as we progress through the tutorials.

The <h2> and it’s companion closing tag </h2> is a second level heading tag that can be used as a sub-heading in a post or page.

The <p> and it’s companion closing tag </p> is a paragraph tag where you would place a paragraph in between the tags.

The <aside> and it’s companion closing tag </aside> is used for sidebars on a web page which can be used in various areas in the layout.

The <footer> and it’s companion closing tag </footer> is used towards the bottom of a web page where you can nest various other elements and information.

The <ul> and it’s companion closing tag </ul> is for an unordered list which works with additional HTML tags like <li></li>

Then we have the closing </body> tag followed by the closing </html> tag.

One thing to keep in mind is that you will need to properly nest your HTML tags. If you get their order wrong, you will run into unexpected results.



View Our Themes