【入門編】articleとsectionの選択基準 – HTML実践ガイド

HTMLを書き始めたばかりの頃、誰もが一度は「あれ、ここは `

` なの？それとも `

` なの？」と手が止まってしまう瞬間がありますよね。

公式の仕様書を読んでも「自己完結している」「独立して配信可能」なんて堅苦しい言葉が並んでいて、結局どっちを使えばいいのかモヤモヤしてしまう……。その気持ち、痛いほどよくわかります。

今日はそんな「HTMLの迷子」にならないための、直感的な見分け方を一緒に紐解いていきましょう。難しいことは抜きにして、身近な「雑誌」と「切り抜き」を例にして考えてみますね。

—

Webページを作るとき、私たちは情報を整理整頓して「ここからここまでがひとまとまりだよ」とブラウザに教えてあげる必要があります。そのためのタグがこれらです。

これだけだとまだ少し抽象的ですよね。次の例え話でイメージを固めてみましょう。

—

Webサイトを「一冊の雑誌」だと想像してください。

例えば「今月のレシピ特集」というページがあったとして、その中に「主菜」「副菜」「デザート」という区切りがありますよね。これらは独立して雑誌から引き抜くことはあまりありませんが、特集という一つの文脈の中では必要な「区切り」です。これが `

` です。

例えば、ブログの記事やニュースのコラム、あるいはTwitterの投稿一つひとつ。これらは雑誌からペリッと剥がして、SNSにシェアしたり、別の場所に引用したりしても「あ、これはこういう話なんだな」と意味がわかりますよね。これが `

` です。

迷ったときは、自分にこう聞いてみてください。
「この中身だけを、別の場所にコピペして配信しても、読者は内容を理解できるかな？」

—

では、実際にどんな風に書くのか、シンプルなサンプルを見てみましょう。

明日から使えるHTMLの極意

HTMLは構造がすべて。セマンティックなマークアップを心がけましょう。

Web制作が大好きな駆け出しエンジニアです。

ご覧の通り、`article` の中には「一つの独立したトピック」が入り、`section` の中には「一つの塊としての役割」が入っています。こうして整理してあげると、ブラウザ（やGoogle検索のロボット）も「お、ここは記事本体だな」「ここは補足情報だな」と賢く理解してくれるようになるんです。

—

「もし間違えて使っちゃったらどうしよう……」と不安に思う必要は全くありません。

Web開発の世界では、完璧を目指すよりも「自分なりに意味を考えてタグを選んでいること」自体が、素晴らしい第一歩なんです。最初は間違えても、あとから直せばいいだけ。コードは何度でも書き直せますから、安心してくださいね。

まずは難しく考えず、「これは独立しているかな？それともただのグループかな？」と少しだけ意識する。その積み重ねだけで、あなたの書くHTMLは驚くほど読みやすく、美しくなっていきますよ。

さあ、自信を持ってタグを選んでみましょう！応援しています！