Easy Tutorial
Html Tag Name Html Layouts Html5 New Element Html Xhtml Html Forms Index Html Colors Html Basic Html Elements Html Images Html5 Form Elements Html Sounds Html5 App Cache Html Editors Html Summary Html Tutorial Html Formatting Html Css Html Iframe Html Entities Html Paragraphs Html Quicklist Html Colorvalues Html5 Geolocation Html5 Semantic Elements Html Url Html5 Web Sql Html Object Html Attributes Html Tables Html5 Audio Html5 Form Input Types Html Lists Html Blocks Html5 Webworkers Html Head Html Examples Html5 Form Attributes Html5 Svg Html5 Webstorage Thread Procon Html5 Syntax Html Intro Html5 Websocket Html5 Browsers Html Colornames Html Iframes Html5 Intro Html5 Mathml Html Links Html5 Draganddrop Html Media Html Headings Html5 Serversentevents Html Videos Html5 Video Html Scripts Html5 Canvas
❮ Html5 Geolocation Html Url ❯

HTML5 Semantic Elements

Semantic = Meaning

Semantic Element = Element with meaning

What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer.

Non-semantic element examples: <div> and <span> - No content meaning.

Semantic element examples: <form>, <table>, and <img> - Clearly define their content.

Browser Support

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

Note: Internet Explorer 8 and earlier versions do not support these elements. However, a compatibility 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 navigation links, headers, and footers.

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

HTML5 <section> Element

The <section> tag defines a section in a document, such as chapters, headers, footers, or any other sections of the document.

According to the W3C HTML5 documentation: A section contains a set of content along with its heading.

Example

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

HTML5 <article> Element

The <article> tag specifies independent, self-contained content.

Examples of where the <article> element can be used:

Example

<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released at 21:00 on March 14, 2011.</p>
</article>

HTML5 <nav> Element

The <nav> tag defines a set of navigation links.

The <nav> element is intended for major block of navigation links, but not all links need to be inside a <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>

HTML5 <aside> Element

The <aside> tag defines content aside from the content it is placed in (like a sidebar).

The content of the <aside> element should be related to the surrounding content.

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>

HTML5 <header> Element

The <header> element represents a container for introductory content or navigational links.

You can have several <header> elements in one HTML document.

Here is an example defining the header of an 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 at 21:00 on March 14, 2011.</p>
</article>

HTML5 <footer> Element

The <footer> element defines a footer for a document or section.

A footer typically contains information about the author of the section, copyright data, or links to related documents.

You can have several <footer> elements in one document.

Example

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

HTML5 <figure> and <figcaption> Elements

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

The <figcaption> tag defines a caption for a <figure> element.

The <figcaption> element can be placed as the first or last child of the <figure> element.

Example

<figure>
  <img decoding="async" loading="lazy" src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

Can We Start Using These Semantic Elements?

All the above elements are block elements (except <figcaption>).

To make these block elements work in all versions of browsers, you need to set some properties in your stylesheet (the following style code enables old browsers to support these block-level elements):

Issues in Internet Explorer 8 and Earlier Versions

IE8 and earlier versions do not render CSS effects in these elements, so you cannot use <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, or other HTML5 elements.

Solution: You can use the HTML5 Shiv JavaScript solution to solve the compatibility issue. Download HTML5 Shiv from: https://cdn.static.tutorialpro.org/libs/html5shiv/3.7/html5shiv.min.js

After downloading, include the following code in your web page:

This code loads 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 content is loaded.

❮ Html5 Geolocation Html Url ❯