【HTML】articleタグでコンテンツや記事を定義する方法と正しい使い方

このページについて

このページではHTMLで使う事ができるarticleタグについての解説をしています。

articleは独立した自己完結型のコンテンツを定義します。ここでいう独立した自己完結型とは、「その記事のみでコンテンツが成立している」ようなものの事をさします。

ニュースサイトでいえばニュース本文が、このサイトのようにブログ型であればこの1つ1つのページそのものが自己完結型と言えます。ただしあっちこっちリンクを貼っている場合にもこの定義が正しいかと言われると少々難しかったりもします。

とは言え基本的にはその1部分だけでコンテンツが成り立っている場合に、articleを使うのが適していると言えます。迷ったときは何も使わないという方針を取ることもできます。

articleは基本的には開始タグと終了タグでコンテンツを囲むだけです。

<body>
<article>
<p>記事内容</o>
</article>

articleはブロック要素を持ちます。articleを設定したからといってブラウザ側で特別なレンダリングが行われることはありません。つまり見ている人からしたら、変わっているかどうかなんて事はわかりません。

articleはグローバル属性とイベント属性の2種類に対応しています。固有の属性などはなく、基本的にはidやclassなどを付与して使ったりします。

articleは独立した自己完結型のコンテンツに対して使うのが適切です。その内容がarticleに適しているかどうか迷うこともありますが、基本的には続編とかで無い限りはarticleです。もしくは何も付与せず、読み切り・続編などどちらにも対応できるというスタンスを取るのもありですね。