回答:
<section>
内部のコンテンツがグループ化されている(つまり、単一のテーマに関連している)ことを意味し、ページのアウトラインのエントリとして表示される必要があります。
<div>
一方、任意の意味を伝えないその中の任意FOUNDは別に、class
、lang
およびtitle
属性。
つまり、aを使用し<div>
ても、HTMLのセクションは定義されません。
スペックから:
<section>
<section>
要素は、文書やアプリケーションの一般的なセクションを表します。この文脈では、セクションはコンテンツのテーマ別グループです。それぞれsection
は、通常、<section>
要素の子として見出し(h1-h6要素)を含めることで識別されます。セクションの例としては、章、タブ付きダイアログボックスのさまざまなタブ付きページ、または論文の番号付きセクションがあります。Webサイトのホームページは、紹介、ニュース項目、連絡先情報のセクションに分割できます。
...
<section>
要素は、一般的なコンテナ要素ではありません。要素がスタイル設定の目的またはスクリプトの便宜のためだけに必要な場合、作成者は<div>
代わりに要素を使用することをお勧めします。一般的な規則は<section>
、要素のコンテンツがドキュメントのアウトラインに明示的にリストされている場合にのみ、要素が適切であることです。
(https://www.w3.org/TR/html/sections.html#the-section-element)
<div>
<div>
要素がすべてでは特別な意味を持ちません。それはその子を表します。、、および属性とともに使用してclass
、連続する要素のグループに共通のセマンティクスをマークアップできます。lang
title
注:
<div>
他の要素が適切でない場合のために、著者はその要素を最後の手段の要素と見なすことを強くお勧めします。要素の代わりに、より適切な要素を使用すると<div>
、読者のアクセシビリティが向上し、作成者の保守が容易になります。
(https://www.w3.org/TR/html/grouping-content.html#the-div-element)
section
vs についてもっと考えるとdiv
、これらはまったく同じ要素であるという結論に達しました。W3Cはdiv
「その子を表す」と述べています。さて、それもsection
要素が行うことではないでしょうか?はい、section
その子供は一緒にグループ化されることを意味しdiv
ますが、子供をの中に入れるという行為自体によって、あなたも彼らを一緒にグループ化します。少なくとも私のやり方では、君たちについては知らない。
section
vs についてもっと考えるdiv
」— それについてあまり考えないでください。HTMLは複雑ではありません。「子供たちをの中に入れるという行為そのものによってdiv
、あなたもそうです、彼らを一緒にグループ化します。」あなたがそうでないHTML仕様に従っていません。div
スタイリングの目的、JavaScriptの利便性、またはW3Cがまだ考慮していない他の何かでそれらをラップしていますが、子要素がグループであることを読者に示していません。
<p>This is a paragraph</p>
またはのように、HTMLの目的はテキストに意味を追加することです<h2>This is a second-level heading</h2>
。<div>
は意味を追加しないため、問題のテキストに適切な意味を追加する別のHTML要素がない場合にのみ使用します。
<div> Vs <Section>
<div>:
HTMLの 要素(またはHTML文書課の要素)が、本質的に何を表していないフローコンテンツのための一般的な容器です。(classまたはid属性を使用して)スタイル設定の目的で要素をグループ化したり、langなどの属性値を共有するために使用できます。他の意味要素(<article>
またはなど<nav>
)が適切でない場合にのみ使用してください。
<section>:
HTML Section要素は、( <section>
)通常の見出しで、文書の一般的な部分、すなわち、コンテンツのテーマ別のグループを表します。
<div>:
ブラウザのサポート
<section>:
ブラウザのサポート
表の番号は、要素を完全にサポートする最初のブラウザバージョンを示しています。
その意味では、divは純粋なCSSまたはDOMの観点からのみ関連しますが、セクションは意味論にも関連し、近い将来、検索エンジンによる索引付けにも関連します。
単なる観察-これを裏付けるドキュメントは見つかりませんでした
セクションに別のセクションが含まれている場合、内側のセクションのh1-headerは、外側のセクションのh1-headerよりも小さいフォントで表示されます。セクションの代わりにdivを使用すると、内側のdiv h1-headerがh1として表示されます。
<section>
<h1>Level1</h1>
some text
<section>
<h1>Level2</h1>
some more text
</section>
</section>
-Level2-ヘッダーは、Level1-ヘッダーよりも小さいフォントで表示されます。
cssを使用してh1ヘッダーを色付けすると、内側のh1も色付けされました(通常のh1として動作します)。これは、Firefox 18、IE 10、Chrome 28で同じ動作です。
HTML5標準では、<section>
要素は関連要素のブロックとして定義されています。
<div>
要素が子要素のブロックとして定義されます。
div要素の代わりにsectionタグを使いすぎないように注意してください。セクションタグのコンテキスト内で有意な領域を定義する必要があります体。意味論的には、HTML5はドキュメントを次のように定義することを推奨しています。
<html>
<head></head>
<body>
<header></header>
<section>
<h1></h1>
<div>
<span></span>
</div>
<div></div>
</section>
<footer></footer>
</body>
</html>
この戦略により、Webロボットと自動スクリーンリーダーがコンテンツのフローをよりよく理解できるようになります。このマークアップは、主要なページコンテンツが含まれる場所を明確に定義します。もちろん、ヘッダーとフッターは多くの場合、Webサイト内の何千ものページではなく、何百ものページに共通しています。セクション・タグは、ユニークなコンテンツが含まれている場所を説明するために、限定されるべきです。次に、セクションタグ内で、マークアップを続行し、h1、div、spanなどの階層の下位にあるHTMLタグでコンテンツを制御します。
ほとんどの単純なページでは、セクションタグは1つだけで、複数ではありません。セクションに類似した他の興味深いHTML5タグがあることも考慮してください。ドキュメントフロー内でarticle、summary、asideなどを使用することを検討してください。ご覧のとおり、これらのタグは、HTMLドキュメントの主要な領域を定義する機能をさらに強化します。
main
そこでタグを使用し、その中に1つ以上のsection
タグを使用します。
<div>
—私たち全員が知っており、愛している汎用フローコンテナー。これは追加のセマンティックな意味のないブロックレベルの要素です(W3C:Markup、WhatWG)
<section>
-一般的なドキュメントまたはアプリケーションセクション。通常、Aには見出し(タイトル)があり、フッターもある可能性があります。これは、長い記事のサブセクション、ページの主要な部分(ホームページのニュースセクションなど)、またはWebアプリケーションのタブ付きインターフェイスのページなど、関連するコンテンツのチャンクです。(W3C:Markup、WhatWG)
私の提案:div:古いバージョンを使用しました(4.01はまだだと思います)html要素(多くのデザイナーが処理しました)。セクション:最近の(html5)html要素。
セクションタグは、htmlのよりセマンティックな構文を提供します。divはセクションの汎用タグです。適切なコンテンツにセクションタグを使用すると、検索エンジンの最適化にも使用できます。セクションタグを使用すると、html解析も簡単になります。詳細については、参照してください。http://blog.whatwg.org/is-not-just-a-semantic
<section></section>
HTML
<section>
要素は、ドキュメントの一般的なセクション、つまりコンテンツのテーマ別グループを表し、通常は見出しが付いています。それぞれ<section>
は、通常、 要素の子として見出し(<h1>
-<h6>
要素)を含めることによって識別され<section>
ます。詳細は下記リンク先をご覧ください。
参照:
<div></div>
HTML
<div>
要素(またはHTML Document Division Element)は、フローコンテンツの一般的なコンテナーであり、本質的に何も表しません。(classまたはid属性を使用して)スタイル設定の目的で要素をグループ化したり、langなどの属性値を共有するために使用できます。他の意味要素(<article>
またはなど<nav>
)が適切でない場合にのみ使用してください。
参考文献: - http://www.w3schools.com/tags/tag_div.asp - https://developer.mozilla.org/en/docs/Web/HTML/Element/div
それらの違いについて詳しく説明しているリンクをいくつか次に示します。