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.