セマンティックコーディングとは？概要、やる意義や実装方法を紹介します
あなたは、セマンティックコーディングについて興味があるけどどうすれば良いのかわからない、と思ったことはありませんか？
この記事では、以下をお伝えします。
- セマンティックコーディングの概要
- セマンティックコーディングをする意義
- セマンティックコーディングのやり方
目次
セマンティックコーディングとは、「意味のある」コードを書くこと
セマンティック（semantic）とは「意味の」や「意味のある」といった意味を持つ単語です。つまりセマンティックコーディングとは、意味が正しく伝わるようにコードを書く、ということです。
では意味が正しく伝わるコードとはどういったものでしょうか。以下のコードをご覧ください。
“`HTML
<h2>見出し1</h2>
<p>テキストテキスト</p>
<h2>見出し2</h2>
<p>テキストテキスト</p>
“`
h2要素は、見出しの意味を持った要素の一つです。見出しをh2要素で実装することで、「これが見出しである」と明確に表現できます。そしてこれこそが、セマンティックコーディングをやる意義です。
セマンティックコーディングをやる意義
セマンティックコーディングをやる意義としては、以下のようなものがあります。
- 検索エンジンがWebサイトの構造を理解しやすくなる
- アクセシビリティが向上する
- コーダーがHTMLの構造を理解しやすくなる
それぞれ解説します。
検索エンジンがWebサイトの構造を理解しやすくなる
セマンティックコーディングによって、検索エンジンがWebサイトの構造を理解しやすくなります。先ほどの例で言うと、h2要素などの見出しによって記事の構成を理解できるのです。
アクセシビリティが向上する
セマンティックコーディングは、アクセシビリティの導入にも役立ちます。例えば見出しの例で言うと、スクリーンリーダー（音声読み上げツール）で見出しを選択し、目的の箇所に移動することができます。
コーダーがHTMLの構造を理解しやすくなる
セマンティックコーディングは、作業中や保守・運用でコードを修正するときにも役に立ちます。仮定の話ですが、body要素、header要素やfooter要素で書かれたHTMLと全てがdiv要素やspan要素で作成されたHTML、どちらが構造を理解しやすいかは言うまでもありません。
セマンティックコーディングによって、他のコーダーから見ても理解しやすいコードを書くことができます。
セマンティックコーディングのやり方
ここでは、セマンティックコーディングのやり方を以下の順番でご紹介します。
- 基本的なHTML要素の意味を知る
- デザインを分割する
- デザインとHTML要素を適切に結びつける
- HTMLの構造に問題がないか、確認する
- CSSを実装する
- 改めて、HTMLの構造に問題がないか、確認する
各HTML要素の意味を知る
まず具体的なデザインを見る前に、HTML要素それぞれの意味を把握する必要があります。基本的に、HTML要素はそれぞれ固有の意味を持っているためです。ただし、divとspanは特定の意味を持ちません。
基本的なHTML要素としては、例えば以下のようなものがあります。
- header
- main
- footer
- h1~h6
HTML要素自体は100種類以上あります。まずはよく使うものからそれぞれの役割を理解するのがよいでしょう。
ページのデザインを分割する
ここではページのデザインをヘッダー、フッターやメインコンテンツなどの大きな単位から、見出しやボタンなど小さな単位にまで分割します。
HTML要素とデザインを結びつける
分割したデザインに対して、適切なHTML要素を当てていきます。各デザインの意味や役割を把握し、それぞれに対応したHTML要素をあてはめるのが良いでしょう。
注意したいのが、単なる装飾のためにHTML要素を使わない、という点です。悪い例として、単なる太字に対してb要素やstrong要素を使う場合が挙げられます。それぞれ、b要素にはキーワード、strong要素には警告や注意といった意味があります。そういった意味を持たない太字に対してb要素やstrong要素を使うのは適切ではありません。代わりに、CSSのfont-weightで太さを変えるのがおすすめです。
HTMLはあくまで意味を伝えるものであり、装飾はCSSで実装する意識を持つとよいでしょう。
HTMLの構造に問題がないか、確認する
一通り、あるいはセクションごとなど区切りのいいところまでHTMLを書いたら、問題がないか確認します。
例えばHTML要素の中には、特定の親や子を必要としたり、逆に特定の要素を親や子として持てない要素があります。CSSを実装する前にHTMLの構造を確認することで、手戻りを減らせます。
CSSを実装する
意味に基づいてHTMLを書いたら、CSSを実装します。このとき、デザインの見た目を再現するためにHTML要素を追加する必要がある場合は、span要素やdiv要素など特定の意味を持たない要素を使うとよいでしょう。
改めて、HTMLの構造に問題がないか、確認する
一通り、あるいはセクションごとなど区切りのいいところまでHTML・CSSを書いたら、改めて確認します。CSS実装に伴うHTMLの変更で、新たに間違いが生まれる可能性があるためです。
まとめ：意味が正確に伝わるようなHTMLを書こう
この記事では、セマンティックコーディングについて概要、やる意義ややり方をご紹介しました。HTMLに対する知見を深めて、意味がより正確に伝わるようなコードを書きましょう。
