<article>タグは、そのタグ内でコンテンツが
完結するときにかきます。
例を列挙すると、ニュースやブログの記事です。
分かりにくいのでサンプルコード作成しました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLのメモ</title> </head> <body> <article> <h1>ロシア</h1> <p>世界には様々な国があります。このブログの読者の方は ロシアを訪れた方はいますか。</p> <section> <h2>モスクワ</h2> <p>ロシアで一番大きな都市です。ロシア経済、政治の 中心地です。・・・・以下省略</p> </section> <section> <h2>サンクトペテルブルグ</h2> <p>ロシアで2番目に大きな町です。おととしの10月 私はこの都市に行きました。歴史観が溢れる町で 美術館が多く、町も綺麗です。目玉はエルミタージュ美術館です。 世界中からの作品が見れ、日本関連のものもあります。 日本の刀や鎧も飾られています。・・・以下省略</p> </section> <section> <h2>ニージニ・ノブゴロド</h2> ・・記事詳細・・ </section> <section> <h2>エカテリンブルグ</h2> ・・記事詳細・・ </section> <article> <h2>コメント</h2> <p>ロシアに行く日本人が少ないため有益な情報を・・・</p> </article> </article> </body> </html> |
【追記】
1.「ロシア」というコンテンツが、4つの都市の話だけで完結する場合は
上記のサンプルコードのようにマークアップします。ブログの記事のように
トップページに抜粋文だけを表示する場合も、そのページ内で内容が
ひとつのものとしてみなせるなら<article>タグを使います。
2.独立したコンテンツでも、ニュースサイトに載っている内容が多く記事ページが
分割される場合は、articleではなくsectionタグを使う。
3.<article>タグと<section>タグの違いですが、
「ページの中で独立したコンテンツ」となっているか否か、
「内容が<article>内で完結できるか」否かで判断します。
4.<article>タグは入れ子にすることができる。
その場合は<article>タグ内の<article>タグと、親の<article>タグは
関係があるものにしなければいけません。
よくつかうのは、ブログの記事に対するコメント。