Semantic HTML: Top 20 Elements and How to Use Them

JS Dev Journalist -

Welcome to the exciting world of Semantic HTML! In this article, we will explore the top 20 elements that form the foundation of web development. Whether you're a fresh grad or someone looking to enhance their web development skills, this guide is designed to help you understand the importance of semantic HTML and how to use it effectively in your projects. We'll provide plenty of code examples and explain each concept in a beginner-friendly way.

You might be wondering:

  • What are all these new semantic elements in HTML5?
  • When should I use each one?
  • How do they differ from regular divs?

This comprehensive guide will answer all those questions and more! You'll learn the top 20 semantic HTML elements with detailed explanations, real-world examples, and handy tips.

Let's level up your markup skills!

The Importance of Semantics

Before we jump into the elements, let's briefly discuss why semantic HTML matters:

  • Accessibility: It provides meaning to assistive technologies like screen readers.
  • SEO: Search engines understand semantic code better.
  • Maintainability: The code is easier to read and edit later.

Ready to start writing more meaningful HTML? Let's go!

1.<header>

The <header> element represents introductory content like navigation, headings, logos etc.

<header>
  <h1>My Website</h1>
  <nav>
    <!-- nav links -->
  </nav> 
</header>

Tip: Only one <header> per page, usually at the top.

2.<nav>

The <nav> element contains major navigation links on your site:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Tip: Screen readers use <nav> to determine page navigation.

3.<main>

The <main> element wraps the central content unique to each document or app screen:

<main>
  
  <h1>Welcome</h1>
  
  <p>Home page content goes here...</p>
  
</main>

Tip: Use just one <main> per page. Don't nest it inside other elements.

Still with me? Let's keep going and look at a few more important elements...

4.<section>

The <section> element divides content into thematic groups:

<section>
  <h2>News</h2>
  
  <!-- news content -->
</section>

<section>
  <h2>Products</h2>
  
  <!-- products -->
  
</section>

Tip: Multiple <section>s are common on one page.

5.<article>

The <article> element encloses independent, self-contained content like a forum post, blog entry, or news story:

<article>
  <h2>My Blog Post</h2>
  <p>Post contents...</p>
</article>

Tip: <article> is meant for content that can stand alone, separate from the page.

6.<aside>

The <aside> element holds content related to surrounding content, like sidebars, pullquotes, glossary terms, related posts etc.

<aside>
  <h4>Related</h4>
  <!-- related content -->
</aside>

Tip: <aside> gives additional info about main content; it doesn't stand alone.

7.<footer>

The <footer> element represents concluding content like copyright, contact info, sitemaps, etc:

<footer>
  Copyright © 2022 MyWebsite
</footer>

Tip: Usually one <footer> per page at the bottom, but not required.

We've covered the big semantic block elements. Now let's look at some semantic inline/text elements...

8.<strong>

The <strong> element indicates text of strong importance. Screen readers emphasize it:

<p>This sauce is <strong>extremely hot</strong>.</p>

Tip: Use <strong> to highlight key words and phrases.

9.<em>

The <em> element stress emphasis on text:

<p>I <em>love</em> semantic HTML!</p>

Tip: <em> implies vocal stress when reading aloud.

10.<blockquote>

The <blockquote> element indicates a long quotation:

<blockquote>
  <p>Semantic HTML is the heart of accessible, optimized web pages.</p>
</blockquote>

Tip: Always cite the source URL!

11.<q>

The <q> element is for shorter quotations that don't require paragraph breaks:

<p>As Denis said: <q>Code is poetry</q></p>

Tip: Browsers add quotation marks around <q> automatically.

12.<cite>

The <cite> element is used for citations and references like book/paper titles:

<p>Read more in <cite>Semantic HTML: A History</cite></p>

13.<dfn>

The <dfn> element indicates the defining instance of a term:

<p><dfn>Semantics</dfn> means the meaning of code structure.</p>

Tip: <dfn> helps distinguish definition of key terms.

14.<abbr>

The <abbr> element represents an abbreviation or acronym:

<p>I love <abbr title="HyperText Markup Language">HTML</abbr>!</p>

Tip: The title attribute provides the full expansion.

Almost there! Just a few more elements to cover.

15.<time>

The <time> element denotes times and dates like events, publication dates, etc:

<time datetime="2022-01-01">January 1, 2022</time>

Tip: Use the datetime attribute to specify standard format.

16.<address>

The <address> element provides contact info for author/organization:

<address>
  Email: 
  <a href="mailto:hello@mycompany.com">hello@mycompany.com</a>
</address>

Tip: Can include street addresses too!

17.<figure> and <figcaption>

<figure> represents self-contained content like images or code snippets. <figcaption> provides a caption:

<figure>
  <img src="html.png" alt="HTML code screenshot">
  
  <figcaption>Code sample</figcaption>
</figure>

18.<mark>

The <mark> element highlights relevant text:

<p>Do not forget to use <mark>semantic markup</mark>!</p>

Tip: <mark> is different from <strong>. It indicates relevance vs importance.

19.<details> and <summary>

<details> creates an expandable/collapsible disclosure widget. <summary> provides visible heading:

<details>
  <summary>Read more</summary>
  <p>Additional details...</p>
</details>

20.<meter> and <progress>

The <meter> and <progress> elements represent numeric values in a range:

<meter value="0.5">50%</meter>

<progress value="70" max="100">70%</progress>

There you have it! The top 20 semantic HTML elements and how to use them. With this guide under your belt, you can write meaningful markup that improves accessibility, SEO, and maintainability.

Complete HTML Structure

Here is an example HTML code snippet to demonstrate usage of all the semantic elements covered in this article:

<!DOCTYPE html>
<html>
<head>
  <title>Semantic HTML Elements Example</title>
</head>

<body>

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li> 
    </ul>
  </nav>
</header>

<main>

  <article>
    <h2>Article Title</h2>
    <p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Praesent ac magna sed neque sodales varius et id lacus. Sed quis erat est.</p>

    <p>As Denis said: <q>Code is poetry</q></p>

    <figure>
      <img src="image.jpg" alt="Article image">
      <figcaption>Image caption</figcaption> 
    </figure>

  </article>

  <aside>
    <h4>Related</h4>
    <ul>
      <li><a href="#">Related post 1</a></li>
      <li><a href="#">Related post 2</a></li>
    </ul>
  </aside>

</main>

<footer>
  <p>Copyright © 2023 My Website</p>
</footer>

</body>
</html>

This demonstrates proper usage of <header>, <nav>, <main>, <article>, <aside>, <footer>, <figure>, <figcaption>, <q> and other semantic elements covered in the article. The snippet can serve as a handy reference for beginners.

Now it's time to put your skills into practice! Try incorporating more semantic elements into your next web project.

Let me know if you have any other questions. Happy coding!