HTML 5 Semantic Element

http://www.w3schools.com/html/html5_semantic_elements.asp

New Semantic Elements in HTML5

They are <div></div> by themselves

Many of existing web sites today contains HTML code like this: <div id="nav">, <div class="header">, or <div id="footer">, to indicate navigation links, header, and footer.

HTML5 offers new semantic elements to clearly define different parts of a web page:

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

---

The <section> element defines a section in a document.

The <article> element specifies independent, self-contained content.

The <nav> element defines a set of navigation links.

The <aside> element defines some content aside from the content it is placed in (like a sidebar).

The <header> element specifies a header for a <article> or <section>.

The <footer> element specifies a footer for a <article> or <section>.

HTML5 <figure> and <figcaption> Elements

<figure>

  <img height="100" src="http://24.media.tumblr.com/tumblr_me8rxmQrvO1rnvhfco1_1280.jpg" width="150" />

Fig1. - This is the logo of Google.

  <figcaption>Fig1. - This is the logo of Google.</figcaption>

</figure>

Can We Start Using These Semantic Elements?

The elements explained above are all block elements (except <figcaption>).

To get these elements to work properly in all (older) major browsers, set the display property to block in your style sheet (this causes older browsers to render these elements correctly):

header, section, footer, aside, nav, article, figure
{
display: block;
}

block
The element is displayed as a block-level element (like paragraphs and headers)