セマンティックHTML逆引き辞典

はじめに

この記事ではセマンティックHTMLのタグをユースケースから逆引きできるようにしています
簡単な解説に併せてMDN Web Docsのリンクを貼っていますので，サンプルコード等はそちらをご覧ください

セマンティックHTMLについての説明はこちら

Semantics(セマンティクス)とは

セマンティックとは、意味の、語義の、意味論の、などの意味を持つ英単語。形式や構造と対比して、人間にとっての意味を指し表す際に用いられる用語。

IT用語辞典 e-Wordより引用

言語そのものの意味だと上記のようになります．
HTMLに限定するとWebページの構造を明確にし，コンテンツの意味を理解しやすくするために使用される書き方です．

メリット

では，セマンティックHTMLを使用することに何のメリットがあるでしょうか？
一般的には主に以下のメリットが挙げられます

1. SEO対策

   • Webページの構造を理解しやすくすることにより，検索エンジンに重要なキーワードを認識させ適切に検索にヒットするようにできる
   • セマンティックHTMLのタグはページ内の特定の部分が何を表しているか検索エンジンに伝えることができるため，関連性の高いキーワードやフレーズが適切にインデックスされる
   • 構造化されたデータを使用することにより，検索エンジンがリッチスニペットを生成しやすくなる．これにより，検索結果での目立ちやすさとクリック率が向上させられる

2. アクセシビリティの向上

   • スクリーンリーダーによるページ内容の正確な読み上げをサポートするため，目の不自由なユーザーでも使いやすくなる
   • キーボードナビゲーションを含むウェブアクセシビリティを向上させるため，ユーザーはページの異なるセクションを容易に見つけることができる
   • 異なるデバイスやブラウザでの一貫したアクセスができるようになり，幅広いユーザーにウェブコンテンツを提供することができる

3. DX(開発者体験)の向上

   • セマンティックHTMLは，コードの目的や構造を明確にするため，他の開発者がコードを理解しやすくなり，チームワークとメンテナンスが容易になる
   • セマンティックな構造を持つコードは,再利用しやすくなり，開発時間の短縮と効率性の向上が期待できる
   • クリーンで整理されたセマンティックHTMLは，デバッグとメンテナンスを簡単にし，問題発生時に原因を特定しやすくなる

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

逆引き辞典

目次

• メインコンテンツを示したい場合
• ヘッダー部分を示したい場合
• フッター部分を示したい場合
• ナビゲーションリンクを示したい場合
• 独立した記事を示したい場合
• 関連するセクションを示したい場合
• サイドコンテンツを示したい場合
• 見出しを示したい場合
• 引用を示したい場合
• 短い引用を示したい場合
• 著者情報を示したい場合
• 強調したいテキスト
• 重要でない内容を示したい場合
• コードを示したい場合
• サンプル出力を示したい場合
• キーボード入力を示したい場合
• 変数を示したい場合
• 修正された内容を示したい場合
• 削除された内容を示したい場合
• 定義リストを作成したい場合
• 図表を示したい場合
• 詳細情報を提供したい場合
• データの意味を示したい場合
• 進行状況を示したい場合
• メートル法の数値を示したい場合
• 時間を示したい場合
• 定義済みの語句を示したい場合
• 上付き文字を示したい場合
• 下付き文字を示したい場合

メインコンテンツを示したい場合

<main>
ページのメインとなるコンテンツを囲むために使用します．
メインとなるコンテンツには，文書の中心的なトピックやアプリケーションの中心的な機能に直接関連するコンテンツが該当します．
※hidden属性が指定されていない<main>要素を2つ以上置くことはできません．

ヘッダー部分を示したい場合

<header>
ページまたはセクションのトップにあるヘッダー部分，例えばロゴやナビゲーションバーを囲むために使用します．
<header>要素はグローバルなサイトヘッダーを定義することができ，アクセシビリティツリーではbannerとして記述されます.

フッター部分を示したい場合

