article 要素について調べてみた【初心者向け】

2025/05/05 Web

ブログとか日記とかを作りはじめると、結構見かけるようになる「article」。今回は、そんな article 要素について調べてみました。

この記事でわかること

article 要素の役割
article 要素の基本的な使い方

article 要素とは

「article」という単語の意味を知っていますか？

恥ずかしがらずに、正直に答えてください！

もともと知っていたあなたはちゃんと勉強してきたのですね！すばらしい！この単語は、何やら中学生で習う単語らしいです……。ちなみに私は Web について勉強するまで、知りませんでした！！

でもご安心を。
この先、Web 作りでめっちゃ使う単語なので、否が応でも脳みそにインプットされます！！！！

では参りましょう！

article の意味

「article」の読みはアーティクル（アーティコォ）って感じ。意味は「（新聞・雑誌の）」などです。

単語

article：【名詞】（新聞・雑誌の）記事（weblio）

なかなか日常会話で「記事」なんて単語を、ましてや英語で使う機会なんてないですもんね……。中学生の時に習ったとて、そんな英単語、私の脳みそからは早々に消えてしまったようです＞＜

使いまわせる“記事”っぽいコンテンツ

article 要素は、ドキュメント、ページ、アプリ、サイト、etc の中で完結しているor自己完結型の構成を表します（例えば１本の記事や投稿など）。それらは原則として、単独で配布or再利用が可能です。例えばシンジケーション（配信）のように、他の場所でもそのまま掲載できるようなイメージです。~~碇シンジではない。~~

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, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
HTML Living Standard

分かりやすく言えば、article 要素は、それ自体が単体でも意味が通じる「article」コンテンツに使われるということです。ブログ記事やニュース記事などを思い浮かべるとイメージしやすいです。

また、“記事”にとらわれず、ユーザーのコメント、インタラクティブなウィジェットやガジェット、などさまざまな独立したコンテンツでも article 要素を採用する場合もあります。すべてのケースを覚えるのは難しいので、まずは“記事”っぽい使い方から慣れて、他は少しずつ覚えていけばOKだと思います！

article 要素は
Sectioning Content

article 要素は、Content models（コンテンツモデル）の概念において、Sectioning content（セクショニングコンテンツ）のカテゴリに属しています。

ということは、
article 要素内に header 要素や footer 要素を入れると、その article 要素のセクションに属するヘッダーとフッターと解釈されるということですね！（もちろん別に入れなくてもOK。）

コンテンツモデルについて気になる方は、下の記事を参照していただけますと幸いです。

【HTML5】コンテンツモデルについて調べてみた

article 要素の
基本的な使用例

article 要素の基本的な使用例を紹介します。

記事そのものを囲う

シンプルに記事を囲うのに article 要素を使用します。

<body>
 <header><p>シンプルなブログ</p></header>
 <main>
  <article>
   <header>
    <h1>【初心者向け】アーティクルについて</h1>
    <p>投稿日: <time datetime="2025-05-05">2025年5月5日</time></p>
   </header>
   <div>
    <p>アーティクルについて説明します。アーティクルとは記事のことです。</p>
    <p>…</p>
    <p>…</p>
   </div>
   <footer>
      <p>著者: <span>まいける</span></p>
      <a href="#comments">コメントを見る</a>
   </footer>
  </article>
 </main>
</body>

とくに難しいことはありませんね。

main 要素で囲ったり、囲わなかったり、article 要素の中の div 要素を section 要素にしたりと、結構幅広い記述方法で使えますので、複数人でコーディングする場合はあらかじめ書き方を統一しておくことをオススメします。でも比較的“外側に”あることが多いですかね。

各記事へのリンクボタン

各記事へのリンクボタンを作るのに article 要素を使ったりもします。下の例は、『記事一覧』のコード例です。

<div class="article-list">

 <article class="article-list__item">
   <a class="article-list__item-inner" href="https://www.〇〇.com/article20250505/">
    <div class="article-list__text">
     <h2 class="article-list__title">【初心者向け】アーティクルについて</h2>
     <span class="article-list__date-post">
      <i class="far fa-clock article-list__icon"></i>
      <time datetime="2025-05-05">2025/05/05</time>
     </span>
    </div>
   </a>
 </article>

 <article class="article-list__item">
   <a class="article-list__item-inner" href="https://www.〇〇.com/article20250504/">
    <div class="article-list__text">
     <h2 class="article-list__title">【初心者向け】セクションについて</h2>
     <span class="article-list__date-post">
      <i class="far fa-clock article-list__icon"></i>
      <time datetime="2025-05-04">2025/05/04</time>
     </span>
    </div>
   </a>
 </article>

 <article class="article-list__item">
  <a class="article-list__item-inner" href="https://www.〇〇.com/article20250503/">
  …（略）…
  </a>
 </article>

 <article class="article-list__item">
  <a class="article-list__item-inner" href="https://www.〇〇.com/article20250502/">
  …（略）…
  </a>
 </article>

