Understanding the Proper Way to Lay Out a Page with HTML5

Introduction

Semantic Markup

Semantic markup expresses its meaning and purpose clearly to the developers and to the browser. Web developers frequently use the <div> element to layout their web pages. However, a <div> element by itself doesn't convey what it is representing in a web page. A <div> element may wrap a navigational menu or it may house a list of blog posts, but merely using <div> doesn't convey much information to the developers or to the browsers. Usually CSS classes applied to <div> elements reveal some information about their intended purpose. For example consider the following markup:

</p> <div class="header">...</div>

In the above markup it is the header CSS class that gives you an idea as to what the <div> might be doing. In the absence of this CSS class, however, there is no way to easily identify what the <div> might be doing. This is because <div> is a general purpose element. It has no specific documented responsibility. It simply marks a division or section of the web page but doesn't dictate what can go inside that section. HTML5 includes a set of markup elements that overcome this difficulty. These new elements have meaningful names so that just by looking at these elements you get a clear idea about their content. These semantic elements of HTML5 are listed below (this is not an exhaustive list):

• <header>
• <footer>
• <section>
• <article>
• <aside>
• <nav>

As you can see, these elements are quite expressive and you can immediately get an idea of the intended purpose. The following figure shows a sample page layout designed using these elements: The above figure shows a typical arrangement of various elements.

Note that their exact location on a page is purely dependent on the layout. For example, the <aside> element can be placed on the left hand side of the <section> or even above or below it.

The following figure shows an actual web page making use of these elements:

Now that you have some idea about the semantic elements, let's discuss each of the elements in more detail. For the sake of our discussion we will use the above sample web page as an example.

Header Element

The <header> element represents the header of the whole page or a section of it. The W3C specifications define the <header> element like this:

The <header> element represents a group of introductory or navigational aids. A header element is intended to usually contain the section's heading, but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

The above explanation tells us that the <header> element can contain headings, logo images, supporting text and optionally a navigation structure. Most of the web pages have page headings in the form of logo, slogan and/or supportive text. The header element acts as a container for all these. Note that the header element can be used not only for the whole page but also for individual sections of a web page. For example, in addition to the page level header you may use the header element in the contact information section of the page.

The following markup shows how the <header> element has been used in our example web page:

Nav Element

The <nav> element represents a section with navigation links.

The <nav> section can contain links to the other pages from the website or to other parts of the same web page. It is recommended that you use <nav> only for the main navigational structures and not for minor set of hyperlinks (such as the ones that usually go in the footer of a web page).

The following markup shows how the <nav> element has been used in the example web page:

Section Element

The following markup shows how the <section> element looks:

A section can also have its own <header> elements as well as a <footer> element. The section element is analogous to a section of a printed book that contains chapters or a section of a newspaper that contains news items.

Article Element

The following markup shows how the <article> element looks:

You will find that people sometimes use <section> and <article> together or use nested <article; elements. Currently there are no rigid and precise rules dictating their nesting. Whenever you use them together try to ensure that the resultant structure meets the intended purpose of the respective element as given in the W3C specifications.

Aside Element

For example, the <aside> used in the example web page looks like this:

As you can see the <aside> element shown above contains a <figure> element and some text in the form of a <p> element. The <figure> element is intended to represent a figure and in turn contains <img; and <figcaption> element. The <img; tag points to the actual image to be displayed and the <figcaption> element holds the figure caption.

Footer Element

The <footer> element of the example web page looks like this:

Summary

References:

"Understanding the Proper Way to Lay Out a Page with HTML5." - Developer.com. N.p., n.d. Web. 10 Aug. 2014.

Go to top