In the early days of web development the restrictions on how a page could be laid out were extremely limiting. Over time the limitations shrank as developers moved from simple flowing text pages to using table elements to define designs to using div elements in cooperation with CSS definitions to create modern day layouts.
With HTML5, the trend shifts a bit from removing restrictions to adding structure to HTML elements that are related to content layout. In this article we’ll explore the basics of an HTML 5 page structure with four new elements: header, nav, section and footer.
Simple Page Layout by Example
Since we are covering the basics of the HTML5 page structure we are going to keep our example simple. We’ll be using a header with a navigation bar below the header and a main content area below the navigation followed by the footer. We’ll break down each element as we go and provide the markup so that when you get to the end you can copy and paste all of the examples into a page and see how it looks altogether.
Note: In order to keep the examples as simple as possible we’ll be defining all of our style definitions within the elements themselves instead of placing the definitions in a CSS file. Just keep in mind that when you apply these examples in real life we suggest you make your website development more manageable by using a CSS file and the class attribute for your style definitions.
Defining the Page
Below is just the basic HTML we need to create our page. There’s nothing special about it except the fact we are using the style attribute to define styles instead of the class attribute and CSS (Cascading Style Sheet). If you are not familiar with CSS we suggest that you review the multitude of CSS articles on HTMLGoodies.com.
<html >
<head>
<title>HTML 5 Structure Elements: The Basics</title>
</head>
<body style=”background: #999999;”>
<! — The div below centers the layout in the browser window — >
<div style=”width: 1024px; margin: 10px auto 0px auto;”>
<header> element
The header element can be assigned the same global attributes that you would apply to other elements like style and class. In the example above we have assigned the style definitions via the style attribute. We used a background image which is in PNG format, set the background color to white and defined the header size, location and padding. Defining the style of the header element is no different than defining the styles for a div element.
<header style=”position: absolute; background: #ffffff; padding-left: 15px;
padding-top: 0px; width: 1009px; height:100px;
background-image: url(‘images/HtmlGoodies_ByExample_Basic.png’);
text-align: left;”>
<h1>HTML 5 Structure Elements</h1>
<h3>The Basics</h3>
</header>
<nav> element
Like the header element, the nav element can also be assigned the same global attributes that apply to other elements like style and class attributes. In the example above we have again assigned the style definitions via the style attribute. We did not use a background image but rather simply set the background color to black and defined the header size, location and padding. Like the header element, defining the style of the nav element is no different than defining the styles for a div element.
<nav style=”position: absolute; background: #000000; margin-top: 100px; padding-left: 15px;
padding-top: 4px; width: 1009px; height:20px; text-align: left;”>
<a href=”MyHomePage.html” style=”color: White;”>Home</a>
<a href=”MyAboutPage.html” style=”color: White;”>About</a>
</nav>
<section> element
The section element is what we have chosen to use for the main content area of our website. The section element is intended to be the “catch-all” for the sections of content on your web page layout. If we so chose we could replace the header, nav and footer elements with section elements and the website would have rendered the exact same way. We’ll discuss later in this article why we chose not to use only the section element.
Like the header and nav elements, the section element can also be assigned the same global attributes such as style and class. In the example above we have again assigned the style definitions via the style attribute. We used a background image, set the background color to white and defined the header size, location (using margin definitions) and padding. Like the previously discussed elements, defining the style of the section element is no different than defining the styles for a div element.
<section id=”MainContent” style=”position: absolute; background: #ffffff; margin-top: 124px;
padding-left: 15px; padding-top: 10px; padding-right: 15px; width: 994px; height:560px;
background-image: url(‘images/HtmlGoodies_ByExample_Ba-03.png’); text-align: left;”>
<h2>My Main Content Section</h2>
<p>
Here is where I will put all of my content. I can use any elements here that I would normally use like div, span, p, h1, h2, etc.
</p>
</section>
<footer> element
Lastly, we have the footer element. As with the other elements we use the global attribute style to define a background image, set the background color to white, center the text and define the footer size, location and padding. Like the previously discussed elements, defining the style of the footer element is no different than defining the styles for a div element.
<footer style=”position: absolute; background: #ffffff; margin-top: 694px; padding-left: 15px;
padding-top: 10px; padding-right: 15px; width: 994px; height: 58px;
background-image: url(‘images/HtmlGoodies_ByExample_Ba-04.png’); text-align: center;”>
<a href=”MyHomePage.html” style=”color: Black;”>Home</a>
|
<a href=”MyAboutPage.html” style=”color: Black;”>About</a>
|
<a href=”MyAContactPage.html” style=”color: Black;”>Contact Us</a>
|
<a href=”MySitemapPage.html” style=”color: Black;”>Sitemap</a>
<br />
Copyright © 2012 – All rights reserved
</footer>
<! — Below are just the closing tags for elements we declared at the top of the page — >
</div>
</body>
</html>
What’s the Point?
If these new elements are no different than styling a div element then why bother? The main reason to use these new basic page structure elements is not because they add some new powerful tools to web development. What they add instead is readability to your HTML markup. Instead of trudging through multiple div elements to find the navigation section of the page wouldn’t it be quicker and easier to do a simple find for the nav element? You bet it would.
Restrictions?
There are a few restrictions and quirks of note for these elements:
<header> – You can have multiple header elements on a page such as a main page header like we have done in our example above and another header element inside our section element to define the header for our main content. A header element can be nested inside other elements except for an address element, a footer element, or inside another header element.
<nav> – You can have multiple nav elements on a page if the situation calls for it. You can even use the nav element inside other elements like the header or footer. Therefore, there are really no “restrictions” on this element, however, browsers can use this element “to determine whether to omit the initial rendering of this content”. The text in quotes comes directly from W3C but no examples are offered as to the circumstances when this might occur.
<section> – This element has no real restrictions. Its intent is to allow the developer to divide content into as many sections as they see fit.
<footer> – While the footer is intended to be at the bottom of the page with links, copyright information, etc., it can be placed anywhere on the page. You are also free to use multiple footer elements if you have a good reason to do so.
Conclusion
There are two major arguments for starting to use the new HTML 5 structure elements now. The first is, as stated above, it’s a vast improvement for readability and maintainability of your HTML markup. The second is that these elements, unlike so many other elements, have been implemented by all of the major browsers. Yes, even Internet Explorer.
Download the HTML markup and images.
Happy coding!
