Zenn
💭

HTMLのセマンティック要素について

2024/08/16に公開
HTML
tech

はじめに

アプリやWebサイトを作る際、まずHTMLでページの骨組みを作成して、そこにCSSやJavascriptなどを使って動きをつけていくことが一般的かと思います。
要素をブロック毎に区切って配置する際に、divではなく、なるべくセマンティック要素でHTMLを作った方が良い、ということについて学んだのでメモしておきます。

セマンティック要素とは？

  • divタグと同様、要素をブロック単位で区切るもの
  • それぞれに対して意味を持たせることができる（例えば divが無色透明の箱とすると、セマンティック要素はラベル付きの箱のようなイメージ）

主なセマンティック要素

  • <header>: ページや節の導入部分。サイトタイトルなど
  • <nav>: ナビゲーションリンクのセット。メインメニューやサイトマップなど
  • <main>: ページの主要コンテンツ。ページごとに一つだけ使用する
  • <article>: 独立して再利用ができるコンテンツ。ブログ記事や新聞記事など
  • <section>: 関連するコンテンツをグループ化する際に使用する。見出し（<h1>〜<h6>）を含むことが多い
  • <aside>: メインコンテンツに間接的に関連する補足情報。サイドバーやコールアウトボックスなど
  • <footer>: ページや節の終わりの部分。著作権情報や関連リンクなど

セマンティック要素があると何が良いのか？

  • HTMLの構造に意味を持たせることができるため、コードの可読性や保守性が上がる
  • スクリーンリーダーに対応でき、アクセシビリティフレンドリーなページにできる
  • 検索エンジンの理解の向上（SEO対策）
  • 異なるデバイスやプラットフォームでのコンテンツの一貫した表示と解釈が可能になる

実際に比較してみます

divタグのみで作ったHTML

import React from "react";

function WriteBlogPage() {
  return (
    <div className="page-container">
      <div className="header">
        <div className="navigation">ナビゲーションバー</div>
      </div>
      <div className="main-content">
        <div className="page-title">ブログ作成</div>
        <div className="content-wrapper">
          <div className="sidebar">サイドバー</div>
          <div className="blog-editor">
            <div className="title-input">タイトル</div>
            <div className="upload-area">アップロードエリア</div>
            <div className="content-input">本文</div>
          </div>
        </div>
      </div>
      <div className="footer">フッター</div>
    </div>
  );
}

export default WriteBlogPage;

セマンティック要素を使って作ったHTML

import React from "react";

function WriteBlogPage() {
  return (
    <div className="page-container">
      <header>
        <nav>ナビゲーションバー</nav>
      </header>
      <main>
        <h1>ブログ作成</h1>
        <div className="content-wrapper">
          <aside>サイドバー</aside>
          <section className="blog-editor">
            <div className="title-input">タイトル</div>
            <div className="upload-area">アップロードエリア</div>
            <div className="content-input">本文</div>
          </section>
        </div>
      </main>
    </div>
  );
}

export default WriteBlogPage;

まとめ

セマンティック要素を使うことには様々なメリットがることを改めて理解できました。自分でWebページを作る際にも、divタグよりもセマンティック要素を使った方が構造を整理しやすく、意味のある構造を作れるため、積極的に使っていきたいと思います。

Discussion