HTMLの <article> タグ
articleは、記事を表すHTML要素である。記事とは、自己完結した構成物を指す。
要素 | 説明 |
---|---|
address | 連絡先 |
article | 独立した記事 |
aside | コンテンツとは無関係なもの(広告等) |
div | 意味的ではなく視覚的な区切り |
figure | 図とキャプション |
footer | フッター |
header | ヘッダー |
hgroup | 見出し、サブタイトル及びリード文 |
main | メインコンテンツ |
nav | ナビゲーション |
section | 意味的な区切り |
構文
HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。article 要素の終了タグは省略できない。
<article>
<!-- flow content -->
</article>
<ARTICLE>
<!-- flow content -->
</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
- 要素のタイトルを指定する。
内容
article要素の内容にはフローコンテンツを含めることができる。具体的には次の要素である。
- テキスト
<a>
<abbr>
<address>
<article>
<aside>
<audio>
<b>
<bdo>
<bdi>
<blockquote>
<br>
<button>
<canvas>
<cite>
<code>
<data>
<datalist>
<del>
<details>
<dfn>
<div>
<dl>
<em>
<embed>
<fieldset>
<figure>
<footer>
<form>
<h1>
<header>
<hgroup>
<hr>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<main>
<map>
<mark>
<math>
<menu>
<meter>
<nav>
<noscript>
<object>
<ol>
<output>
<p>
<picture>
<pre>
<progress>
<q>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<svg>
<table>
<template>
<textarea>
<time>
<ul>
<var>
<video>
<wbr>
構造化データ
Google検索が記事を正確に認識するために、記事を構造化データでマークアップすることが望ましい。
CSS
- border-right
- 右の境界線の太さ、種類、色を指定するCSSプロパティ
<article style="border-right: medium solid red"> 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 (2023) Sections HTML Living Standard