HTML5 semantics

Semantics = Meaning

Semantic elements = meaningful elements

What are semantic elements?

A semantic element can clearly describe its meaning to browsers and developers.

No semantics Element example: <div> with <span>- No need to think about content.

Semantics Element example: <form>, <table>, and <img> -Its content is clearly defined.

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

Note: This element is not supported in Internet Explorer 8 and earlier. But compatible solutions are provided at the bottom of the article.

New Semantic Elements in HTML5

Many sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer">
to show route, header, and footer.

HTML5 offers new semantic components to characterize diverse pieces of a website page:  

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

HTML5 <section> Element

The <section> component characterizes a segment in a document.

According to W3C's HTML5 documentation: "A segment is a topical gathering of substance, commonly with a heading."

A Web webpage's landing page could be part into areas for presentation, substance, and contact information.


  <p>The World Wide Fund for Nature (WWF) is....</p>
Try it yourself »

HTML5 <article> Element

<article> Tags define independent content. .

<article> Element usage example:

  • Forum post
  • Blog post
  • News story
  • Comment


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

Nesting Semantic Elements

In the HTML5 standard, the <article> component characterizes a total, independent square of related elements.

The <section> component is characterized as a square of related elements.

Can we utilize the definitions to choose how to settle components? No, we cannot!

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

You will likewise discover pages with <section> components containing <section> components, and <article> components containing <article> elements.

HTML5 <header> Element

<header>Element describes the head area of the document

<header>The element is mainly used to define the presentation area of the content.

You can use multiple <header> Element.

The following example defines the head of the article:


    <h1> Internet Explorer 9 </h1>
    <p><time pubdate datetime="2011-03-15"></time></p>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released on
  March 14, 2011 at 21:00</p>
Try it Yourself »

HTML5 <footer> Element

<footer> Element describes the bottom area of the document.

<footer> Element should contain its containing elements

A footer usually contains the author of the document, copyright information, terms of use for links, contact information, etc.

You can use multiple<footer>Element.


  <p>Posted by: WELOOKUPS</p>
  <p>Contact data: <a href="mailto:someone@example.com">
Try it Yourself »

HTML5 <nav> Element

<nav> The label defines the part of the navigation link.

<nav> Element is used to define the navigation link part of the page. However, not all links need to be included in <nav>Element!


  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
Try it Yourself »

HTML5 <aside> Element

<aside> Tags define content outside the main area of the page (such as the sidebar).

The content of the aside tag should be relevant to the content of the main area.


<p>My family and I visited The Epcot focus this summer.</p>

  <h4>Epcot Center</h4>
  <p>The Epcot Center is an amusement park in Disney World, Florida.</p>
Try it Yourself »

HTML5 <figure> and <figcaption> Elements

<figure>Tags specify independent streaming content (images, charts, photos, code, etc.).

<figure> The content of the element should be relevant to the main content, but if deleted, it should not affect the document flow.

<figcaption> Label definition <figure> The title of the element.

<figcaption>The element should be placed at the first or last child of the "figure" element.



  <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
Try it Yourself »

The <img> component characterizes the picture, the <figcaption> component characterizes the caption.

Why Semantic HTML5 Elements?

With HTML4, engineers utilized their own most loved ascribe names to style page elements:

header, top, base, footer, menu, route, fundamental, holder, content, article, sidebar, topnav, ...

This made it outlandish for web indexes to distinguish the right site page content.

With HTML5 components like: <header> <footer> <nav> <section> <article>, this will wind up less demanding.

According to the W3C, a Semantic Web:

"Allows information to be shared and reused crosswise over applications, endeavors, and communities."