Layout Tags (header, footer, nav, aside)

2. Semantic Markup

Semantic markup or semantic HTML brings meaning to a web page than just presentation. Take for example the element. It is used to layout web pages and may wrap a navigational menu or a list of blog posts but by itself it doesn't convey what it is representing in a page. CSS classes applied to elements displays information about their intended purpose.

In the markup shown above, the header CSS class provides an idea as to what the <div> might be doing. But, in the absence of this CSS class, there is no way to quickly identify what the <div> might be doing. This is because is a general-purpose element and has no specific documented responsibility. It 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 to solve this matter. The new elements have names that gives a clear idea about their content. Listed below are the semantic elements of HTML5:

<header>
<footer>
<section>
<aside>
<nav>

The figure below is an example of a page designed using the elements:

The figure shows the usual arrangement of elements. The location of an element on a page is dependent on the layout. As an example, the <aside> element can be placed on the other side of the <section> or even below or above it.