Monday, June 10, 2013

HTML 5 Semantic Element

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

  <img height="100" src="" width="150" />

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

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;
blockThe element is displayed as a block-level element (like paragraphs and headers)

No comments:

Post a Comment