sectionとarticleの使い分け

質問

sectionはh1などの見出しをいれないといけないと聞きましたが、見出しになる場所にテキストを入れたくない（たとえば画像のみ）の場合はどうすればいいのでしょうか。
また何個かsectionでかこんだものがトータルでブログの記事だった場合それをarticleで囲むということなのでしょうか。
参考書を見てもsectionとarticleの使い分けがわかりません。
だれか教えてください。よろしくおねがいいたします。

回答No.2

Chaire · ベストアンサー

『見出しをいれないといけない』のではなく、section 要素からアウトラインを抽出するとき、各セクションに「必ず見出しが割り振られる」のです。もし見出し要素がなければ「見出しが未定義のセクション」として扱われます。

通常、「見出しが未定義のセクション」は不格好なので使いません。ただ、大きな意味段落をセクションのように扱い、小見出しも与えない、というケースは考えられなくはありません。この場合、アウトラインに「見出しが未定義のセクション」が並ぶことに注意して下さい。

とはいえ、ご質問にあるように『見出しになる場所に』『画像のみ』入れるなら、その画像が見出しを意味しているわけですから、h1 要素などを使うことができるはずです。言うまでもなく、img 要素を使うとき alt 属性が基本的に必須ですので、画像を見出しにすることは何ら問題ありません（HTML(5) では alt 属性を省略できますが、それは限られた場合だけです）。

<h6><img src="..." alt="アンパンマン号、発進！"></h6>

HTML(5) のセクションの説明なら、「アウトライン」に触れているものを探して下さい。アウトラインなくして HTML(5) のセクションは語れません。

article 要素は、署名と強く結び付いています。記事の文責が誰にあるかを示すのが address 要素です。

言い直すと、address 要素の有効範囲は、最も近い先祖である article 要素になります。「この article を書いたのは address である」となります。もし「最も近い先祖である article 要素」がなければ、address 要素の有効範囲は body 要素となります。

例えば、このような掲示板の場合、まずページ全体の文責が goo にあるとして article が 1 個できます（あるいは body）。各質問、各回答はそれぞれ文責者が異なりますので、それぞれが article になりえます。実用的な観点から言えば、記事をデータベースに格納する際、ひとまとめに扱える範囲のことです。

それだけです。それ以外の性質は section 要素と何ら変わりませんので、article 要素もアウトラインに載ります。

お礼

大変わかりやすく勉強になりましたありがとうございます。

回答No.1

ORUKA1951

sectionは、見出しをもつひとつの章,項,節などを表す要素です。
articleは、完結した文書の集合で内部にheader,section,footerなどを持ちます。
たとえば、
article
　header
　　h1
　section
　　　h1
　　　p
　　　section
　　　　　h2
　　　　　p
　　　article
　　　　header
　　　　section
　　　　footer
　　　article

とか、

　section内に見出しは基本的に入ります。検索エンジンなどはその節の見出しを取り出します。
　よって
　<section>
　　<h1><img src="" width="" height="" alt="このsectionの見出し"></h1>
とするべきです。
　文字を画像に置き換えて表現する!!は、HTML4.01の時代から名指しされて批判されてきました。
★14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )

怪しげな参考書より、W3Cの公式文書・仕様書を読むほうが確実です。
HTML5 における HTML4 からの変更点→新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )とそれぞれの説明(英文ですがサンプルもあるので理解できるでしょう。)を読んでください。
　邦訳は無くもありません。
★HTML 要素 - HTML5タグリファレンス - HTML5.JP ( http://www.html5.jp/tag/elements/index.html )

　HTML5では、予告どおりプレゼンテーションに関わる要素・属性が全廃され、HTMLは文書構造だけを記述する簡単なものになります。したがって
<section>
　<h2><span>見出し</span></h2>
としておいて、画像が見出しの背景なら、h2の見出しに背景を指定して、<span>を表示しなければ良いですね。
section h2{
background:url();
no-repeat;
width:240px;height:80px;
}
section h2 span{
visibility:hidden;
}
とね。

お礼

大変勉強になりましたありがとうございます。