HTML5セマンティックタグ完全ガイド：実例付き

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

  <header>
    <a href="/"><img src="logo.svg" alt="Company name"></a>
    <nav aria-label="Main navigation">
      <ul>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/contacts">Contacts</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <!-- Unique page content -->
  </main>

  <footer>
    <p>&copy; 2026 Company name</p>
    <nav aria-label="Secondary navigation">
      <a href="/privacy">Privacy</a>
      <a href="/sitemap">Sitemap</a>
    </nav>
  </footer>

</body>
</html>

<!-- Blog post page -->
<main>

  <article>
    <header>
      <h1>How to choose the right HTML tag</h1>
      <p>Published: <time datetime="2026-05-22">22 May 2026</time></p>
      <address>
        By: <a rel="author" href="/authors/pavlo">seohead</a>
      </address>
    </header>

    <section>
      <h2>Why semantics matters</h2>
      <p>Section text...</p>
    </section>

    <section>
      <h2>Main tags</h2>
      <p>Section text...</p>

      <aside>
        <p>Note: the HTML Living Standard is continuously updated.</p>
      </aside>
    </section>

    <footer>
      <p>Tags: <a href="/tags/html">#html</a>, <a href="/tags/seo">#seo</a></p>
    </footer>
  </article>

  <!-- Related articles -->
  <aside aria-label="Related articles">
    <h2>Also read</h2>
    <ul>
      <li><a href="/blog/heading-structure">Heading structure</a></li>
      <li><a href="/blog/schema-org-json-ld">Schema.org markup</a></li>
    </ul>
  </aside>

</main>

<!-- CORRECT: section with a heading -->
<section>
  <h2>Product benefits</h2>
  <ul>
    <li>Fast delivery</li>
    <li>2-year warranty</li>
  </ul>
</section>

<!-- CORRECT: div for styling -->
<div class="cards-grid">
  <article>...</article>
  <article>...</article>
  <article>...</article>
</div>

<!-- WRONG: section with no heading -->
<section class="cards-grid">
  <article>...</article>
</section>

<!-- WRONG: div where content has meaning -->
<div id="about">
  <!-- The About section — this should be <section> -->
  <h2>About us</h2>
  <p>...</p>
</div>

<!-- figure + figcaption for an image -->
<figure>
  <img
    src="/images/html5-structure.webp"
    alt="Diagram of the semantic structure of an HTML5 page"
    width="800" height="450"
  >
  <figcaption>Fig. 1 — Typical semantic structure of an HTML5 document</figcaption>
</figure>

<!-- figure + figcaption for code -->
<figure>
  <pre><code class="language-html">&lt;article&gt;...&lt;/article&gt;</code></pre>
  <figcaption>Example: minimal article markup</figcaption>
</figure>

<!-- time with datetime attribute -->
<p>
  Article updated:
  <time datetime="2026-05-22T10:30:00+03:00">22 May 2026</time>
</p>

<!-- details + summary (FAQ without JS) -->
<details>
  <summary>What is semantic HTML?</summary>
  <p>Markup where each tag conveys the meaning of the content,
     not just its visual appearance.</p>
</details>

<!-- mark for search highlighting -->
<p>Results for "<mark>semantic tags</mark>" — 42 articles</p>

<main>
  <header>
    <h1>SEO blog</h1>
    <p>Practical articles on website promotion</p>
  </header>

  <!-- Article list — each card is an article -->
  <section aria-label="Article list">
    <article>
      <header>
        <h2><a href="/blog/semantic-html5">HTML5 semantic tags</a></h2>
        <p>
          <time datetime="2026-05-22">22 May 2026</time>
          · <span>18 min read</span>
        </p>
      </header>
      <p>HTML5 semantic tags are the foundation of correct page markup...</p>
      <footer>
        <a href="/blog/semantic-html5">Read more</a>
      </footer>
    </article>

    <article>
      <header>
        <h2><a href="/blog/heading-structure">Heading structure</a></h2>
        <p>
          <time datetime="2026-04-10">10 April 2026</time>
          · <span>12 min read</span>
        </p>
      </header>
      <p>One H1 per page. H2 divides content into sections...</p>
      <footer>
        <a href="/blog/heading-structure">Read more</a>
      </footer>
    </article>
  </section>

  <!-- Pagination -->
  <nav aria-label="Pagination">
    <a href="?page=1" aria-current="page">1</a>
    <a href="?page=2">2</a>
    <a href="?page=3">3</a>
  </nav>
</main>

<main>
  <article itemscope itemtype="https://schema.org/Product">

    <!-- Product main area -->
    <header>
      <h1 itemprop="name">SoundMax Pro Wireless Headphones</h1>
      <p itemprop="description">40 hours of battery life, active noise cancellation...</p>
    </header>

    <!-- Product image -->
    <figure>
      <img
        src="/products/soundmax-pro.webp"
        alt="SoundMax Pro wireless headphones — front view"
        itemprop="image"
        width="600" height="600"
      >
      <figcaption>SoundMax Pro in three colours: black, white, blue</figcaption>
    </figure>

    <!-- Price -->
    <section aria-label="Price and purchase">
      <p>
        <data value="129" itemprop="price">$129</data>
      </p>
      <button type="button">Add to cart</button>
    </section>

    <!-- Specs -->
    <section>
      <h2>Specifications</h2>
      <dl>
        <dt>Battery life</dt><dd>40 hours</dd>
        <dt>Connection</dt><dd>Bluetooth 5.3</dd>
        <dt>Weight</dt><dd>250 g</dd>
      </dl>
    </section>

    <!-- Reviews — each review is an article inside article -->
    <section aria-label="Customer reviews">
      <h2>Reviews</h2>

      <article>
        <header>
          <strong>Anna K.</strong>
          <time datetime="2026-04-15">15 April 2026</time>
        </header>
        <p>Excellent headphones, clean sound. The noise cancellation works brilliantly.</p>
      </article>

      <article>
        <header>
          <strong>Michael R.</strong>
          <time datetime="2026-03-28">28 March 2026</time>
        </header>
        <p>The 40-hour claim is real. Took them on a business trip and they lasted the week.</p>
      </article>
    </section>

  </article>
