HTML5 Semantic Elements


Semantics = meaning

Semantic element = meaningful element


What are semantic elements?

A semantic element can clearly describe its meaning to browsers and developers.

Non-semantic element examples: <div> and <span> - no need to consider the content.

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


Browser supports

Internet Explorer Firefox Opera Google Chrome Safari

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

Note: Internet Explorer 8 and earlier versions do not support this element. However, a compatible solution is provided at the bottom of the article.


New Semantic Elements in HTML5

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

HTML5 provides new semantic elements to clarify different parts of a web page:

image.png

  • <header>

  • <nav>

  • <section>

  • <article>

  • <aside>

  • <figcaption>

  • <figure>

  • <footer>



HTML5 <section> Element

The <section> tag defines a section in the document. Such as chapters, headers, footers, or other parts of the document.

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

Example

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

 Try It! 


HTML5 <article> Element

The <article> tag defines independent content. .

Examples of <article> element usage:

  • 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! 



HTML5 <nav> Element

The <nav> tag defines the part of the navigation link.

The <nav> element is used to define the navigation link part of the page, but not all links need to be included in the <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! 


HTML5 <aside> Element

The <aside> tag defines content outside the main area of the page (such as the sidebar).

The content of the aside tag should be related to the content of the main area.

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! 



HTML5 <header> Element

The <header> element describes the head area of the document

The <header> element is mainly used to define the introduction and display area of the content.

You can use multiple <header> elements in the page.

The following example defines the head of the 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! 


HTML5 <footer> Element

The <footer> element describes the bottom area of the document.

The <footer> element should contain its containing element

A footer usually contains the author of the document, copyright information, link terms of use, contact information, etc.

You can use multiple <footer> elements in the document.

Example

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


 Try It! 


HTML5 <figure> and <figcaption> Elements

The <figure> tag specifies independent streaming content (images, charts, photos, codes, etc.).

The content of the <figure> element should be related to the main content, but if it is deleted, it should not affect the document flow.

The <figcaption> tag defines the caption of the <figure> element.

The <figcaption> element should be placed at the position of the first or last child element 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! 


Can We Start Using These Semantic Elements?

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

In order for these blocks and elements to take effect in all versions of browsers, you need to set the following attributes in the style sheet file (the following style code allows older browsers to support the block-level elements introduced in this chapter):

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


Problems in Internet Explorer 8 and Earlier Versions of IE

IE8 and earlier versions of IE cannot render CSS effects in these elements, so that you cannot use <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, or others HTML5 elements.

Solution: You can use HTML5 Shiv Javascript script to solve the compatibility problem of IE. HTML5 Shiv download address: http://html5shiv.googlecode.com/svn/trunk/html5.js

After downloading, put the following code into the web page:

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

The above code will load the html5shiv.js file when the browser is less than IE9. You must place it in the <head> element, because IE needs to render these new HTML5 elements after the head is loaded.