Html5 Semantic Elements

* * * Semantic = Meaning Semantic element = Meaningful element * * * ## What are Semantic Elements? A semantic element clearly describes its meaning to both the browser and the developer. **Non-semantic** element examples: `

` and `` - no consideration of content required. **Semantic** element examples: `

`, ``, and `` - clearly define their content. * * * ## Browser Support ![Image 1: Internet Explorer]( 2: Firefox]( 3: Opera]( 4: Google Chrome]( 5: 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 this article. * * * ## New Semantic Elements in HTML5 Many existing websites use the following HTML code: `

`, `

`, or `

` to indicate navigation links, headers, and footers. HTML5 provides new semantic elements to clearly define different parts of a web page: * `

` * `

Elements The `
` tag specifies self-contained flow content (such as images, diagrams, photos, code, etc.). The content inside the `
` element should be related to the main content; however, if removed, it should not affect the document flow. The `
` tag defines the caption for a `
` element. The `
` element should be placed as the first or last child element within the "figure" element. ## Example
Fig1. - The Pulpit Rock, Norway.
[Try it yourself »]( * * * ## Can We Start Using These Semantic Elements Now? All the above elements are block-level elements (except `
`). To ensure these block-level elements work properly in all browser versions, you need to set specific properties in your stylesheet file (the following CSS code enables older browsers to support the block-level elements discussed in this chapter): header, section, footer, aside, nav, article, figure { display: block; } ## Issues in Internet Explorer 8 and Earlier Versions IE8 and earlier versions cannot render CSS effects within these elements, so you cannot use `
`, `
`, `
`, `
`, `
`, `
`, `
`, or other HTML5 elements. **Solution:** You can use the HTML5 Shiv JavaScript library to resolve compatibility issues in IE. Download link for HTML5 Shiv: [https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/html5shiv/3.7.3/html5shiv.min.js](https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/html5shiv/3.7.3/html5shiv.min.js) After downloading, insert the following code into your webpage: This code loads the `html5shiv.js` file when the browser version is less than IE9. You must place it within the `` element because IE needs to load these new HTML5 elements after parsing the head section.

YouTip

Html5 Semantic Elements

Internet Explorer 9

Internet Explorer 9

📂 Categories