<article> - 独立したコンテンツ | HTML5

article 要素のポイント！

articleタグはページ内の独立したコンテンツを表す。
分かりやすい例としてブログやニュースサイトの記事などがある。
また掲示版の投稿や、ブログ記事へのコメントにも使える。
必須ではないがtitleタグを伴う方が望ましいだろう。
sectionとの使い分けを意識してみよう。

`article`要素の概要

SUMMARY OF ELEMENT

HTML5における<article>要素は、そのコンテンツが単体で完結する、独立したコンテンツであることを示す際に利用する要素です。

もう少し具体的に考えてみましょう。
分かりやすい例で言えば、ブログサイトにおけるメインの記事部分などが該当します。また、ニュースサイトの記事部分も同じように<article>でマークアップするべきコンテンツと言えるでしょう。

Articleは「新聞や雑誌などの記事。論説。」等の意味を持つ英単語です。
また、「品物や品目」といった意味もあります。「article of food(食料品)」等といったようにです。

話を戻します。<article>は掲示板やコメントの投稿にも使えます。つまり「article of comment」ですね。
具体的には<article>でマークアップしたブログ記事内に入れ子になったコメントを<article>でマークアップするといった感じです。

こういった入れ子で利用した場合、内側の<article>は、コメントとして独立したコンテンツでありながら、親要素の記事に関連したコンテンツである。ということを表すことができます。

`article`要素の利用例

USAGE EXAMPLE FOR ELEMENT

要素の利用例を実際のコードを見ながら覚えていきましょう。
簡単なCSSでデザインをしているものもありますが、CSSの詳細はCSSリファレンスをご覧ください。

`article`要素の基本的な利用例

ここでは、<article>の具体的な利用例を見ていきましょう。
まずは、一番基本的な書き方としてブログサイトの記事を想定してみましょう。見出しと本文を伴った例です。


<body>

  <article>
    <h1>記事タイトル</h1>
    <p>ブログ記事本文ブログ記事本文...</p>
  </article>

</body>

サンプル結果表示

`article`要素の基本的な利用例2

次に、ブログのトップページなどに見られる記事のリストを<article>でマークアップしてみましょう。
記事リストを一つずつの「独立したコンテンツ」であると示したい場合にこういった利用も良いでしょう。

この例では <img>要素を使って記事リストのアイキャッチ画像をイメージして置いてみました。


<body>

  <article>
    <h1>記事タイトル1</h1>
    <img src="*****.jpg" alt="" width="250" height="180">
    <p>ブログ記事本文1ブログ記事本文1...続きを読む</p>
  </article>
  
  <article>
    <h1>記事タイトル2</h1>
    <img src="*****.jpg" alt="" width="250" height="180">
    <p>ブログ記事本文2ログ記事本文2...続きを読む</p>
  </article>
  
  <article>
    <h1>記事タイトル3</h1>
    <img src="*****.jpg" alt="" width="250" height="180">
    <p>ブログ記事本文3ブログ記事本文3...続きを読む</p>
  </article>

</body>

サンプル結果表示

記事に対するコメントに、`article`要素を入れ子でマークアップ

次に、<article>を入れ子にして、記事に対して投稿されたコメントをマークアップしてみましょう。


<body>

  <article>
    <h1>記事タイトル</h1>
    <p>ブログ記事本文ブログ記事本文...</p>
    <p>ブログ記事本文ブログ記事本文...</p>
    <p>ブログ記事本文ブログ記事本文...</p>

    <section> <!--コメント部分をsectionで記述-->
      <h2>COMMENTS</h2>

      <article id="comment001" > <!--コメント-->
        <p>コメント投稿文コメント投稿文...</p>
        <footer>NAME:名無しさん 2019/01/01</footer>
      </article>

      <article id="comment002"> <!--コメント-->
        <p>コメント投稿文2コメント投稿文2...</p>
        <footer>NAME:通りがかりさん 2019/01/01</footer>
      </article>

    </section>

  </article>

</body>

サンプル結果表示

`article`要素の定義

DEFINITIONS OF ELEMENT

コンテンツ・カテゴリ

要素を記述出来る場所

フローコンテンツを記述できる場所。

内包できるコンテンツ

フローコンテンツ

開始/終了タグの省略

省略不可

ボックスのタイプ

ブロック

付与できる属性

グローバル属性

article 要素のポイント！

article要素の基本的な利用例

article要素の基本的な利用例2

記事に対するコメントに、article要素を入れ子でマークアップ

`article`要素の基本的な利用例

`article`要素の基本的な利用例2

記事に対するコメントに、`article`要素を入れ子でマークアップ