Semantic in HTML5

The HTML elements that allow you to structure your web page semantically

Share this page

New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

# article

Defines a self-contained block of content that can exist in any context.
It can have its own header, footer, sections... Useful for a list of blog posts.

Example: Copy

My blog post

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.

Posted on in Code
<article>
  <header>
    <h3>
      <a href="/my-blog-post">My blog post</a>
    </h3>
  </header>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
  </section>
  <footer>
    <small>
      Posted on <time datetime="2017-04-29T19:00">Apr 29</time> in <a href="/category/code">Code</a>
    </small>
  </footer>
</article>

# aside

Defines a block of content that is related to the main content. Displayed as a sidebar usually.

Example: Copy

My blog post

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.

etc.

<main>
  <h1>My blog post</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
  <p>etc.</p>
</main>

<aside>
  <h3>About the author</h3>
  <p>Frontend Designer from Bordeaux, currently working for Improbable in sunny London.</p>
</aside>

# figcaption

Defines the caption of a <figure>.

Example: Copy

HTML Reference logo
The HTML Reference logo
<figure>
  <img src="/images/html-reference-logo.png" alt="HTML Reference logo">
  <figcaption>The HTML Reference logo</figcaption>
</figure>

# figure

Defines a single self-contained element, usually an image.

Example: Copy

HTML Reference logo
<figure>
  <img src="/images/html-reference-logo.png" alt="HTML Reference logo">
</figure>

# main

Defines the main content of a web page. Can be displayed with a sidebar.

Example: Copy

My blog post

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.

etc.

<main>
  <h1>My blog post</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
  <p>etc.</p>
</main>

<aside>
  <h3>About the author</h3>
  <p>Frontend Designer from Bordeaux, currently working for Improbable in sunny London.</p>
</aside>

# mark

Defines highlighted text.

Example: Copy

We use HTML5 to write content on the Web.
We use HTML5 to write <mark>content</mark> on the Web.

# section

Defines a section within a web page.

Example: Copy

Section title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.

<section>
  <h2>Section title</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
</section>

# time

Defines a time on a 24h clock.

Example: Copy

The game starts at .
The game starts at <time datetime="2017-04-29T19:00">19:00</time>.

datetime

Defines the time and date.

"2017-04-29T19:00"

The value needs to be a valid time string.