Articles, Footer, Figure and Figcaption

The Article Tag

The <article> element represents a self-contained composition in a document.

What does “self-contained” mean? It means that if you copied the <article> block and pasted it onto a completely different website, it would still make sense on its own.

Perfect examples of <article> use cases include:

• A blog post
• A news story
• A user comment on a forum
• A product card in a store

Section vs. Article

The difference between <section> and <article> is a common point of confusion.

• <section> is for grouping related content (like a chapter in a book).
• <article> is for standalone content (like a single newspaper article).

An <article> can contain multiple <section>s, and a <section> can contain multiple <article>s!

The Footer Tag

The <footer> element represents the bottom of a section or the bottom of the entire webpage.

It typically contains information about the author, copyright data, links to related documents, or legal notices.

<footer>
  <p>&copy; 2024 My Tech Blog. All rights reserved.</p>
  <nav>
    <a href="/privacy">Privacy Policy</a>
    <a href="/terms">Terms of Service</a>
  </nav>
</footer>

Figure and Figcaption

Often, you want to show an image (or a video, or a code snippet) and provide a caption explaining what it is.

Instead of just placing an <img> tag next to a <p> tag, HTML5 provides the <figure> and <figcaption> semantic elements to permanently link them together.

• <figure> wraps around both the media and the caption.
• <figcaption> provides the actual caption text.

Code Example

<figure>
  <img src="/images/eiffel-tower.jpg" alt="The Eiffel Tower at sunset">
  <figcaption>Fig 1. The Eiffel Tower in Paris, France during the summer of 2023.</figcaption>
</figure>

This is excellent for accessibility because a screen reader will explicitly know that the caption belongs directly to the image above it!

Try It Yourself

Try creating a mini blog post using an <article> tag, and include a <figure> with an image and a caption!

Key Takeaways

• Use <article> for content that makes sense completely on its own (like a blog post).
• Use <footer> for the bottom of a page or section (often for copyrights and legal links).
• Use <figure> to wrap media, and <figcaption> to provide a semantic caption for it.