semantic = meaning
Semantic Elements = Meaningful Elements
What are semantic elements?
A semantic element can clearly describe its meaning to browsers and developers.
Examples of non-semantic elements: <div> and <span> - regardless of content.
Examples of semantic elements: <form>, <table>, and <img> - clearly define its content.
Browser support
Internet Explorer 9+, Firefox, Chrome, Safari and Opera support semantic elements.
Note: This element is not supported in Internet Explorer 8 and earlier. But a compatible workaround 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 navigation links, headers, and footers.
HTML5 provides new semantic elements to define different parts of a web page:
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <figcaption>
- <figure>
- <footer>
HTML5 <section> element
The <section> tag defines a section (section, section) in the document. Such as chapters, headers, footers, or other parts of the document.
According to the W3C HTML5 documentation: A section contains a set of content and its title.
1 <section> 2 <h1>WWF</h1> 3 <p>The World Wide Fund for Nature (WWF) is....</p> 4 </section>
HTML5 <article> element
The <article> tag defines individual content. .
1 < article > 2 < h1 > Internet Explorer 9 </ h1 > 3 < p > Windows Internet Explorer 9 (abbreviated as IE9 ) was released on March 14, 2011 at 21:00. </ p > 4 </ article >
HTML5 <nav> element
The <nav> tag defines the section of the navigation link.
The <nav> element is used to define the navigation links section of the page, however, not all links need to be contained within the <nav> element!
1 <nav> 2 <a href="/html/">HTML</a> | 3 <a href="/css/">CSS</a> | 4 <a href="/js/">JavaScript</a> | 5 <a href="/jquery/">jQuery</a> 6 </nav>
HTML5 <aside> 元素
The <aside> tag defines content outside the content of the main area of the page (such as a sidebar).
The content of the aside tag should be related to the content of the main area.
1 <p>My family and I visited The Epcot center this summer.</p> 2 3 <aside> 4 <h4>Epcot Center</h4> 5 <p>The Epcot Center is a theme park in Disney World, Florida.</p> 6 </aside>
HTML5 <header> element
The <header> element describes the header area of the document
The <header> element is mainly used to define the introduction display area of the content.
You can use multiple <header> elements in a page.
The following example defines the header of the article:
1 < article > 2 < header > 3 < h1 > Internet Explorer 9 </ h1 > 4 < p >< time pubdate datetime ="2011-03-15" ></ time ></ p > 5 </ header > 6 < p > Windows Internet Explorer 9 (abbreviated as IE9) was released on March 14, 2011 at 21:00 </ p > 7 </ article >
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 document's author, copyright information, linked terms of use, contact information, etc.
You can use multiple <footer> elements in a document.
1 <footer> 2 <p>Posted by: Hege Refsnes</p> 3 <p><time pubdate datetime="2012-03-01"></time></p> 4 </footer>
HTML5 <figure> and <figcaption> elements
The <figure> tag specifies individual flow content (images, charts, photos, code, etc.).
The content of the <figure> element should be relative to the main content, but if removed, should have no effect on the flow of the document.
The <figcaption> tag defines the title of the <figure> element.
The <figcaption> element should be placed at the position of the first or last child of the "figure" element.
1 <figure> 2 <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> 3 <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption> 4 </figure>
Can we start using these semantic elements?
The above elements are all block elements (except <figcaption>).
In order for these blocks and elements to work in all versions of browsers, you need to set the following properties in your stylesheet file (the following style code will allow older browsers to support the block-level elements described in this chapter):
1 header, section, footer, aside, nav, article, figure 2 { 3 display: block; 4 }
Problems in Internet Explorer 8 and earlier versions of IE
IE8 and earlier cannot render CSS effects on these elements, so that you cannot use <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, or other HTML5 elements.
Workaround: You can use HTML5 Shiv Javascript to resolve IE compatibility issues. HTML5 Shiv download address: http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js
After downloading, put the following code into the web page:
1 <!--[if lt IE 9]> 2 <script src="html5shiv.js"></script> 3 <![endif]-->
The above code will load the html5shiv.js file when the browser is less than IE9 version. You must put it in the <head> element, because IE browser needs to render these new HTML5 elements after the head is loaded
Excerpted from the rookie tutorial