0Pricing
HTML Academy · レッスン

article要素と自己完結型コンテンツ

独立して配信できるコンテンツにarticleを使用します

「article要素と自己完結型コンテンツ」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

articleとは何ですか

<article>要素は、独立した自己完結型のコンテンツを表します：

  • ページの文脈から切り離しても、それ自体で意味が通じます
  • 意味を失わずに、RSSやソーシャルカードなどで配信できます

articleを使用する場面

<article>は、次のようなコンテンツに使用します：

  • ブログ記事
  • ニュース記事
  • フォーラムへの投稿
  • 商品カード
  • コメント（個々のコメントもarticleです）
  • ウィジェットやガジェット

articleの構造

一般的なarticleには、header、コンテンツ、footerが含まれます：

<article>
  <header>
    <h2><a href="/posts/html-guide">HTML5 Complete Guide</a></h2>
    <p>By <a rel="author" href="/authors/jane">Jane Smith</a></p>
    <time datetime="2025-01-15">January 15, 2025</time>
  </header>

  <p>HTML5 brought many semantic improvements to the web...</p>

  <footer>
    <p>Tags: <a href="/tags/html">HTML</a>, <a href="/tags/web">Web</a></p>
  </footer>
</article>

入れ子にしたarticle（コメント）

返信やサブコンテンツを表すために、articleを入れ子にできます：

<article class="post">
  <h2>Main Post Title</h2>
  <p>Post content...</p>

  <section class="comments">
    <h3>Comments</h3>

    <article class="comment">
      <p>Great post! — <cite>Alice</cite></p>
    </article>
    <article class="comment">
      <p>Thanks for sharing! — <cite>Bob</cite></p>
    </article>
  </section>
</article>

商品カードとしてのarticle

商品カードやコンテンツカードもarticleにできます：

<ul class="product-grid">
  <li>
    <article class="product-card">
      <img src="widget.jpg" alt="Widget Pro">
      <h2>Widget Pro</h2>
      <p>The best widget for professionals.</p>
      <p>$49.99</p>
      <a href="/products/widget-pro">View Product</a>
    </article>
  </li>
</ul>

articleとsectionの違い

よく混同されるarticleとsectionの違い：

  • <article> — 自己完結型で、ページから切り離しても意味が通じます
  • <section> — テーマごとのグループで、意味を理解するには周囲の文脈が必要です
<!-- Article: can be shared standalone -->
<article>A blog post about HTML</article>

<!-- Section: a chapter of the post (not standalone) -->
<article>
  <section><h2>Introduction</h2>...</section>
  <section><h2>Deep Dive</h2>...</section>
</article>

articleとSchema.org

articleとSchema.orgのJSON-LDを組み合わせると、検索結果をリッチ化できます：

<article>
  <h1 id="title">HTML5 Guide</h1>
  <time datetime="2025-01-15" id="date">Jan 15, 2025</time>
  ...
</article>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTML5 Guide",
  "datePublished": "2025-01-15"
}
</script>

cite要素

作品のタイトルや出典を示すには、<cite>を使用します：

<article>
  <h2>Book Review: <cite>Don't Make Me Think</cite></h2>
  <p>By <a rel="author" href="/authors/me">Jane Smith</a></p>
  <p>Steve Krug's book remains essential reading for UX designers...</p>
</article>

リンクのrel=author

article内の著者情報へのリンクには、rel="author"を指定します：

<article>
  <p>Written by
    <a href="/authors/jane" rel="author">Jane Smith</a>
  </p>
</article>
<!-- rel="author" helps search engines identify content authorship -->

1つのページに複数のarticle

複数のarticleをリストやフィードに含めることができます：

<main>
  <h1>Latest Posts</h1>
  <article>...</article>
  <article>...</article>
  <article>...</article>
</main>
<!-- Each article is independently consumable -->
<!-- This is correct: multiple articles, one main -->

articleを使用しない場面

次のようなものには<article>を使用しないでください：

  • 独立した意味を持たない、一般的なページのセクション
  • ナビゲーション要素
  • ホームページのマーケティング用セクション（<section>を使用します）
  • サイドバーのウィジェット（<aside>を使用します）

確認問題

article要素に入れるコンテンツの決め手となる特徴は何ですか？

まとめ：article要素

article要素の要点：

  • 独立した自己完結型で、単独で配信できるコンテンツ
  • 意味を失わずに配信（RSSやソーシャルプレビュー）できます
  • 例：ブログ記事、ニュース、商品カード、コメント
  • 入れ子にできます（投稿の中にコメントarticleを入れるなど）
  • article内の著者情報へのリンクにはrel="author"を使用します

よくある質問

「article要素と自己完結型コンテンツ」レッスンは無料ですか？

はい。「article要素と自己完結型コンテンツ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「article要素と自己完結型コンテンツ」で何を学びますか？

独立して配信できるコンテンツにarticleを使用します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「article要素と自己完結型コンテンツ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. header nav main footer
  2. article要素と自己完結型コンテンツ
  3. section要素とdivの違い
  4. time address mark
← HTML Academyに戻る