Latest web development tutorials

HTML5 semantic elements

Semantics = meaning.

Semantic elements = sense element.


What is semantic elements?

A semantic elements can clearly describe their significance to the browser and developers.

Examples of non-semantic elements: <div> and <span> - regardless of content.

Examples of semantic elements: <form>, <table> , and <img> - clearly defines its content.


Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Chrome, Safari and Opera support semantic elements.

Note: Internet Explorer 8 and earlier versions do not support this element but the bottom of the article provides a compatible solution.


HTML5 new semantic elements

Many existing websites include the following HTML code: <div id = "nav">, <div class = "header">, or <div id = "footer">, to indicate navigation links, head, and tail.

HTML5 provides a new semantic elements to define a different part of the Web page:

  • <Header>
  • <Nav>
  • <Section>
  • <Article>
  • <Aside>
  • <Figcaption>
  • <Figure>
  • <Footer>

HTML5 <section> element

<Section> tag defines the document section (section, section). Such as chapters, headers, footers, or other parts of the document.

According to W3C HTML5 document: section contains a set of content and its title.

Examples

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>

try it"


HTML5 <article> element

<Article> tag defines independent content. .

<Article> element Example:

  • Forum post
  • Blog post
  • News story
  • Comment

Examples

<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</article>

try it"


HTML5 <nav> element

<Nav> tag to define navigation links section.

<Nav> element is used to define page navigation links some areas, but not all of the links need to be included in the <nav> element!

Examples

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

try it"


HTML5 <aside> element

<Aside> tag defines the page content beyond the main area of ​​content (such as the sidebar).

Content aside the label should be associated with the main content area.

Examples

<p>My family and I visited The Epcot center this summer.</p>

<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

try it"


HTML5 <header> element

<Header> element describes the head area of ​​the document

<Header> element note describes the display area is used to define the content.

In the page you can use multiple <header> element.

The following example defines the head of the article:

Examples

<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p>
</article>

try it"


HTML5 <footer> element

<Footer> element describes the bottom area of ​​the document.

<Footer> element should contain the elements it contains

A footer typically contains the document's author, copyright information, links terms of use, contact information, etc.

Document you can use multiple <footer> element.

Examples

<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>

try it"


HTML5 <figure> and <figcaption> element

<Figure> tag specified separate stream content (images, graphics, photographs, code, etc.).

Content <figure> element should be associated with the main content, but if it is removed, do not respond to the document flow impact.

<Figcaption> tag defines the title <figure> element.

<Figcaption> element should be placed in "figure" element of the first or last child element position.

Examples

<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

try it"


We can start using these semantic elements do?

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

For these blocks and elements to take effect in all versions of the browser, you need to set up in the style sheet file attributes (hereinafter style code allows older browsers support block-level elements in this chapter):

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

Internet Explorer 8 and earlier versions of IE problems

IE8 and earlier versions of IE can not be rendered in these elements, CSS effects, so you can not use <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, or other the HTML5 elements.

Solution: You can use the HTML5 Shiv Javascript script to resolve the compatibility issues of IE. HTML5 Shiv Download: http://code.google.com/p/html5shiv/

Once downloaded, the following code into the page:

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

The above code when the browser version less than IE9 will load html5shiv.js file, you must place it in the <head> element, because the IE browser is required after loading the head rendering these new HTML5 elements