プログラミング勉強日記
2020年10月1日
HTMLの<atricle>タグを初めて見かけたので使い方をまとめる。
articleタグとは
article要素は内容がそれだけで完結している部分に使用する。具体的には、雑誌や新聞の記事やブログのコメントなどである。
<article>を入れ子にして使用するときには、内側の<article>の内容は原則として外側の<article>の内容に関連しているものにする。具体的には、<article>タグでくくられたブログのエントリの内側にさらに<article>タグでくくられたコメントを入れ子にすることで、そのコメントがブログに対して投稿されたものであることを示すことができる。
ブログの例
<h1>blog</h1>
<article>
<h2>2020年10月1日</h2>
<p>今日はバスケをしました。</p>
</article>
<h2>コメント</h2>
<p>私もバスケしたいです。</p>
</article>
</article>
<article>
<h2>2020年9月27日</h2>
<p>今日はオムライスを作りました。</p>
</article>
<h2>コメント</h2>
<p>とてもおいしそうですね。</p>
</article>
</article>
sectionとdiivタグとの違い
articleもsectionもdivもブラウザで表示した場合には結果は変わらない。ただ、それぞれの違いを理解してマークアップすると文章構造ははっきりして、Googleのクローラーに正しく検知され修正や改善しやすくなる。
- articleはsectionよりも独自性の高い構造の場合に使う
- sectionはテーマ性ごとに、articleよりも独立していないときに使う
- divタグは一つの範囲として使えるが、過剰に利用されがち
参考文献
article…… 記事であることを示す
HTMLでarticleタグを使いこなす方法を現役デザイナーが解説【初心者向け】