</main>

<body>
  <header>
    <nav aria-label="Main navigation">
      <!-- logo + menu -->
    </nav>
  </header>

  <main>
    <!-- Hero section -->
    <section aria-labelledby="hero-title">
      <h1 id="hero-title">SEO promotion for your business</h1>
      <p>We help businesses improve technical and content foundations</p>
      <a href="#contacts" role="button">Get a free audit</a>
    </section>

    <!-- Services -->
    <section>
      <h2>Our services</h2>
      <ul role="list">
        <li>
          <article>
            <h3>Technical audit</h3>
            <p>Full technical health check of your site...</p>
          </article>
        </li>
        <li>
          <article>
            <h3>Content strategy</h3>
            <p>Keyword universe and content calendar...</p>
          </article>
        </li>
      </ul>
    </section>

    <!-- Main content + sidebar -->
    <div class="layout-two-col">
      <section>
        <h2>Case studies</h2>
        <!-- ... -->
      </section>

      <aside aria-label="Contact us">
        <h2>Get in touch</h2>
        <address>
          <p>Email: <a href="mailto:hello@seohead.tech">hello@seohead.tech</a></p>
          <p>Telegram: <a href="https://t.me/seohead">@seohead</a></p>
        </address>
      </aside>
    </div>
  </main>

  <footer>
    <nav aria-label="Site map">
      <ul>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/glossary">Glossary</a></li>
      </ul>
    </nav>
    <p><small>&copy; 2026 seohead.tech</small></p>
  </footer>
</body>

<!-- Multiple <nav> elements are fine — distinguish them with aria-label -->

<!-- Breadcrumbs -->
<nav aria-label="Breadcrumbs">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    <li aria-current="page">HTML5 semantic tags</li>
  </ol>
</nav>

<!-- Main navigation inside <header> -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/blog" aria-current="page">Blog</a></li>
    <li><a href="/services">Services</a></li>
  </ul>
</nav>

<!-- Pagination at the end of a listing -->
<nav aria-label="Blog pages">
  <a href="?page=1" rel="prev" aria-label="Previous page">←</a>
  <a href="?page=1">1</a>
  <span aria-current="page">2</span>
  <a href="?page=3">3</a>
  <a href="?page=3" rel="next" aria-label="Next page">→</a>
</nav>

<!-- In-page table of contents -->
<nav aria-label="Article contents">
  <ol>
    <li><a href="#structural-tags">Structural tags</a></li>
    <li><a href="#content-tags">Content tags</a></li>
    <li><a href="#nesting-examples">Nesting examples</a></li>
  </ol>
</nav>

<!-- MISTAKE 1: <section> instead of <div> for styling -->
<section class="flex-wrapper">  <!-- no heading = not section -->
  <img src="photo.jpg" alt="">
</section>
<!-- CORRECT -->
<div class="flex-wrapper">
  <img src="photo.jpg" alt="Photo description">
</div>

<!-- MISTAKE 2: <article> for a card without standalone meaning -->
<article class="feature-card">
  <span class="icon">⚡</span>
  <h3>Fast delivery</h3>
</article>
<!-- CORRECT: a benefits card is li or div, not article -->
<li class="feature-card">
  <span class="icon" aria-hidden="true">⚡</span>
  <h3>Fast delivery</h3>
</li>

<!-- MISTAKE 3: <header> as a synonym for <div class="header"> -->
<header class="section-header">
  <h2>Our advantages</h2>
</header>
<!-- CORRECT: use <header> only when a section has an introductory group -->
<section>
  <h2>Our advantages</h2>  <!-- h2 directly, no header wrapper -->
  ...
</section>

<!-- MISTAKE 4: two <main> elements -->
<main>Primary content</main>
<main>Also important content</main>  <!-- invalid! -->
<!-- CORRECT: one <main>, supplementary content in <aside> -->
<main>Primary content</main>
<aside>Supplementary content</aside>

<!-- MISTAKE 5: <address> for an office address in body text -->
<address>1 High Street, London</address>  <!-- not in an author/org context -->
<!-- CORRECT -->
<p>Office address: 1 High Street, London</p>
<!-- or in footer as site contact information: -->
<footer>
  <address>
    <a href="mailto:hello@company.com">hello@company.com</a>
  </address>
</footer>

<!-- Decorative image: empty alt, figcaption describes it -->
<figure>
  <img src="chart.png" alt="" role="presentation">
  <figcaption>Organic traffic growth over 6 months: +340%</figcaption>
</figure>

<!-- Informative image: full alt text -->
<figure>
  <img
    src="html5-tags-map.png"
    alt="Map of HTML5 semantic tags: header, nav, main, article, section, aside, footer"
  >
  <figcaption>Fig. 2 — Complete map of HTML5 semantic elements</figcaption>
</figure>

<!-- Mistake: no alt at all -->
<img src="diagram.png">  <!-- invalid! -->