HTML article element

articleは、記事を表すHTML要素である。記事とは、自己完結した構成物を指す。

構文

<article>
  <!-- flow content -->
</article>

属性

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定することができる。 
<article class="container mt-2">
  <!-- flow content -->
</article>
data-*
カスタムデータ属性を指定する。「data-」の接頭辞に続く属性名は、任意の文字列を指定できる。
id
HTML文書内で一意な識別子を指定する。
itemscope
articleがある特定のものについての情報であると示す。詳細はitemtype属性で指定する。
itemtype
articleが何についての情報かを指定する。
itemtype 説明
//schema.org/3DModel 3Dコンテンツ
//schema.org/ArchiveComponent アーカイブ・コンテンツ
//schema.org/Article 記事
//schema.org/Atlas 図表
//schema.org/Book 本
//schema.org/Blog ブログ
//schema.org/Game ゲーム
//schema.org/Map 地図
//schema.org/MusicComposition 楽曲
//schema.org/Movie 映画
//schema.org/Painting 絵
//schema.org/Photograph 写真
//schema.org/Question 質問
//schema.org/Quotation 引用
//schema.org/Review レビュー（評価）
//schema.org/Thesis 論文 
<article itemscope itemtype="http://schema.org/Question">
  <h1>articleタグにはどんな属性を指定できますか？</h1>
</article>
lang
言語を指定する。
ondblclick
article要素をダブルクリックしたとき実行するJavaScriptを指定する。
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定することもできる。 
<article style="padding-top: 1rem; padding-bottom: 1rem;">
  <!-- flow content -->
</article>
title
要素のタイトルを指定する。

内容

article要素の内容にはフローコンテンツを含めることができる。具体的には次の要素である。

構造化データ

Google検索が記事を正確に認識するために、記事を構造化データでマークアップすることが望ましい。

CSS

border-right
右の境界線の太さ、種類、色を指定するCSSプロパティ 
<article style="border-right: medium solid gray">
  The quick brown fox jumps over the lazy dog.
</article>
The quick brown fox jumps over the lazy dog.

参考文献

Web Hypertext Application Technology Working Group (2021) "The article element" HTML Living Standard