デザイン事業部の長谷です。
いきなりですが、皆さんは、プログラミング界隈で使用される Semantic（セマンティック）という言葉を聞いたことがあるでしょうか？詳しく知っている方もいれば、何それ？という方もいらっしゃると思います。
今回は、主にHTMLにおける、「Semantic（セマンティック）」の意味や実践方法などについてまとめていこうと思います。
1.セマンティックとは
Semantic（セマンティック）とは、「意味の」などを示す英単語です。プログラミング界隈では、単語が持つ意味の通り意味のあるコードを書こうという感じで使われます。
ここで一つの疑問が生まれるかもしれません。
果たして、意味のあるコードとは何か…？という問いです。
様々な意見があると思いますが、よく耳にするのは以下のように「divタグはなるべく使用するな」という考えです。
例えばHTMLコードを書く場合、div要素だけを使用してマークアップを行っても、WEB上にコンテンツは表示されます。しかし、そのようにただdiv要素が乱用されたコードは果たしてセマンティックと呼べるでしょうか？
2.セマンティックなコードを書く利点
前章ではセマンティックHTMLとは何かについてご紹介してきましたが、果たしてセマンティックなコードを書く利点はあるのか？について考えていきます。
結論としては、セマンティックなコードは、それに関わる人やシステムが読みやすく、コードを扱いやすくなるという利点があります。
具体的には主に3つの利点が挙げられると思います。
セマンティックなコードを書く利点
1. 検索エンジンの仕組み上、SEOに良い影響を与える可能性がある
2. 読み上げソフトが、目の不自由なユーザーがページを操作するのを補助するための標識として利用することができる
3. 自他ともに作業者がコードを読みやすくなる為、運用保守をしやすくなる
1〜3すべてに共通するのが、誰かがコードを読む時に良い影響をもたらすということです。
1.の場合は、検索エンジンの仕組みによってセマンティックなコードでサイトが作成されているか否かを判断し、上位にインデックスする可能性があります。
2.の場合は、読み上げソフトがページを操作する際に、セマンティックなコードを利用しやすくなります。すべてdivタグで構成されていた場合は利用しづらいでしょう。
3.の場合は、運用保守する際に意味のあるコードのブロックを見つけやすく、コードを理解しやすくなります。divの中を延々と検索するより明らかに簡単です。
セマンティックな要素名は、開発者に目立たせるべきデータの種類を提案したり、適切なカスタム要素やコンポーネントの名前付けにも役立ちます。
3.実際にセマンティックなHTMLを書いてみる
具体的にセマンティックなHTMLの例を見ていきましょう。セマンティックではないコードとの比較を通して、その違いを実感してみてください。
header
headerとnavを使うことで、ページのヘッダー部分とナビゲーションであることが明確になります。
慣れないうちは、「ヘッダーっぽい場所だからheaderを使おう」「ナビゲーションメニューっぽいからnavを使おう」となんとなく考えながら書いてもいいと思います。
main
main, article, section を使うことで、ページの主要コンテンツ、記事、記事のセクションであることが明確になります。
コンテンツ内の構造を表現する時は、「記事っぽいから article を使おう」「記事の中の段落っぽいから section を使おう」と考えてみると良いかもしれません。
footer
footerを使うことで、ページのフッター部分であることが明確になります。
セマンティックなHTMLを書くことで、コードの意図や構造が読み手に伝わりやすくなります。是非実際のコーディングでも意識してみてください。最初のうちは、「header, main, footerで大まかに分けてみよう」「articleやsectionを意識してみよう」というところから始めるのがおすすめです。
セマンティックなHTMLは一朝一夕では身につかないかもしれませんが、これらのタグを使う習慣をつけることが第一歩になるはずです。
4.セマンティックなHTMLを書くために必要だと思うこと
セマンティックなHTMLを書くために必要なことは、大きく以下の3つかなと考えています。
・HTMLの各要素について学習する
・コードに関わる人について考える
・ひたすらコードレビューしていただく
HTMLの各要素について学習する
セマンティックなHTMLを書くためには、まずはHTML要素の意味や使い方について理解を深める必要があります。各要素がどのような目的で使われるのか、使い分け方を学びましょう。
知っておくと良い要素の例としては、4章で触れたようにheader, nav, main, article, section, aside, footer などがあります。
これらの要素などを適材適所で使うことで、セマンティックなHTMLにしていくことができます。
コードに関わる人について考える
セマンティックなHTMLは、コードを書く本人やSEOの為だけではなく、そのコードに関わる他者の為でもあります。
例えば、共同開発者、レビュアー、アクセシビリティを必要とするユーザーなど、様々な人がHTMLを読んだり利用したりします。もしdivタグだけを使用してマークアップされている場合、セマンティックな場合に比べて、読みづらいように感じます。
自分が書いたコードを、他の人がどのように読み解くか、使うかを考えることが大切です。「他の人が読んでもわかりやすいコード」を心がけましょう。
有識者にコードレビューしていただく
客観的な視点からフィードバックをもらうのは、セマンティックなHTMLを書くために大変有効です。
「ここの要素は適切だろうか」「もっとわかりやすい要素の使い方はないだろうか」といった観点で、レビューしてもらうのがおすすめです。コードレビューを積極的に取り入れることで、セマンティックなHTMLへの理解がより深まっていくはずです。
一人で完璧を目指すよりも、他の人の意見を聞きながら改善していくのが近道だと思います。
気軽にコードレビューを依頼してみましょう。
5.まとめ
セマンティックなHTMLとは、コード自体に意図や構造を持たせることで可読性や保守性を高める手法です。SEO効果の向上、ウェブアクセシビリティのサポート、運用保守のしやすさなどの利点があります。
セマンティックなHTMLを実践するには、HTML要素の学習、コードを読む人への配慮、コードレビューの活用などが重要です。この考え方を持ち続けることが、より良いHTMLコードを書くための第一歩になると思います。
一緒にセマンティックなHTMLを書いていきましょう！
