HTMLにおけるセマンティクスとは、タグを使い分けることでそのコンテンツが「何であるか」を適切に表すことを言います。
例えば要素が「見出し」の意味を持つならばh1〜h6タグを使い、「ナビゲーション」の意味を持つならばnavタグを使うことが適切です。
セマンティックなHTMLを構築することで、機械にとっても人にとっても理解しやすいコードになり以下のようなメリットを生み出します。
- 検索エンジンがページの内容をより理解しやすくなり、SEOで有利になりやすい
- 読み上げソフトなどがタグを目印にすることで内容を適切に読み上げやすくなり、アクセシビリティにおいて有利になる
- コードの可読性が上がる
そんなセマンティクスを学べる記事をまとめました。
URL：https://devlog.atlas.jp/2017/10/30/1662
なぜセマンティックタグが必要なのか、分かりやすくまとまっています。セマンティックタグをあまり知らないという方は、最初に読んでみましょう。
難易度：★☆☆
URL：https://code-kitchen.dev/tags/%E3%82%BB%E3%83%9E%E3%83%B3%E3%83%86%E3%82%A3%E3%83%83%E3%82%AFHTML/
図などを用いてタグ個別に解説されています。セマンティクスの基本的な概念を理解した人はこちらで深めていくと良いでしょう。
難易度：★★☆
URL：https://developer.mozilla.org/ja/docs/Glossary/Semantics
一次情報であるため少々難しいですが、関連記事にあるタグ個別の記事を含めると非常に網羅的な内容となっています。セマンティクスについて徹底的に知りたい場合はここで学ぶと良いでしょう。
難易度：★★★