こんにちは！すべてがdivになるMizutani(@sirycity)です。div病って言葉もあるみたいですね。

今日はそんなHTMLタグの<article>と<section>について超分かりやすく説明します(謎のハードル上げ)

結論

<article>と<section>で迷った場合はこんな感じで決めよう！

• まずは迷ってる部分を何も考えず<article>にします。
• 次に<article>から</article>までの中身を全部切り取ります。
• その切り取った中身を見ます。文章はありますか？
• 文章がなければsectionです。おわり。
• 文章があった場合、その文章全部が新聞に載っていると想像して下さい。
• 違和感がなければarticleです。おわり。
• 違和感があればsectionです。おわり。

はじめに

HTML5になってから新しく色々なHTMLタグが増えました。今回のテーマのarticleとsectionもそのうちの1つです。

この2つはどういう所で使うかというと…こんな感じです。

article

訳:文書、ページ、アプリ、サイト内の完全な、あるいは自己完結型の構成を表します

原文: 4.3.2 The article element

section

訳:文書やアプリの一般的なセクションを表します。セクションとはコンテンツをテーマごとにまとめたものです

原文: 4.3.3 The section element

いや分からん

…これ見て違い分かります？僕は分かりませんでした。

articleとsectionの違いって結構ベタなテーマで解説記事もググればいっぱいあるんですけど、HTMLを勉強したての当時の僕はさっぱりでした。さっぱりなのはお前の頭脳

なぜ分からないのか

自己完結？

自己完結ってワードが結構出てきます。あっちこっちで。それだけで完結するって意味なんですけど…どういうこと？ってなりません？これ。

完結ってなに？完結するなら1ページ全体がarticleじゃない？それってmainじゃね？articleの中にarticleがあるケースは？内側articleで完結するなら外側articleは広すぎじゃね？コメント欄は完結してるの？してないよね？でも単体でもコーナーとして成立してね？

みたいな感じです。

似た単語が多い

document, page, application, site, element, context, thematic…

なんだろう、分からない事を分からない事で説明されるみたいな。統計学をドラゴンボールで説明されるみたいな感じです(好きな人いたらごめんなさい)

どうすれば分かるのか

もっとこう、身近なたとえで分かりやすい単語を使って説明するのが大事だと思いました。ジョブズも同じような事言ってたし。ユーザーの身近な例で例えろみたいな。

説明を分かりやすくする2つのポイント

分かりやすく説明するため、長年の研究(10分)により2つのポイントを見つけました。

articleは記事であることを認識する

articleは記事です(小泉進次郎)

いや真面目な話、articleは記事であるという点をしっかり抑えておくと分かりやすさが格段に上がると考えています。

そして記事っていうのは新聞に載ってるタイトルと文章があるやつです。馬鹿にしてるわけじゃなくて、ほんとに。ここポイント。

自己完結をもうちょっと簡単なワードにする

いっそのこと 「他を全て破壊しても残った部分がなんとか読める」 くらいの表現の方が分かりやすいでしょう。

結果的にこう説明する

↑の2つを融合するとこうなります。

「他を全て消し飛ばして残りを新聞に貼り付けて違和感なく読めていればそれはarticle」

決まりました。SEOガチ勢の方に刺されても文句は言えません。何卒ご笑覧下さい。

結論

最初に書いた内容と同じですが、こんな感じに考えていけば上手く違いが分かるかと思います。

• まずは迷ってる部分を何も考えず<article>にします。
• 次に<article>から</article>までの中身を全部切り取ります。
• その切り取った中身を見ます。文章はありますか？
• 文章がなければsectionです。おわり。
• 文章があった場合、その文章全部が新聞に載っていると想像して下さい。
• 違和感がなければarticleです。おわり。
• 違和感があればsectionです。おわり。

以上です。ありがとうございました。