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.
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.
padding-top: 0px; width: 1009px; height:100px;
background-image: url(‘images/HtmlGoodies_ByExample_Basic.png’);
text-align: left;”>
HTML 5 Structure Elements
The Basics
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.
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.
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;”>
My Main Content Section
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.
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.
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:
