HTML5覚書・要素
article要素
HTML5が出始めた時に、アップルコンピューターがartileをコンテンツ内全てに囲んだので
皆それを真似て本文を全てarticleで囲んだ経緯があるが、articleの本来の意味は「独立した記事」であるということ。
新聞の記事には経済欄、芸能欄、政治欄などカテゴリーに分かれたページ構造がになっているが
天声人語のような社説で、サイト内のどのジャンルにも属さない記事にarticle要素を使用する。
あるいはブログ記事のような一記事を他に持っていっても
違和感がないものもarticle要素といえるだろう。
section要素
そのサイト内の記事を囲む要素。
基本的にタイトルとしてのh1〜h8の見出しタグと
その説明のｐタグは必須。
一つの記事に更に複数のカテゴリの記事を枝分けて記載するにはsectionを入れ子構造にする
先ほどの新聞欄を例にとって、国際欄にアジアとヨーロッパの二つの記事を
表示するときは以下のような構造で記述。
<section> <h2>国際ニュース（タイトル）</h2> <p>国際ニュース欄の記事です（リードコピー）</p> <section> <h3>アジアニュース（タイトル）</h3> <p>アジアニュース欄の記事です（リードコピー）</p> </section> <section> <h3>ヨーロッパニュース（タイトル）</h3> <p>ヨーロッパニュース欄の記事です（リードコピー）</p> </section> </section>
aside要素
勘違いしやすいのがsideがついているのでサイドバーやサイドエリアの記事に
つける要素と思いますが、正確にはsection内の記事を補足説明する文につける要素である。
一般書籍で専門用語に※がついていて、記事エリア外に※の説明が書かれている
所がまさにそれである。
header、footer要素
いままでdiv#headやdiv#footerとして記載していたのを
HTML5で正式にヘッダー[header]とフッター[footer]を指定。
ただし！header内に見出しh1要素を記述する際に
すこし凝ったヘッダーを作ろうと
header>h1{タイトル名}>section>....
ではなく、
header>secion>h1{タイトル名}
にしてしまうと、検索エンジンが見出しタグをサイト内の最重要キーワードかどうか
判断できなくなってしまう。
hgroup要素
複数の見出しh1〜h8を入れる要素。
見出し要素しか入れられないので、使用範囲が狭い。
fiqure要素
画像、図表など本文に付属される要素。
