HTML5 Semantic Elements

Semantics (derived from ancient Greece) can be defined as the study of the meaning of language.

Semantic elements are elements with semantics.

What are semantic elements?

Semantic elements clearly describe their meaning to browsers and developers.

Non-semanticExamples of elements: <div> and <span> - cannot provide information about their content.

SemanticExamples of elements: <form>, <table>, and <img> - clearly define their content.

Browser support

Yes Yes Yes Yes Yes

All modern browsers support HTML5 semantic elements.

In addition, you can 'help' older browsers handle 'unknown elements'.

Learn more about this chapter in HTML5 browsers.

New semantic elements in HTML5

Many websites include HTML code for indicating navigation, header, and footer, such as these: <div id="nav"> <div class="header"> <div id="footer">.

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

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

HTML5 Semantic Elements

HTML5 Semantic Elements

HTML5 <section> element

The <section> element defines a section within a document.

According to the W3C's HTML documentation: 'A section (section) is a group of content with a theme, usually with a title'.

The homepage of a website can be divided into sections such as introduction, content, contact information, etc.

Example

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

Try it yourself

HTML5 <article> element

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

Documents have their own meaning and can be read independently of other content on the website.

Application scenarios of the <article> element:

  • Forum
  • Blog
  • News

Example

<article>
   <h1>What Does WWF Do?</h1>
   <p>WWF's mission is to stop the degradation of our planet's natural environment,</p>
  and build a future in which humans live in harmony with nature.</p>
</article>

Try it yourself

Nested semantic elements

In the HTML5 standard, the <article> element defines a complete, self-contained block of related elements.

The <section> element is defined as a block of related elements.

Can we use this definition to decide how to nest elements? No, we cannot!

On the Internet, you will find HTML pages with <section> elements containing <article> elements, and pages with <article> elements containing <sections>.

You will also find <section> elements containing <section> elements, and <article> elements containing <article> elements.

HTML5 <header> element

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

The <header> element should be used as a container for introductory content.

A document can have multiple <header> elements.

The following example defines a header for an article:

Example

<article>
   <header>
     <h1>What Does WWF Do?</h1>
     <p>WWF's mission:</p>
   </header>
   <p>WWF's mission is to stop the degradation of our planet's natural environment,</p>
  and build a future in which humans live in harmony with nature.</p>
</article>

Try it yourself

HTML5 <footer> element

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

The <footer> element should provide information about its contained elements.

Footers usually contain information about the document's author, copyright, terms of use links, contact information, and so on.

You can use multiple <footer> elements in a single document.

Example

<footer>
   <p>Posted by: Hege Refsnes</p>
   <p>Contact information: <a href="mailto:someone@example.com">
  <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>

Try it yourself

HTML5 <nav> element

The <nav> element defines a collection of navigation links.

The <nav> element is intended to define large navigation link blocks. However, not all links in the document should be located within the <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>

Try it yourself

HTML5 <aside> element

<aside> is an element that contains some content outside the main content of the page (such as a sidebar).

The content of the aside 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>

Try it yourself

HTML5 <figure> and <figcaption> elements

In books and newspapers, it is common to see captions paired with images.

The role of the caption is to add a visible explanation to the image.

With HTML5, images and titles can be combined in <figure> in the element:

Example

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

Try it yourself

<img> The element defines an image,<figcaption> The element defines the title.

Why use HTML5 elements?

If HTML4 is used, developers will use their favorite attribute names to set the styles of web page elements:

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...

In this way, browsers cannot identify the correct web content.

And through HTML5 elements such as: <header> <footer> <nav> <section> <article>, this problem is easily resolved.

According to W3C, the Semantic Web:

"Allow sharing and reusing data across applications, enterprises, and groups."

Semantic Elements in HTML5

Below is a list of HTML5 new semantic elements arranged in alphabetical order.

These links point to the complete HTML reference manual.

Tags Description
<article> Define an article.
<aside> Define content outside the page content.
<details> Define additional details that users can view or hide.
<figcaption> Define the title of the <figure> element.
<figure> Specify content that is self-contained, such as illustrations, diagrams, photos, code lists, etc.
<footer> Define the footer of the document or section.
<header> Specify the header of the document or section.
<main> Specify the main content of the document.
<mark> Define important or emphasized text.
<nav> Define navigation links.
<section> Define sections in the document.
<summary> Define the visible title of the <details> element.
<time> Define date/time.