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.
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:
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.
<p>The World Wide Fund for Nature (WWF) is....</p>
HTML5 <article> Element
The <article> tag defines independent content. .
Examples of <article> element usage:
<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>
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!
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
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.
<p>My family and I visited The Epcot center this summer.</p>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
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:
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
HTML5 <footer> Element
The <footer> element describes the bottom area of the document.
The <footer> element should contain its containing element
You can use multiple <footer> elements in the document.
<p>Posted by: Jake C</p>
<p><time pubdate datetime="2012-03-01"></time></p>
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.
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
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
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.
After downloading, put the following code into the web page:
<!--[if lt IE 9]>
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.