締切済み

<section>タグと<div>タグ

2014/10/25 23:21

<section>タグと<div>タグはどう使い分ければいいのでしょうか？どちらも、グループ分け・カテゴリー分けする際に使っています。大グループは、<section>で分けて、その<section>で分けたグループをさらに細分化してグループ化するときに<div>タグを使えばいいのでしょうか？

DMNVRASDFGU
お礼率72% (26/36)

HTML
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/10/26 09:56 回答No.2

＞どちらも、グループ分け・カテゴリー分けする際に使っています。　判断基準はこれではない。 HTML5では、常に文書のアウトラインを考えます。　簡単に言うと機械(コンピューター)が自動的に目次を作ると考える。　典型的なHTML構文で解説すると <body> 　<header> 　　<h1>ページタイトル</h1> 　　<nav>ナビゲーション(headerにあるので多分グローバル</nav> 　</header> 　<section> 　　<h2>本文見出し</h2> 　　<section> 　　　<h3>章見出し</h3> 　　　 　　　<p>記事</p> 　　　<aside>このsectionと直接関係しない補足記事</aside> 　　</section> 　　<section> 　　　<h3>章見出し</h3> 　　　<p>記事</p> 　　　<article> 　　　　 　　　　<header></header> 　　　　<section></section> 　　　　<footer></footer> 　　　</article> 　　</section> 　　<nav id="content Table">目次</nav> 　　<aside> 　　　このsectionとは直接関係ない記事　　</aside> 　</section> 　<footer> 　</footer> </body> DIVに関しては、【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから NOTE: Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.4 Grouping content — HTML5( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )］より簡単に訳すと「他により適切な要素がないときの最後の最後の手段としてdiv要素を使用することが強く推奨される。div要素よりも適切な要素を使うことで、読者のためにはより良いアクセシビリティを、作家にとってはメンテナンスの向上につながる。」　一方sectionについては、【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから NOTE: Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element. NOTE: The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.3 Sections — HTML5( http://www.w3.org/TR/html5/sections.html#the-section-element )］より『その記事が、単独でも(header,section,footeを持っているような)脈絡・組織的?)な場合はarticleを使うべき』『section、(DIVのような)一般的なコンテナ要素ではありません。単にスタイリングの目的のためやスクリプトの便宜のために必要なときはは、div要素を使うことが奨励される。』　この二つを読み比べると、sectionとdivの使い分けが分かると思います。 sectionを使用するポイントは、The section element | HTML5 Doctor( http://html5doctor.com/the-section-element/ )にとても良い解説がある。・スタイリングやスクリプティングのフックのためだけに使うな。　　それには div を使うこと。・article, aside, nav などがより適切な場合には使うな。・sectionには、入れようと思えば見出し<h1>～<h6>が自然に入れられるような場合に使え

hitomura
ベストアンサー率48% (325/664)

2014/10/26 00:46 回答No.1

section が使えるという事は HTML5 での話と考えてよろしいでしょうか。 > <section>で分けたグループをさらに細分化してグループ化する場合でも、それが文章の構造上必要な細分化ならば section を使用します。 HTML5 では div を使用するのはまれなケースだと思ってください。以下のページでは「文書中に於いてのセマンティクスを持たない単なるブロック要素が必要な場合などには <div> が適しています」と書かれています。しかし、文章を表現する際に、文章に対する意味を持たないただのブロック要素が出てくることはまれでしょう。文章に何らかのブロック要素が必要ならば、そのブロックな文章の中で何らかの意味があるはずです。 https://developer.mozilla.org/ja/docs/HTML/Element/section まず、そのブロックの意味を考えましょう。それを HTML5 で追加された article, nav, header , footer, aside のいずれに当てはまるか考えましょう。そして、上記のいずれにもあてはまらない、だけど文章構造上意味のあるものに section を割り当てます。上記の通り section の中に section を書いても問題はありません。おそらくこの時点で残っているブロック要素は皆無のはずです。そういったしぶといものに対して初めて div を使ってください。