The best HTML5 semantic elements Tutorial In 2024, In this tutorial you can learn What is semantic elements?,Browser Support,HTML5 new semantic elements,HTML5 <section> element,Examples,HTML5 <article> element,Examples,HTML5 <nav> element,Examples,HTML5 <aside> element,Examples,HTML5 <header> element,Examples,HTML5 <footer> element,Examples,HTML5 <figure> and <figcaption> element,Examples,We can start using these semantic elements do?,Internet Explorer 8 and earlier versions of IE problems,
Semantics = meaning.
Semantic elements = sense element.
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.
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.
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:
<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.
<Article> tag defines independent content. .
<Article> element Example:
<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!
<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.
<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:
<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.
<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.
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):
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:
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