</div>

『記事一覧』などでは、１つ１つの記事が自己完結型の独立したコンテンツと考えられるので、リンクボタンに article 要素を使うのも自然な使い方です。

『記事一覧』のほかにも『最新記事』や『カテゴリ』や『タグ』でグループ化しリンクさせる際に便利です。

レビューやコメントの投稿

商品のレビューやコメントが投稿でも article 要素が活躍します。

<section class="reviews">
  <article>
    <header>
      <h3>めっちゃよかった！</h3>
      <p>投稿日: <time datetime="2025-05-05">2025年5月5日</time></p>
    </header>
    <p>塩ラーメンが特に美味しかったです！</p>
  </article>
  <article>
    <header>
      <h3>ステキな対応でした！</h3>
      <p>投稿日: <time datetime="2025-05-06">2025年5月6日</time></p>
    </header>
    <p>笑顔でいらっしゃいませと言われて、とても気持ちよく過ごせました！</p>
  </article>
</section>

各レビューやコメントもそれぞれ独立したコンテンツとして article 要素で囲うこともできるのですねぇ。

article 要素の中の
article 要素

article 要素の中に別の article 要素を入れた場合、次の２つの点に注意しましょう。

・外（親）と内（子孫）は関連した article とみなされる
・外（親）の article 要素と内（子孫）の article 要素の著者は別

以下は、日記（親 article 要素）の内側にコメント（子孫 article 要素）があるという例です。

<article><!-- ←親 article 要素 -->
  <h2>今日のランチ</h2>
  <p>今日はラーメンを食べました。美味しかったです。</p>
  <address>投稿者: じょにー</address> <!-- ←この日記の著者情報 -->

  <section>
    <h3>コメント</h3>
    <article><!-- ← この日記へのコメント、子孫 article 要素 -->
      <p>ラーメンいいですね！わたしも昨日食べました。</p>
      <address>コメント投稿者: かれん</address> <!-- ←このコメントの著者 -->
    </article>
    <article><!-- ← この日記へのコメント、子孫 article 要素 -->
      <p>醤油派ですか？味噌派ですか？</p>
      <address>コメント投稿者: しょーん</address> <!-- ←このコメントの著者 -->
    </article>
  </section>

</article>

親と子孫は関連した article

この例の場合だと日記とそのコメントは直接関連しています。だから、『外側の親 article 要素』と『内側の子孫 article 要素』は関連しているとみなされます。ここは難しく考えずシンプルに理解しておきましょう。

著者は別

『外側の親 article 要素』と『内側の子孫 article 要素』の著者は異なります。

つまり、
日記の著者は『じょにー』ですが、それぞれのコメントの著者には『じょにー』は適用されません。コメントの著者は、それぞれ『かれん』と『しょーん』です。ここが大切なポイント！

日記とコメントは別のコンテンツとして扱われ、それぞれに異なる著者が存在することを理解しておきましょう！これを意識すると、article 要素の使い方がより明確になるかもしれません。

まとめ

article 要素は、自己完結したコンテンツで使います。例えば１本の記事や投稿などが該当します。また、各記事へのリンクボタン、レビューやコメントなど、さまざまな独立して意味を持つコンテンツにもよく使われます。

複数の article 要素を同一ページに使うこともでき、article 要素の中に article 要素を内包するような使い方も可能です。その場合は、『外側の親 article 要素』と内包されている『内側の子孫 article 要素』は関連性を持ちながらも、それぞれ独立した著者や意味を持つという点に注意しましょう。

本記事では触れていませんが、「article」は技術的な話で、ブログ配信などに使われるフォーマット（Atom）の「entry」と近い意味で使われることもあるようです。でもこれは配信システムを作る側のお話なので、今は気にしなくて大丈夫です！もし気になった方は、調べてみるのもおもしろいですよ！

参考・出典

・HTML Living Standard. 「4.3.2 The article element」. https://html.spec.whatwg.org/#the-article-element, 2025年5月5日閲覧。

・MDN. 「<article>: 記事コンテンツ要素」. https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/article, 2025年5月5日閲覧。

・weblio. 「articleとは意味・読み方・使い方」. https://ejje.weblio.jp/content/article, 2025年5月5日閲覧。