このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

article要素/文書内の自己完結した記事セクションHTML5で追加

記事May 17th,2015
Dec. 15th,2019
文書内の自己完結した記事セクションを表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

概要

article”要素は文書内の自己完結した記事セクションを表す要素です。“article”要素の内容はニュースやブログの記事、ブログの記事に対するコメントなどその内容だけで一つの記事として成り立つものである必要があります。

一つの文書の中で“article”要素は一つだけであるとは限らず、ニュースサイトなどのような記事の一覧があるページではそれぞれの記事を囲むために複数の“article”要素を使用することができます。

入れ子にする場合子孫となる“article”要素は先祖となる“article”要素の内容に関連した記事を表します。

通常見出し要素(h1~h6”要素)を含みますが必須ではありません。

セクショニング・コンテンツです。アウトラインを生成します。

サンプルコード

<article>
<h1>黄色いフルーツバナナ</h1>
<section id="section1">
<h2>バナナの特徴</h2>
<p>「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。</p>
<section>
<h3>バナナの木</h3>
<p>バナナは「バナナの木」と呼ばれるように高さが数メートルまで成長するが草本に分類される。高く伸びる茎のような部分は葉鞘が幾重にも重なりあっているものであり、本当の茎は地中にある。</p>
</section>
<section>
<h3>バナナの果実</h3>
<p>バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。</p>
</section>
</section>
<section>
<h2>バナナの産地</h2>
<p>バナナの生産量の世界一はインドで、中国、フィリピン、エクアドル、ブラジルが続く。日本は124位であり、沖縄や奄美大島、鹿児島などで栽培されている。</p>
</section>
</article>

黄色いフルーツバナナ

バナナの特徴

「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。

バナナの木

バナナは「バナナの木」と呼ばれるように高さが数メートルまで成長するが草本に分類される。高く伸びる茎のような部分は葉鞘が幾重にも重なりあっているものであり、本当の茎は地中にある。

バナナの果実

バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。

バナナの産地

バナナの生産量の世界一はインドで、中国、フィリピン、エクアドル、ブラジルが続く。日本は124位であり、沖縄や奄美大島、鹿児島などで栽培されている。

属性と値

属性
属性 説明 説明
任意属性
グローバル属性

入れ子にした“article”要素

article”要素を入れ子にした場合子孫となる“article”要素は先祖となる“article”要素の内容に関連した記事を表します。

サンプルコード

<article>
<h1>バナナを食べよう</h1>
<p>ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれていて栄養豊富なバナナは高カロリーと思われがちです。しかし、実は1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーです。しかも日常生活で不足しがちな栄養素がバランスよく含まれてるので、健康な生活にかかせない果物なのです。</p>
<section>
<h1>この記事へのコメント</h1>
<article>
<p>バナナを手放せない</p>
<footer>
<time>2015-05-05 12:34</time>
<address><a href="mailto:emailaddress@example.com">甘蕉太郎</a></address>
</footer>
</article>
<article>
<p>リンゴこそ至高</p>
<footer>
<time>2015-05-05 23:45</time>
<address><a href="mailto:emailaddress@example.com">椎田林檎</a></address>
</footer>
</article>
<article>
<p>すももももも美味しい</p>
<footer>
<time>2015-05-06 03:45</time>
<address><a href="mailto:emailaddress@example.com">桃山桃子</a></address>
</footer>
</article>
</section>
</article>

バナナを食べよう

ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれていて栄養豊富なバナナは高カロリーと思われがちです。しかし、実は1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーです。しかも日常生活で不足しがちな栄養素がバランスよく含まれてるので、健康な生活にかかせない果物なのです。

この記事へのコメント

すももももも美味しい

仕様書

article”要素はHTML5から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<article>
定義なし

定義あり

定義あり

定義あり

定義あり

HTML Living standard
Sections|The area element新しいウィンドウで表示します

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク