Zenn
💨

【HTML】セマンティックとは？

2022/06/13に公開
CSS
HTML
tech

「セマンティック」の言葉聞いたことありますか？
HTMLのタグで何となくタグを記述している人もいうと思います。
私もその一人でした。今回セマンティックについての学びがあったのでまとめてみます。
早速始めましょう。

セマンティックとは？

「セマンティック」とは、文の構造によってHTMLのタグを正しく使い分けることです。
例えば、「見出し」は<h1>タグ、ヘッダーは<header>タグを使用するなどです。

セマンティックなタグを使う理由

理由は主に2つあります。以下の通りです。

  1. サイトの検索順位が上がる
  2. 保守性が向上する（コードの可読性が上がる）

解説します。

サイトの検索順位が上がる

サイトを巡回している検索エンジン（クローラー）が存在します。
セマンティックタグを正しく使用することでで、クローラーがサイトを構造的に理解します。
結果、サイトの検索順位が上がます。

保守性が向上する（コードの可読性が上がる）

例えば、サイトのheader部分のタグを<div>タグでコーディングします。

index.html
<div class="header"> 
    <div class="header__inner">
      <div class="header__menu">
        <div class="header__list">
          <div class="header__list">
            <a href="#" class="header__link">
              <p class="header__text">
                テキストテキストテキストテキストテキスト
              </p>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

このコードは、<div>タグしかないのでコード全体が見にくいです。
第三者が、サイトの改修や保守を行う際、構造の理解に時間がかってしまいます。
よって、良いコーディング方法とは言えません。
セマンティックなタグを用いて、コードを改善します。下記のコードをご覧ください。

index.html
  <header class="header">
    <div class="header__inner">
      <nav class="header__menu">
        <ul class="header__list">
          <li class="header__list">
            <a href="#" class="header__link">
              <p class="header__text">
                テキストテキストテキストテキストテキスト
              </p>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </header>

<header>タグ・<nav>を活用しました。コード全体の構造が一目で分かりやすくなりました。
セマンティックなタグを活用することで、コードの可読性が上げられます。

セマンティックなタグにはどんな種類がある？

私が日々活用しているセマンティッグなタグはこちら。

セマンティックなタグは100種類以上はありますが。
よく使用する上記のタグの使用方法を次の章で解説します。

セマンティックなタグの使い方

使い方を紹介する前に、一般的にサイトでよく見られるセマンティックなタグを使用した
実例をお見せします。

index.html
<body>
  <header>
    <nav>
      <!-- header部分 -->
    </nav>
  </header>
  <main> 
    <article>
      <section>
	<figure>
  　　　　　　　　　　　　　　　　<img src="sauna.png" alt="サウナの画像">
  　　　　　　　　　　　　　　　<figcaption>サウナの画像</figcaption>
        </figure>
      </section>
      <section>
        <!-- コンテンツ部分 -->
      </section>
      <section>
        <!-- コンテンツ部分 -->
      </section>
    </article>
  </main>
  <aside>
    <!-- サイドバー部分 -->
  </aside>
  <footer>
    <!-- footer部分 -->
  </footer>
</body>

多くのサイトの多くで、上記のようにセマンティックなタグを活用しています。

前置きが長くなりました。使い方を紹介します。

<main>タグ

<main>タグは、サイトの主要な内容部分で使用します。
例えば、ブログサイトに置き換えると記事の「タイトル・本文」の部分になりますね。
使い方はこちら。

index.html
<body>
  <header class="header">
    <!-- header部分 -->
  </header>
  <main>
    <h1>タイトル</h1>
    <p>ここは本文になります。</p>
  </main>
  <footer class="footer">
    <!-- footer部分 -->
  </footer>
</body>

<article>タグ

<article>タグ、その内容だけで完結できる部分に使用します。
例えば、「ブログ記事」や「ユーザーが投稿したコメント」が該当します。
使い方はこちら。

index.html
<body>
  <article>　　
    <h1>サウナの魅力とは</h1>
    <p>精神的・肉体的にリラックスした状態になる．．．</p>
  </article>
</body>

使用上の注意が2つあります。

  1. <article>タグの子要素に見出し（<h1>〜<h6>タグ）を含ませる。
  2. <article>タグの子要素でテーマが分かれている場合、<section>タグを利用する。

<aside>タグ

<aside>タグは、本文と間接的しか関係のない部分で使用します。
例えば、「ブログサイトのサイドバー」が該当します。
使い方はこちら。

index.html
<body>
  <article>
    <asection>
      <h1>サウナの魅力とは</h1>
      <p>精神的・肉体的にリラックスした状態になる．．．</p>
    </asection>
    <aside>  
     <p>ちなみに海外のサウナでは...</p>
    </aside>
  </article>
</body>

<section>タグ

<section>タグは、一つのまとまりの文章の部分に使用します。
例えば、ブログの記事でいくつかのテーマに分類されている場合、
テーマごとに<section>タグを使います。
使い方はこちら。

index.html
<body>
  <main> 
    <article>
      <section>
        <h1>サウナとは</h1>
        <p>精神的・肉体的にリラックスした状態になる．．．</p>
      </section>
    </article>
  </main>
</body>

注意点が３つあります。

  1. <section>タグの子要素に、見出し(<h1>〜<h6>タグ)を含める。
  2. まとまりの部分を全て　<section>タグを使用しない。
    例えば、ヘッダーは<header>タグ、フッターは<footer>タグなどを使う。他のタグが該当しない場合のみ、<section>タグを使用する。
  3. <article>タグと<section>タグの使い分け
    独立した記事として文章が成り立つ場合は、<article>タグを使用。独立した記事として文章が成り立たない場合は、<section>タグを使用。

<header>タグ

<header>タグは、「ロゴ」や「ナビゲーション」を構成するヘッダー部分で使用します。
使い方はこちら。

index.html
<body>
  <header class="header">
    <h1 class="header__logo">
      SAUNA  
    </h1>
    <nav class="header__menu">
      <ul class="header__list">
        <li class="header__list">
          <a href="#" class="header__link">
            記事一覧
          </a>
        </li>
        <li class="header__list">
          <a href="#" class="header__link">
            ブログ
          </a>
        </li>
      </ul>
    </nav>
  </header> 
</body>

<footer>タグ

<footer>タグは、「著者の情報」や「コピーライト」などを構成するフッター部分で構成します。
使い方はこちら。

index.html
<body>
  <footer>
    <p>著者：サウナ太郎</p>
    <small>© 2022 Sauna Taro</small>
  </footer>
</body>

<nav>タグ

<nav>タグは、ナビゲーションリンクがある場所で用いられます。
例えば、「ヘッダーのメニュー」「パンクズリスト」「目次」などで使用されます。
使い方はこちら。

index.html
<body>
  <header class="header">
    <nav class="header__menu">
      <ul class="header__list">
        <li class="header__list">
          <a href="#" class="header__link">
            記事一覧
          </a>
        </li>
        <li class="header__list">
          <a href="#" class="header__link">
            ブログ
          </a>
        </li>
      </ul>
    </nav>
  </header> 
</body>

注意点が2つあります。

  1. 全てのリンクを<nav>タグの子要素にする必要はない。
  2. <nav>タグは、複数回使用できる。

<figure>タグ

<figure>タグは、自己完結できる場所に使用するタグです。
例えば、図表や写真、イラストなどによく使用されます。
図表などが無くても文章は成り立つが、あると嬉しい補足情報・説明など。
使い方はこちら。

index.html
<body>
  <figure>
    <img src="sauna.png" alt="サウナの画像">
    <figcaption>サウナの画像</figcaption>
  </figure>
</body>

注意点
<figcaption>タグと一緒に使うことが多いです。
上記のコードを見ると、<figure>タグの子要素に、<figcaption>があります。
<figcaption>タグは、図表や写真を説明するタグです。

<figcaption>タグ

<figcaption>タグは、親要素の<figure>タグ内の図表や写真、イラストを説明するタグです。
先ほど少し触れましたので、説明は割愛させて頂きます。

まとめ

ここには、紹介しきれていないタグが沢山あります。
気になる方は、調べてみてください。
又今回の記事を執筆するにあたり、以下のサイトを参考させて頂きました。
丁寧に「セマンティック」について解説されてます。

MDN Web Docs 用語集

https://developer.mozilla.org/ja/docs/Glossary/Semantics

code-kitchen

https://codekitchen.dev/tags/セマンティックHTML/

Discussion