HTML Semantic Elements

Learn about semantic elements that clearly describe their meaning in a human- and machine-readable way

Introduction to Semantic Elements

Semantic HTML elements provide information about the contents of those elements beyond just how they look on a page.

What is Semantic HTML?

Semantic HTML means using HTML tags that clearly describe the meaning of the content inside them — both for browsers and developers.

Instead of using <div> or <span> for everything, semantic tags like <header>, <footer>, and <article> tell what the content is, not just how it looks.

Why Semantic HTML Matters

Accessibility: Helps screen readers and assistive technologies understand the structure and meaning of the content.
SEO: Search engines can better index and rank pages with clear semantic structure.
Maintainability: Makes code easier to read and maintain for developers.
Future-proofing: Semantic elements are more likely to be supported in future web standards.

Common Semantic Tags & Their Usage

Tag	Purpose
<header>	Represents introductory content or a group of navigational links.
<nav>	Defines a set of navigation links.
<main>	Represents the main content of the document.
<article>	Represents a self-contained piece of content that could be distributed independently.
<section>	Represents a thematic grouping of content, typically with a heading.
<aside>	Represents content that is tangentially related to the main content, like sidebars.
<footer>	Represents the footer for its nearest sectioning element.
<figure>	Represents self-contained content, like images, diagrams, or illustrations, along with their captions.
<figcaption>	Represents a caption or legend for the content of the <figure> element.
<time>	Represents a specific period in time, like a date or time range.
<address>	Represents contact information for the author or owner of a document or article.
<mark>	Represents text highlighted for reference or emphasis.
<blockquote>	Represents a section that is quoted from another source.
<code>	Represents a fragment of computer code.
<pre>	Represents preformatted text, where whitespace is preserved.

Example of Semantic HTML Structure

Here’s a simple example of how semantic HTML can be structured:

Example of Semantic HTML:

                            
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Semantic HTML Example</title>
</head>
<body>

  <header>
    <h1>My Blog</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Learning Semantic HTML</h2>
      <p>Semantic tags make your code clean and accessible.</p>
    </article>

    <aside>
      <h3>Related Articles</h3>
      <ul>
        <li><a href="#">HTML Basics</a></li>
        <li><a href="#">CSS Layouts</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 My Blog</p>
  </footer>

</body>
</html>

Output:

This will render as with use My page CSS

Semantic HTML Example

My Blog

Learning Semantic HTML

Semantic tags make your code clean and accessible.

In this example, the structure is clear and meaningful, making it easier for both humans and machines to understand the content.

Best Practices for Using Semantic HTML

Use semantic elements where appropriate to enhance accessibility and SEO.
Avoid using non-semantic elements like <div> and <span> when a semantic alternative exists.
Keep your HTML clean and organized by using semantic tags to group related content.
Test your pages with screen readers to ensure they convey the intended meaning.

Conclusion

Using semantic HTML elements is a best practice that improves the accessibility, SEO, and maintainability of your web pages. By clearly defining the meaning of your content, you create a better experience for all users and ensure your site is future-proofed against changes in web standards.

For more information on semantic HTML, you can refer to the MDN Web Docs or the HTML Living Standard.

Happy coding!

For more information on semantic HTML, you can refer to the MDN Web Docs or the HTML Living Standard.