HTML Semantic Tags

A semantic tag in HTML is a tag whose name clearly describes its purpose and its content. HTML5 introduced several new semantic tags.

HTML Tutorial

Example

A page section, clearly identified as an 'article'.

Early life of Van Gogh

Van Gogh returned to Etten in April 1881 for an extended stay with his parents. He continued to draw, often using his neighbors as subjects. In August 1881, his recently widowed cousin, Cornelia Vos-Stricker, daughter of his mother's older sister arrived for a visit.

He was thrilled and took long walks with her. Cornelia was seven years older than he was and had an eight-year-old son. Van Gogh surprised everyone by declaring his love to her and proposing marriage. She refused with the words: "nooit, neen, nimmer" (nay, no, never).

<article style="background-color:#f6f8ff; padding:15px;">
  <h2>Early life of Van Gogh</h2>
  <p>
     Van Gogh returned to Etten in April 1881 for an extended stay 
     with his parents. He continued to draw, often using his neighbors 
     as subjects. In August 1881, his recently widowed cousin, Cornelia 
     Vos-Stricker, daughter of his mother's older sister arrived for 
     a visit. 
  </p>
  <p>
     He was thrilled and took long walks with her. Cornelia was seven 
     years older than he was and had an eight-year-old son. Van Gogh 
     surprised everyone by declaring his love to her and proposing marriage. 
     She refused with the words: "nooit, neen, nimmer" (nay, no, never). 
  </p>
</article>

Semantic Tags in HTML5

HTML5 supports several semantic tags that better define the parts of a web page.
Instead of using <div class='header'>, you can now use <header>.

Below are the semantic tags that were added in HTML5.
The adjacent page-layout shows how they are used.

The <section> Tag

The <section> tag defines a section or part in a page.

According to W3C: "A section is a thematic grouping of content, typically with a heading."

A home page, for example, can have introduction, content, and contact sections.

A <section> with a paragraph about the painter Vincent Van Gogh.

Vincent Van Gogh

Vincent van Gogh (1853-1890) was a Dutch post-impressionist painter who is among the most famous and influential figures in the history of Western art. In just over a decade, he created about 2,100 artworks, including around 860 oil paintings, most of which date from the last two years of his life.

<section>
  <h1>Vincent Van Gogh</h1>
  <p>
     Vincent van Gogh (1853-1890) was a Dutch post-impressionist painter 
     who is among the most famous and influential figures in the history of 
     Western art. In just over a decade, he created about 2,100 artworks, 
     including around 860 oil paintings, most of which date from the 
     last two years of his life.
  </p>
</section>

For more information on the <section> tag, see our HTML section Reference Guide.


The <article> Tag

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

This tag is commonly used in blog posts, forum posts, newspaper articles, and more.

An <article> about the Van Gogh Museum in Amsterdam.

Van Gogh Museum, Amsterdam

The Van Gogh Museum is a Dutch art museum dedicated to the works of Vincent van Gogh and his contemporaries in the Museum Square in Amsterdam. The museum opened on 2 June 1973, and its buildings were designed by Gerrit Rietveld and Kisho Kurokawa.

<article>
  <h1>Van Gogh Museum, Amsterdam</h1>
  <p>
     The Van Gogh Museum is a Dutch art museum dedicated to the works of 
     Vincent van Gogh and his contemporaries in the Museum Square in 
     Amsterdam. The museum opened on 2 June 1973, and its buildings 
     were designed by Gerrit Rietveld and Kisho Kurokawa.
  </p>
</article>

For more information on the article tag, see our HTML article Reference.


Did you know?

Did you know?

Nesting <article> in <section> and vice versa

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

The <section> tag defines a section in a document.

These definitions provide no guidance on how to nest these elements.

So you will find <section> tags containing <article> tags and vice versa -- all of which are valid.


The <header> Tag

The <header> tag specifies a header for a document or section.

A <header> tag is a container for introductory content.

Multiple <header> tags are allowed on a single page.

A <header> for an article.

Van Gogh, Early Life

Van Gogh returned to Etten in April 1881 for an extended stay with his parents. He continued to draw, often using his neighbors as subjects. In August 1881, his recently widowed cousin, Cornelia Vos-Stricker, daughter of his mother's older sister arrived for a visit. He was thrilled and took long walks with her. Cornelia was seven years older than he was and had an eight-year-old son. Van Gogh surprised everyone by declaring his love to her and proposing marriage. She refused with the words: "nooit, neen, nimmer" (nay, no, never).

<article>
  <header>
    <h1>Van Gogh, Early Life</h1>
  </header>
  <p>
     Van Gogh returned to Etten in April 1881 for an extended stay 
     with his parents. He continued to draw, often using his neighbors 
     as subjects. In August 1881, his recently widowed cousin, Cornelia 
     Vos-Stricker, daughter of his mother's older sister arrived for a visit. 
     He was thrilled and took long walks with her. Cornelia was seven years older 
     than he was and had an eight-year-old son. Van Gogh surprised everyone 
     by declaring his love to her and proposing marriage. She refused with 
     the words: "nooit, neen, nimmer" (nay, no, never). 
  </p>
