HTML5のセクショニング・コンテンツの存在意義

Question

HTML5では、セクショニングコンテンツと呼ばれる＜article＞や,<nav>といった要素があり、見出しやフッターの範囲を定義すると学びました。

そこで質問なのですが、これらのセクショニングコンテンツというのは、コードから外観をわかりやすくするものと捉えて大丈夫でしょうか？

いまいち何のために存在しているのか掴めません。

「セクショニング・コンテンツの代わりに<div>で区切っても挙動って変わらなくない？！」

と思っています。

Comments

[miyabi_pudding]

teratailにおいても結構な数既出の内容ですが、検索はかけてみましたか？
または、自身で調査はされましたか？

[m.ts10806]

そういえば「全部divでも問題ないよね」みたいな質問ありましたね。割と最近。

[miyabi_pudding]

そうなんです。
して、私もその質問に回答した記憶がありましてw

Answer 1

質問文を読む限り、外見を整えることにしか意識が行っていないようですが、それじゃダメなんです。

webページを読むのは人間だけではありません。また人間であっても一般的なブラウザではなく読み上げソフトを介して読んでいる人も居ます。それらをも考慮した高度な情報交換を実現するにはコンテンツに「機械可読性」をもたせる必要があり、テキストの部分部分がコンテンツの中でどのような役割を持つのかを明示する必要があります。

「セマンティックス」を勉強してみましょう。

セマンティックなマークアップをするメリット（WebアクセシビリティPart2） | 株式会社グランフェアズ

Answer 2

コードから外観をわかりやすくするものと捉えて大丈夫でしょうか？

違います。
おっしゃる通り、見た目だけの調整であれば、全部divで事足ります。

HTML のセクションとアウトラインの使用 - 開発者ガイド | MDN

を見ていただければわかりますが、
sectionやarticleなどのセクショニング要素を始め、
pや、strongなどは、
その要素ごとに、意味と仕様が定められています。

特に、セクショニング要素は、
HTMLの文章構造を明確にすることができるため、
ロボットなどに対して、そのWebページにどんな内容が記載されているかを、
より具体的に、構造的に、正確に伝えることが可能になります。

HTML5以前は、文章構造（アウトライン）を示すのには、h1〜h2を使うしかありませんでした。
ですが、それだとレイアウトとアウトラインを両方担保することが難しい、などがありました。

なので、HTML5からの、
セクショニング要素の登場と、
今まで存在していた意味付け要素の再定義は、
とても画期的なものです。

SEO面に関して

ロボットに正確に内容を伝える、ということは、SEOの面でもとても有効になります。
検索エンジンは、よりよい検索UXを提供することを目指しています。
それは、大前提に、ユーザーが知りたいことが、すぐにヒットすることがあります。
内容を正確に伝えているWebページの方が、マッチした検索ワードに対して、検索順位が上がることは自明の理となります。
つまり、divしか使っていないWebページは、sectionなどを適切に使っているWebページに対してSEOの面で非常に不利となります。

以上が、セクショニング要素などを使っていく大きな理由となります。