Structural elements|Html|learning-a.com

Before HTML5 appeared, developers have to use tag with css, such as <div class="myFavoriteHeaderName"> to define page structure elements; however, each developer has his/her own favorite names for the structure elements. That’s hard to read for either other developers or search engines such as Google. Considering the situation, HTML specification organizers introduced many structural/semantic elements in HTML5.

Header: logo, banner in it.

Nav: navigation links or menu.

Article: a standalone article.

Section: used to organize a long document.

Aside: put content related to the article. You may regard it as a side bar for navigation, but you need css to control aside tag location.

Footer: terms, privacy, and copyright information in it.

Source Code Box: structural elements (Browser:IE9+, Firefox, Chrome, Safari6+, Opera12+)

<header>Logo and Banner</header>
<nav>Home|link1|link2</nav>
<article>
<section>
<p>Here is the first section of the article</p>
</section>

<section>
<p>Here is the second section of the article</p>
</section>

<aside><span>content related to the article</span>
<span>related article1</span>
<span>related article2</span>
</aside>
</article>


<footer><p>term|privacy|contact us</p></footer>

header
nav
article section1 section2	aside
footer