要素について

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

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

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

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

サンプルコード

<header>

<h1>果物を食べる</h1>
<nav>

<ul>

<li><a href="index.html">トップ</a></li>
<li><a href="sample1.html">りんご</a></li>
<li><a href="sample2.html">もも</a></li>
<li><a href="sample3.html">バナナ</a></li>
<li><a href="sample4.html">マンゴスチン</a></li>

</ul>

</nav>

</header>

<main>

<article>

<h1>黄色いフルーツバナナ</h1>
<section>

<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>

</main>

<footer>

<ul>

<li><a href="sample1.html">お問い合わせ</a></li>
<li><a href="sample2.html">リンク集</a></li>

</ul>
<p><small>© copyright 2015 Frouts wo taberu</small></p>

</footer>

果物を食べる

黄色いフルーツバナナ

バナナについての解説。

バナナの特徴

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

バナナの木

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

バナナの果実

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

バナナの産地

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

バナナの保存方法

果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。

バナナの栄養素

ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。

属性と値

入れ子にした“article”要素

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

<article>

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

<h2>この記事へのコメント</h2>
<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でも定義されています。

定義されている仕様書

<article>