</article>

For more information on the header tag, see our HTML header Reference Guide.


The <footer> Tag

The <footer> tag specifies a footer for a document or section.

A <footer> tag has information about its containing element.

Footers may contain author info, copyright info, links to terms of use, contact info, etc.

Multiple <footer> tags are allowed on a single page.

A <footer> at the bottom of an article.

Van Gogh, Unsold Works

Upon Vincent van Gogh's death in 1890, his unsold work fell into the possession of his brother Theo. Theo died six months after Vincent, leaving the work in the possession of his widow, Johanna van Gogh-Bonger. Selling many of Vincent's paintings with the ambition of spreading knowledge of his artwork, Johanna maintained a private collection of his works. The collection was inherited by her son Vincent Willem van Gogh in 1925, who eventually loaned it to the Stedelijk Museum in Amsterdam, where it was displayed for many years. Finally, it was transferred to the state-initiated Vincent van Gogh Foundation in 1962.

<article>
  <header>
    <h1>Van Gogh, Unsold Works</h1>
  </header>
  <p>
     Upon Vincent van Gogh's death in 1890, his unsold work fell 
     into the possession of his brother Theo. Theo died six months 
     after Vincent, leaving the work in the possession of his widow, 
     Johanna van Gogh-Bonger. Selling many of Vincent's paintings with 
     the ambition of spreading knowledge of his artwork, Johanna 
     maintained a private collection of his works. The collection 
     was inherited by her son Vincent Willem van Gogh in 1925, who 
     eventually loaned it to the Stedelijk Museum in Amsterdam, where 
     it was displayed for many years. Finally, it was transferred to the 
     state-initiated Vincent van Gogh Foundation in 1962.
  </p>
  <footer>
    <div>Posted on August 28, 2020 by: Johan de Vries.</div>
    <div>Contact info: <a href="mailto:johan@devries.nl">johan@devries.nl</a>.</div>
  </footer>
</article>

For more information on the footer tag, see our HTML footer Reference Guide.


The <nav> Tag

The <nav> tag specifies a navigation area, usually with navigation links.

Explore artwork by your favorite artist:

<div>Explore artwork by your favorite artist:</div>
<br />
<nav>
  <a href='javascript:alert("Matisse")'>Matisse</a> |
  <a href='javascript:alert("Cezanne")'>Cezanne</a> |
  <a href='javascript:alert("Gauguin")'>Gauguin</a> |
  <a href='javascript:alert("Van Gogh")'>Van Gogh</a> 
</nav>

For more information on the nav tag, see our HTML nav Reference.


The <aside> Tag

The <aside> tag defines content that's aside from the main content (like a sidebar).

Contents of the <aside> is expected to be related to the surrounding content.

An <aside> about Van Gogh's self-portraits.

<aside>
  <h1>Self portraits</h1>
  <p>
    Van Gogh created more than 43 self-portraits between 1885 and 1889.
    They were usually completed in series, such as those painted in Paris 
    in mid-1887, and continued until shortly before his death. Generally 
    the portraits were studies, created during introspective periods when 
    he was reluctant to mix with others, or when he lacked models, and 
    so painted himself.
 </p>
</aside>

For more information on aside tag, see our HTML aside Reference Guide.


The <figure> and <figcaption> Tags

An image and a caption can be grouped together with a <figure> tag.

The <figcaption> tag adds a caption, i.e. an explanation, to the image.

A semantic <figure> with a <figcaption>.

Field of Poppies
Fig 1. Field of Poppies, 1890, Vincent Van Gogh.
<figure>
  <img src="/img/html/poppies.jpg" alt="Field of Poppies" />
  <figcaption>Fig 1. Field of Poppies, 1890, Vincent Van Gogh.</figcaption>
</figure>

For more information on figure tag, see our HTML figure Reference Guide.


Did you know?

Did you know?

Why semantic tags?

According to the W3C, a Semantic Web: Allows data to be shared and reused across applications, enterprises, and communities.

Semantic tags make sense because everyone benefits: developers, browsers, search engines, and ultimately the end-users for a better, richer web experience.

Tip:  Always follow the intended use of semantic tags. If not, you'll create confusion, including yourself.


Summary of Semantic Tags in HTML5

A summary of the semantic HTML5 tags with a brief description.

Tag Description
<header> Specifies a header for a document or section
<nav> Defines a navigation area
<main> Specifies the main content of a document
<footer> Defines a footer for a document or section
<article> Defines an article
<aside> Defines content aside from the page content
<section> Defines a section in a document
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption> Defines a caption for a <figure> element
<time> Defines a date/time
<mark> Defines marked/highlighted text
<details> Defines additional details that the user can view or hide
<summary> Defines a visible heading for a <details> element

Browser Support for semantic elements

When HTML5 semantic elements support started for each browser:

Chrome
5 May 2010
Firefox
4 Mar 2011
IE/Edge
9 Mar 2011
Opera
11.5 Jun 2011
Safari
5 Jun 2010

Note:  HTML5 semantic tags are supported by all modern browsers.


You may also like

Guides