HTML <article>

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

構文

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。article 要素の終了タグは省略できない。

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

<ARTICLE>
  <!-- flow content -->
</ARTICLE>

内容

article 要素の開始タグと終了タグの間にフロー・コンテンツを含めることができる。

属性

以下に示す属性を 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

要素のタイトルを指定する。

構造化データ

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

CSS

border-right

右の境界線の太さ、種類、色を指定するCSSプロパティ

<article style="border-right: medium solid red">
  <h3>CHAPTER 1</h3>
  <p>The quick brown fox jumps over the lazy dog.</p>
</article>

CHAPTER 1

The quick brown fox jumps over the lazy dog.

参考文献

Web Hypertext Application Technology Working Group (2023) Sections HTML Living Standard