【HTML】articleタグの正しい使い方を分かりやすく解説!

シュウ

今回は「【HTML】articleタグの正しい使い方を分かりやすく解説!」
についての解説になります！

こんな方に読んでほしい

HTML5を学び始めた方へ
articleの使い方について学びたい方へ
今回はarticleタグについて記事を書いております

上の図のように、articleタグとは記事のコンテンツを示すタグになります。
また、記事に対するコメントなどにもarticleタグが使用されることが多いです。

主なHTML5タグ

section　
解説の記事ありますよ
sectionタグは章や節といったまとまりを示すために使用します。
main　
解説の記事ありますよ
mainタグとはHTML文書のメインコンテンツを示します。
header・nav・footer　
解説の記事ありますよ
header・nav・footer要素とはセクションの情報を示すタグになります。
aside　
解説の記事ありますよ
asideタグとは余談・補足の情報を示します。

[記事の内容]

articleタグについて

articleタグとは
HTML文書の独立した記事の箇所を示します。
また、sectionタグとarticleタグの使い分けが分からない方も最後まで読んで頂き理解度を
深めましょう。

articleタグの記事に対する使い方について

記事一覧の一つ一つをarticleタグで
囲いましょう。

ポイント01
articleタグは複数使用が可能です。

記事一覧の一つ一つ

<body>
 <header>ヘッダー要素</header>
 <main>

  <!--記事 article-->
  <article>
   <h2>見出し「タイトルが入ります」</h2>
   <p>段落「テキストが入ります」</p>
  </article>

  <!--記事 article-->
  <article>
   <h2>見出し「タイトルが入ります」</h2>
   <p>段落「テキストが入ります」</p>
  </article>

</main>
<footer>フッター要素</footer>

articleタグの入れ子に対する使い方について

articleタグを入れ子にして使用することも
可能です。

ポイント02
入れ子にする場合は親要素の内容に関連している必要があります。

入れ子にする場合

<body>
 <header>ヘッダー要素</header>
 <main>

 <!--記事 article 親要素-->
 <article>
 <h1>見出し「タイトルが入ります」</h1>
 <p>段落「テキストが入ります」</p>

  <!--入れ子 article-->
  <article>
   <h2>見出し「記事に対するコメント」</h2>
   <p>段落「コメントのテキストが入ります」</p>
  </article>
  <!--入れ子 article ここまで-->

 </article>
 <!--記事 article 親要素 ここまで-->

</main>
<footer>フッター要素</footer>
</body>

articleタグとsectionタグの使い方について

articleタグとsectionタグはグループ化で使用が可能です。

復習ポイント03
articleタグ
独立した記事の箇所を示し、完結していることを示す要素
sectionタグ
章や節といったまとまりを示す要素
またsectionタグを使用する際には見出しタグ(h1〜h6)を忘れずに！

articleタグとsectionタグ

<body>
 <header>ヘッダー要素</header>
 <main>

  <h1>【Webデザイン】配色のパターンについて</h1>

  <!--記事 article-->
  <article>
   <h2>配色パターンについて12色まとめみた</h2>
   <p>段落「テキストが入ります」</p>

    <!--章や節 section-->
    <section>
     <h3>赤色(情熱・強さ)</h3>
     <p>段落「コメントのテキストが入ります」</p>
    </section>
    <!--章や節 section ここまで-->

  </article>
  <!--記事 article　ここまで-->

 </main>
 <footer>フッター要素</footer>
</body>