<section>タグと<div>タグ

締切済

質問者：DMNVRASDFGU
質問日時：2014/10/25 23:21
回答数：2件

<section>タグと<div>タグはどう使い分ければいいのでしょうか？

どちらも、グループ分け・カテゴリー分けする際に使っています。

大グループは、<section>で分けて、その<section>で分けたグループを
さらに細分化してグループ化するときに<div>タグを使えばいいのでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2014/10/26 09:56

＞どちらも、グループ分け・カテゴリー分けする際に使っています。

判断基準はこれではない。

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 … )］より
簡単に訳すと
「他により適切な要素がないときの最後の最後の手段として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-sec … )］より
『その記事が、単独でも(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>が自然に入れられるような場合に使え

- 0
- 件

通報する

No.1

回答者： hitomura
回答日時：2014/10/26 00:46

section が使えるという事は HTML5 での話と考えてよろしいでしょうか。

> <section>で分けたグループをさらに細分化してグループ化する
場合でも、それが文章の構造上必要な細分化ならば section を使用します。

HTML5 では div を使用するのはまれなケースだと思ってください。
以下のページでは「文書中に於いてのセマンティクスを持たない単なるブロック要素が必要な場合などには <div> が適しています」と書かれています。しかし、文章を表現する際に、文章に対する意味を持たないただのブロック要素が出てくることはまれでしょう。文章に何らかのブロック要素が必要ならば、そのブロックな文章の中で何らかの意味があるはずです。
https://developer.mozilla.org/ja/docs/HTML/Eleme …

まず、そのブロックの意味を考えましょう。それを HTML5 で追加された article, nav, header
, footer, aside のいずれに当てはまるか考えましょう。
そして、上記のいずれにもあてはまらない、だけど文章構造上意味のあるものに section を割り当てます。上記の通り section の中に section を書いても問題はありません。
おそらくこの時点で残っているブロック要素は皆無のはずです。そういったしぶといものに対して初めて div を使ってください。