Semantics (セマンティクス)

JavaScript でのセマンティクス

JavaScript において、文字列の引数を取り、その文字列を textContent とする <li> 要素を返す関数を想像してみてください。何をするのかを理解するためにコードを見る必要があるのは、関数名が build('Peach') と createLiWithContent('Peach') のどちらの場合でしょうか。

CSS でのセマンティクス

CSS において、さまざまな種類の果物を表すために li 要素でリストをスタイル付けすることを想像してみてください。 div > ul > li または .fruits__item で選択された DOM の一部が何であるか分かるのはどちらでしょうか。

HTML でのセマンティクス

たとえば、h1 要素はセマンティック要素で、「ページの最上位の見出し」の役割 (または意味) をまとったテキストを提供します。

<h1>これは最上位の見出しです</h1>

デフォルトで、ほとんどのブラウザーのユーザーエージェントスタイルシートは、h1 に対して大きなフォントサイズを適用し、見出しのように見えるようにします（とはいえ、お好みで自由にスタイル設定を変更することも可能ですが）。

一方、どの要素も最上位の見出しのように見せることができます。次ののことを想像してみてください。

<span style="font-size: 32px; margin: 21px 0;"
  >これは最上位の見出しですか？</span
>

これは最上位の見出しのように表示されますが、セマンティックな意義はありませんので、上記のように特別なメリットはありません。したがって、HTML 要素を適材適所に使用することをお勧めします。

HTML はデフォルトの表示スタイルに基づくのではなく、入力される「データ」を表現するためにコーディングするべきです。プレゼンテーション (どのように見えるか) は、完全に CSS の責任です。

セマンティックなマークアップを書くことの利点の中には、次のようなものがあります。

• 検索エンジンが内容を重要なキーワードとして理解し、ページの検索ランキングを上げる (SEO を参照)
• スクリーンリーダーが、目の不自由なユーザーがページを操作するのを補助するための標識として利用することができる
• 意味のあるコードのブロックを見つけることは、セマンティックまたは名前空間のついたクラスがあるにしろないにしろ、延々と div の中を検索するより明らかに簡単である
• 開発者に目立たせるデータの種類を提案することができる
• セマンティックな名前は、正しいカスタム要素やコンポーネントの名前を反映する

どのマークアップを使用するか迷ったときは、自分自身に「どの要素が掲載しようとしているデータを最もよく説明または表現しているか」と自問してみてください。例えば、これはデータのリストか？順序付きか順序なしか？これは節と関連情報の補足から成る記事か？定義の一覧になっているか？キャプションを必要としている図または画像か？サイト内でグローバルのヘッダーおよびフッターに加えてヘッダーやフッターを持つべきか？などです。

セマンティック要素

これらは、およそ 100 ある利用可能なセマンティック要素の一部です。

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <form>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

関連情報

• HTML 要素リファレンス - MDN
• HTML のセクションとアウトラインの使用 - MDN
• コンピュータ科学におけるセマンティクスの意味 - ウィキペディア
• 関連用語:
  • SEO