セマンティックHTML構造のメリットとは？

I.

1. セマンティックタグはあくまでHTMLであり、CSSはセマンティックではありません。HTMLはタグ、CSSは属性です。

2. 文書化されたページの上にあるセマンティックタグの履歴書、ページを文書として扱うこと、DOMのD（ドキュメント）、jsを書くときに使う文書などは、コンピュータがページを文書として扱っていることを明確に伝えており、ページを文書の一種として分類することも可能です。

3. HTMLタグ自体には意味があります。例えば、p--paragraph、li--list、img--imageなどですが、div--divisionのように、divタグの中のコンテンツの特性や表示スタイルを表さない意味不明なものもあります。

4. HTML5では、多くの人の開発習慣やWebサイトのページの一般的な表現に基づき、<header><footer><nav><articleといったセマンティックタグを追加しています。

5. 個人的な理解では、HTMLは属性がきちんと定義されたXMLであり、セマンティックHTMLによってページ構造が明確になり、CSSやJSの記述が少なくなり、SEO的にも有利になると思っています。

II.

また、検索エンジンのクローラーは、マークアップによって文脈や個々のキーワードの重みを判断しています。

検索エンジンのクローラーは、以前はあなたのサイトの訪問者だとは思っていなかったかもしれませんが、今では非常に貴重なユーザーです。クローラーがいなければ、検索エンジンはあなたのサイトをインデックスすることができず、一般ユーザーがサイトを訪問することは非常に難しくなります。

6. クローラーは、体裁を整えるためのマークアップはほとんど無視し、セマンティックなマークアップを重視するため、クローラーにとってわかりやすいページであることが重要です。

したがって、ページファイルのタイトルが代わりにマークアップされている場合、そのページはおそらく検索結果のさらに下位に表示されるでしょう。

以上、セマンティックHTML構造の利点が実際にどのようなものであるかについて、お伝えしました。