セマンティックコーディングを意識付けよう
2024年10月09日(水)セマンティック（セマンティクス）は「意味的な」などと訳される形容詞で、セマンティックコーディング（または、セマンティックHTML）とは、HTMLタグが持つ意味と役割を正しく使ってマークアップするという考え方です。
セマンティックコーディングでは、例えば見出しタグは装飾目的で使うのではなく、見出しタグが持つ本来の意味である「文章構造の最適化」のために使います。
セマンティックコーディングを施すことで「検索エンジン最適化」「アクセシビリティ向上」「ソースコードの可読性向上」などのメリットがあります。
・<header>
・<footer>
・<section>
・<main>
・<nav>
・<article>
・<aside>
・<figure>
・<figcaption>
①<section>タグ
<section>タグは一般的なセクションをあらわす要素です。
他の３つのセクション要素は特定の場所で使い、それらに該当しない時にセクションを作りたい時に使用します。
ある一つのブロックを作ると思ってもらってOKです。
例えばLP（一枚ページ）だと一番上のファーストビューを一つのセクション（ブロック）、コンセプトをもう一つのセクション（ブロック）と区切ると言うことです。
このブログで使うなら下図の緑枠ようなところに使います。（※上記のコードは下の画像のレイアウトを表したものではございません）
②<article>タグ
airticleは日本語で「記事」の意味します。
<article>タグはブログなどの記事はじめとする「それだけで完結している」セクションをあらわす時に使います。
逆に何か一部のセクションをマークアップする場合には使用できません。
<section>タグと<article>タグの使い分けは、ひとつのコンテンツの全体を表しているのであれば<article>タグ、全体の中の一部であれば<section>タグを使います。
③<aside>タグ
<aside>タグは、何かのセクションの中に存在することがほとんどです。
そして<aside>タグの中身は元々のセクションの内容とは関係が薄く、別扱いにしたほうが良さそうなセクションです。
例えば広告や補足記事の塊です。
④<nav>タグ
<nav>タグはページ内のナビゲーションリンクを含むセクションをあらわす時に使用します。
あまり知られていませんが、このタグは視覚障がいの方がページを音声で読み上げるツールを利用することも考慮して用意されたものでもあるので、主要なナビゲーションにだけ使うことが想定されています。
稀にページ内に<nav>タグが多くあると音声読み上げツールがうまく動作がしないことがあるようです。
<nav>はヘッダーにつけてフッターのナビゲーションはリストで記述するのが良さそうです。
セクショニングコンテンツとは別でページの骨格をつくる3つのタグを詳しく解説します。
⑤<header>タグ
<header>タグは最も近いセクションのヘッダーであることをあらわします。
例えば<body>タグの直後に設置されていたらページ全体のヘッダーとなります。
一般的に<header>タグの中には見出し・ナビゲーション・ロゴ・検索フォーム・目次などが含まれます。
⑥<footer>タグ
<footer>タグは最も近いセクションのフッターであることをあらわします。
例えば<body>タグの直後に設置されていたらページ全体のフッターとなります。
一般的に<footer>タグの中には著作権情報・問い合わせ先などが含まれます。
⑦<main>タグ
<main>タグはその範囲がページ全体のメインコンテンツであることをあらわします。
したがって<main>タグは各ページに一つだけになります。
<main>タグはこれまでに紹介してきた<article><aside><nav><header><footer>の中には入れてはいけません。
基本的には下記のような構造になります。
⑧<figure>タグ
<figure>タグはメインコンテンツの本文から参照される図版のようなコンテンツであることをあらわします。
具体的には、図表・写真・イラストなどで、それ自信がまとまった一つの完結した内容となっているコンテンツを入れます。
⑨<figcaption>タグ
<figcaption>タグは<figure>タグとセット使われることが多く、図のキャプションや説明文を記述するときに使われます。
必須というわけではないです。