HTML を学び始めた初心者から、HTML4 時代から知識をアップデートしようとした古参まで、最新の HTML を学ぶと出くわすのが、article 要素と section 要素はどのように使い分けるのか？という疑問でしょう。
このネタは、ネットで数えきれないほどのウェブ技術系ブログの記事で取り上げられています。しかし、それらを読んでスッキリした人は少ないのではないでしょうか。そこで多分に漏れず当ブログでもチャレンジしてみたいと思います。
多くのブログで語られていること
筆者も article 要素と section 要素の違いに関する数多くのブログ記事を読んでみました。もちろん、どの記事も間違ったことは書かれておらず、簡潔で分かりやすい記事ばかりでした。おおむね、article 要素に関して書かれていることは、大まかに言って次の二つではないでしょうか。
- ブログ記事やニュース記事に使う
- 独立した再利用可能なコンテンツに使う
多くのブログ記事では、2 つ目の説明に関しては多くは語られておらず、例を見るとブログ記事のマークアップ例ばかりが紹介されています。2 つ目の説明が何を意味しているのかが分かりずらく、結局のところ 1 つ目の説明しか消化できないのではないかと察します。
article 要素はブログ記事かニュース記事以外に使い道はないと感じている人も多いのではないでしょうか。実は筆者も、現実的には、あながちそれで間違ってはいないと思いますが、前述の 2 つ目の説明の理解がもう少し深まれば、スッキリするのではないでしょうか。
WHATWG HTML 仕様では「あなた次第」
実は WHATWG HTML 仕様には「Article or section?」という節がわざわざ設けられています。やはり世界中の関係者が同じ疑問を持ったのでしょうね。ではそこにはなんて書かれているのでしょうか。
実は「あなた次第」と書かれています。正確に言うと「製作者の意図次第」と書かれています。そ、そんな… と思いますよね。
そこでは、とある書籍の一節が例として挙げられています。しして、そのコンテンツを全体の一部として使っているなら section 要素でしょうし、Twitter のツイートやTumblr の投稿なら article 要素でしょうと。
ここで書かれていることは、同じコンテンツでも使い方によって article 要素なのか section 要素なのかが変わってくるという点を説明しているだけです。たぶん、ほとんどの方はそれくらいは最初から理解できているのではないでしょうか。どこに article 要素を使っても良いのか、という最初の疑問の回答になってないですよね。
ゆえに、「Article or section?」という節が仕様に書かれているにもかかわらず、いまだに世界中で article vs section というネタが数多く量産されているのでしょうね。
article 要素の規定
ともあれ、まずは WAHTWG HTML 仕様で article 要素がどのように規定されているのかを見てみましょう（日本語訳は筆者）。
The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable,
article 要素は、文書、ページ、アプリケーション、サイトなどの中で、完全または自己完結した部分を表し、原則として、独立して配布可能または再利用可能なものです。
The article element – WHATWG HTML
仕様なのでとても抽象的な規定です。おかげで、かえって分からなくなりそうですね。ただ、article 要素の定義として「記事」だと言っているわけではないのですね。
ポイントは、article 要素とは、自己完結したコンテンツであり、かつ、それ単独で配布したり再利用したりすることができる、という点です。仕様では、article 要素の利用場所として、掲示板の投稿、雑誌や新聞の記事、ブログエントリー、コメント、ウィジットやガジェットなどを挙げています。
完全や自己完結とはどういう意味？
完全または自己完結した部分というのは、逆説的ですが、何かの一部ではないということです。
たとえば、このブログ記事の中の、この「完全や自己完結とはどういう意味？」というこのセクションは、このブログ記事の一部でしかなく、この部分だけ取り出して読んだとしても意味を成しません。このブログ記事全体で、一つのコンテンツとして成り立ちます。
つまり、このブログ記事全体は article 要素にふさわしいのですが、この 「完全や自己完結とはどういう意味？」というセクション単独では article 要素にはなりえない、ということですね。
配布可能や再利用可能とはどういう意味？
配布可能や再利用可能は、前述の完全や自己完結と密接にかかわっています。配布可能なコンテンツや再利用可能なコンテンツとは、その部分だけを取り出したとしても、意味を成すコンテンツということです。そのようなコンテンツは結果的に完全または自己完結したコンテンツになりますね。
ちょっと言葉は悪いですが、パクリサイトってありますよね。もしとあるコンテンツが一字一句違わずにパクられたとしましょう。その 一字一句違わずにパクられた、または、パクる価値があるコンテンツというのは、article 要素にふさわしいのではないでしょうか。そう考えると、article 要素の用途も分かりやすくなるのではないでしょうか。
記事のコメントも article 要素？
WAHTWG HTML 仕様では、記事に投稿されたコメントも article 要素が使えると書かれています。具体的には、記事が書かれた article 要素の中で使うことになっています。こんな感じすね。
<article>
<h1>記事のタイトル</h1>
<p>記事本文…</p>
<section>
<h2>コメント</h2>
<article>
<footer>
<p>投稿者：通りすがり 2021/10/20 19:03:40</p>
</footer>
<p>コメント本文…</p>
</article>
</section>
</article>
これまでの article 要素の規定から考えると、違和感を感じないでしょうか。なぜなら、このコメント単独では自己完結しないし、再利用可能とも思えないですよね。これを府に落とそうとすると、筆者は 2 つの考え方があると思っています。
一つ目は、これはあくまでも例外規定であると解釈する方法です。article 要素の中の article 要素の場合にコメントとして扱えるわけですから、これは、その状況下における特例みたいな感じでしょうか。
二つ目は、このコメントそのものを自己完結しており再利用可能とみなす方法です。実は、こちらのほうが腑に落ちると思います。
例えば、このブログ記事を読んだ感想を、このブログにコメントとして投稿するのではなく、Twitter でツイートすることも考えられます。もちろんツイートする際には、コメント本文に加えて、このブログ記事の URL を貼り付けるでしょうし、ハッシュタグも付け加えるでしょう。そのため、純粋にコメント本文だけということにはなりませんが、コメントというコンテンツも再利用可能という証左ではないでしょうか。
余談：なぜ footer 要素が本文より前にある？
前述のブログ記事のコメントのマークアップ例は、WHATWG HTML 仕様に書かれた例をアレンジしたものです。仕様でも footer 要素が本文より上にマークアップされています。
一般的に header 要素は本文より前に、footer 要素は本文より後にマークアップしますので、前述のマークアップを見て違和感を感じますよね。実は WHATWG HTML 仕様では、この場合は header 要素でも間違いではない言っています。言い換えると、header 要素と footer 要素のどちらを使っても良い、ということですね。
記事コメントの場合、見出しが存在しない場合があります。見出しが存在しないのに header 要素を使うのは違和感を感じますよね。そのため footer 要素を使う方がスッキリすると感じる人もいるのではないでしょうか。しかし内容から考えて本文より前に置きたいと思う場合があります。まさに投稿者や投稿日時といった情報が当てはまりますね。そのため、footer 要素を使って本文より前にマークアップした例が作られたと、筆者は感じました。
footer 要素は最後である必要はない、という点は意外に感じますね。
まとめ
article 要素とはいったい何なのかについて、筆者なりに解説してみましたが、いかがでしたでしょうか。
これでもまだ article 要素か section 要素かで迷う状況に出くわしたなら、個人的には section 要素を使うことをお勧めします。section 要素はベストではないかもしれませんが、恐らくほとんどのシーンで間違いになることはないでしょう。しかし、article 要素は間違って使うことができてしまいます。間違って使われる方が弊害が大きいですからね。
今回は以上で終わりです。最後まで読んでくださりありがとうございました。それでは次回の記事までごきげんよう。
