SHU BLOG

BLOG NEWS ブログ

TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

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

こんな方に読んでほしい

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

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

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

articleタグについて

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タグ

rticleタグと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>

まとめ

今回はこれで以上です。

POINT
  • articleタグとはHTML文書の独立した記事の箇所を示します。
  • articleタグとはarticleタグは複数使用が可能です。
  • 入れ子にする場合は親要素の内容に関連している必要があります。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top