HTML5のアウトラインとsection/articleの取扱い

xhtml1.0ではかなり構造化を意識した記述がデフォルトになりましたが、セマンティックといういみでは、まだまだdivとpタグ、リストタグが多用されるだけで、厳密にはソースコードの構造からは文章構造を読み取ることができませんでした。

HTML5になり、文章構造を明確にするタグが数多く採用されており、実質的にサイトの構造を明確に構造化して、タグ自体がどのような意味をもつか、いわゆるセマンティックにWebページを分析することができるようになります。

ただし、そもそもセマンティック化されたとしても、構造化する必要がないサイト構成や閲覧者にとっては実はどうでもよい事なのです。
だからあまり神経質になりたくもないものですが、物事を複雑化することが好きな人たちが必ずいるので、HTML5のアウトラインについては、少々しっかり抑えておいたほうがよいでしょう。
ちなみにアウトラインのためのsectionタグやタグ構造のくくり的な意味合いを持たせるarticleタグについても、
どちらも必須であるわけではなく、なくても表示に問題はないし閲覧者にデメリットがあるわけでもありません。

さて、アウトラインとは、Webページの構造のことで、HTML5では、意味を持ったタグが多数存在するため、HTMLマークアップの上ではおおまかに理解しておく必要があります。

HTML5のアウトラインについては、まずsectionタグが必ずでてきます。

『Hタグ段落を内容ごとの区切り線タグ』

が最適な言い回しではないかと。

HTML5アウトラインの正誤や概念をわかりやすくするには、HTML5 Outlinerがよいかな。

https://gsnedders.html5.org/outliner/

そしてarticleだが、こちらはsectionが段落構造を括るとするならば、ソースコードベースで段落をくくるタグと考えるとよい。

タグで囲まれたソースコードの内容で、独立したページや記事が成立する構成。

『タグ記述単位で成立する内容ごとの区切り線』

ぐらいが最適ではないかと。

かなり大雑把にいうと、HTML5アウトライン化はsectionタグでHタグの段落ごとに区切り、articleタグはタグ構造で成立するソースコードごとに区切る。

そして、これらのタグはあらためて必ず使用する必要はなく、閲覧者にとってはほとんど関係ないタグだけれでも、Webページを構造化してセマンティック化し、理解を深めるには有効な記述というぐらいに捉えておく。

そして将来的にはタグの仕様がかわったりなくなってしまったりする可能性もある。