<footer>
ページの下部にあるフッター部分，例えば著作権情報や連絡先情報を囲むために使用します．
※Safari 13のリリース以前の古いSafariブラウザに対応する必要がある場合はrole="contentinfo"を footer要素を追加しないとcontentinfoのランドマークが適切に表示されないので注意が必要です

ナビゲーションリンクを示したい場合

<nav>
ページ内またはサイト内のナビゲーションリンクを囲むために使用します．
すべてのリンクを<nav>要素に入れる必要はありません．ナビゲーションの主要なブロックのみに用います．
<nav>要素を文書内に複数作成する場合，アクセシビリティを強化するために，aria-labelledbyを使用することができます．

独立した記事を示したい場合

<article>
ブログの投稿やニュース記事のよう，独立して完結したコンテンツを示すために使用します．
個別に配信や再利用を行うことを意図した構成物に使われます．
※それぞれの<article>は,子要素として見出しを含むなどの方法で識別できるようにするべきです．

関連するセクションを示したい場合

<section>
関連するコンテンツをグループ化するために使用します．例えば，ページ内の特定のトピックに関するセクションを囲むのに使います．
一般に<section>には見出しをおきます．
※スタイル付けのラッパーとして使う場合は<div>を用いてください．<section>は文書のアウトラインの中に論理的に現れるべきです．

サイドコンテンツを示したい場合

<aside>
メインコンテンツからは独立したサイドバー，広告，コールアウトボックスを示すために使用します．

見出しを示したい場合

<hx>(xは1~6)
お馴染みのやつです．
番号の小さい順に重要度が高いです．
※<h1>から始め数字を欠かすことなくを順番に使います．

引用を示したい場合

<blockquote>
他のソースからの長い引用を示すために使用します．

短い引用を示したい場合

<q>
文中での短い引用を示すために使用します．

著者情報を示したい場合

<address>
著者や連絡先情報を示すために使用します．

強調したいテキスト

<strong>
特に重要なテキストを強調するために使用します．

重要でない内容を示したい場合

<small>
細かい印刷物や脚注など，重要でない情報を示すために使用します．

コードを示したい場合

<code>
コンピューターコードの一部を示すために使用します．

サンプル出力を示したい場合

<samp>
コンピュータープログラムのサンプル出力を示すために使用します．

キーボード入力を示したい場合

<kbd>
キーボード入力やコマンドを示すために使用します．

変数を示したい場合

<var>
数学的な式やプログラミングコード内の変数を示すために使用します．

修正された内容を示したい場合

<ins>
文書内で追加または挿入されたテキストを示すために使用します．

削除された内容を示したい場合

<del>
文書から削除されたテキストを示すために使用します．

定義リストを作成したい場合

<dl>，<dt>，<dd>
用語（<dt>）とその定義（<dd>）を含むリスト（<dl>）を作成するために使用します．

図表を示したい場合

<figure>
キャプション付きの場合<figcaption>
図や写真，コードリストなどを示すためのコンテナ（<figure>）と，それにキャプションを付けるために使用します．

詳細情報を提供したい場合

<details>
要約を示したい場合<summary>
詳細情報のためのコンテナ（<details>）と，その要約や見出し（<summary>）を示すために使用します．

データの意味を示したい場合

<data>
機械可読な形式のデータとその意味を示すために使用します．

進行状況を示したい場合

<progress>
タスクの完了状況を示すために使用します．

メートル法の数値を示したい場合

<meter>
既知の範囲内の数値（例：バッテリーレベル，スキルレベル）を示すために使用します．

時間を示したい場合

<time>
日付や時刻を示すために使用します．

定義済みの語句を示したい場合

<dfn>
その場で定義される語句を示すために使用します．

上付き文字を示したい場合

<sup>
上付き文字（例：数学的指数）を示すために使用します．

下付き文字を示したい場合

<sub>
下付き文字（例：脚注番号）を示すために使用します．