こんな方に読んでほしい
article
の使い方について学びたい方へ上の図のように、articleタグとは記事のコンテンツを示すタグになります。
また、記事に対するコメントなどにもarticleタグが使用されることが多いです。
[記事の内容]
article
タグとは
HTML文書の独立した記事の箇所を示します。
また、sectionタグと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タグを入れ子にして使用することも
可能です。
ポイント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タグはグループ化で使用が可能です。
復習ポイント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>
今回はこれで以上です。
article
タグとはHTML文書の独立した記事の箇所を示します。article
タグとはarticleタグは複数使用が可能です。2021.01.14
2020.05.13
2020.05.11
2020.05.09
2020.05.03
2020.05.02
2020.04.04
2020.03.28
2021.01.14
2021.01.11
2021.01.07
2021.01.04
2020.12.28
2020.12.24
2020.03.22
2020.03.06
2020.02.22
2020.02.22
© 2020 shu-naka-blog