HTML5 Semantic

HTML5 Semantic Elements

Semantic = Meaning.

Semantic elements = Elements with meaning.

---

What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

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

---

Browser Support

    

Internet Explorer 9+, Firefox, Chrome, Safari and Opera supports the semantic elements described in this chapter.

Note: Internet Explorer 8 and earlier does not support these elements. However, there is a solution. Look at the end of this chapter.

---

New Semantic Elements in HTML5

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>

---

HTML5 <section> Element

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

According to W3C's HTML5 documentation: "A section is a thematic grouping of content, typically with a heading."

Example

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

Try it yourself »

---

HTML5 <article> Element

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

An article should make sense on its own and it should be possible to distribute it independently from the rest of the web site.

Examples of where an <article> element can be used:

• Forum post
• Blog post
• News story
• Comment

Example

<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

Try it yourself »

---

HTML5 <nav> Element

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

The <nav> element is intended for large blocks of navigation links. However, not all links in a document should be inside a <nav> element!

Example

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

Try it yourself »

---

HTML5 <aside> Element

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

The aside content should be related to the surrounding content.

Example

<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 yourself »

---

HTML5 <header> Element

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

The <header> element should be used as a container for introductory content.

You can have several <header> elements in one document.

The following example defines a header for an article:

Example

<article>
  <header>
    <h1>Internet Explorer 9</h1>
    <p><time pubdate datetime="2011-03-15"></time></p>
  </header>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

Try it yourself »

---

HTML5 <footer> Element

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

A <footer> element should contain information about its containing element.

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

You can have several <footer> elements in one document.

Example

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

Try it yourself »

---

HTML5 <figure> and <figcaption> Elements

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.

The <figcaption> tag defines a caption for a <figure> element.

The <figcaption> element can be placed as the first or last child of the <figure> element.

Example

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

Try it yourself »

---

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;
}

Problem With Internet Explorer 8 And Earlier

IE8 and earlier does not know how to render CSS on elements that it doesn’t recognize. You cannot style <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, or other new HTML5 elements.

Thankfully, Sjoerd Visscher has discovered a JavaScript workaround called HTML5 Shiv; to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9.

You can download and read more about the HTML5 Shiv at: http://code.google.com/p/html5shiv/

To enable the HTML5 Shiv (after downloading), insert the following code into the <head> element:

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

That code above is a comment that only IE reads, for versions earlier than IE9. It must be placed in the <head> element because Internet Explorer needs to know about the elements before it renders them.

---

Semantic Elements in HTML5

Tag	Description
<article>	Defines an article
<aside>	Defines content aside from the page content
<figcaption>	Defines a caption for a <figure> element
<figure>	Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer>	Defines a footer for a document or section
<header>	Specifies a header for a document or section
<mark>	Defines marked/highlighted text
<nav>	Defines navigation links
<section>	Defines a section in a document
<time>	Defines a date/time