【入門編】article要素の独立性と再利用性 – HTML実践ガイド

Webサイトを作っていると、`

`ばかりを積み重ねてしまい、「あれ？自分の書いたコード、結局どこが何のための要素なのか分からなくなった…」なんて経験はありませんか？

HTMLを学び始めたばかりの頃は、誰もが通る道です。大丈夫、安心してください。今日は、そんな悩みをスッキリ解決してくれる、とっても頼もしい「article（アーティクル）要素」についてお話しします。

まず、言葉のイメージから掴んでいきましょう。`article`は直訳すると「記事」ですが、Web制作の世界では「それ単体で意味が通じる独立したコンテンツ」という意味で使われます。

身近な例でいうと、「お弁当」を想像してみてください。
お弁当箱（Webページ全体）の中に、卵焼き、ハンバーグ、ブロッコリーがそれぞれカップに入っていますよね。この「カップに入ったおかず」の一つひとつが、まさに`article`です。

卵焼きは、お弁当から取り出しても「卵焼き」として存在できますよね？
それと同じで、「Webページというお弁当箱から取り出して、他のサイトやニュースアプリに持っていっても、内容がちゃんと伝わるもの」なら、それは`article`の出番です。

具体的には、以下のようなコンテンツが`article`にぴったりです。

逆に、「Webサイト全体のヘッダー」や「サイドバーのメニュー」などは、単体で切り出しても意味が分からないですよね。これらは`article`ではなく、`header`や`nav`といった別の役割を持つタグを使うのが正解です。

では、実際にブログの投稿を想定したコードを見てみましょう。ポイントは「中身が完結していること」です。

今日から始めるHTMLの基礎

投稿日: 2023年10月27日

HTMLのタグは、まるでパズルのピースを組み合わせるようなもの。一つひとつに意味があるんですよ。

「`

`で囲めば見た目は一緒じゃない？」と思うかもしれません。確かに、ブラウザ上での見た目は変わりません。でも、HTMLには「検索エンジンや読み上げソフトに、中身を正確に伝える」という大事な役割があります。

もしあなたがGoogleのロボットだとしたら、ただの`

`が並んでいる場所よりも、「ここは『記事』ですよ！」と教えてくれる`article`がある場所の方が、何が重要か判断しやすいですよね。

`article`を使うかどうか迷ったら、こう自分に問いかけてみてください。

「このブロックをコピーして、別の場所（例えば自分のTwitterや別のブログ）に貼り付けたら、読んだ人は意味を理解できるかな？」

もし答えが「YES」なら、それは迷わず`article`を使ってOKです！

Web制作は、細かいルールを暗記する作業ではありません。一つひとつのタグに「どんな意味を込めるか」という、ちょっとした優しさを乗せていく作業なんです。ぜひ、次のコーディングで`article`を試してみてくださいね。

これからも、一緒に少しずつWebの世界を楽しんでいきましょう！