<section>と<div>の違いは何ですか?


回答:


1037

<section> 内部のコンテンツがグループ化されている(つまり、単一のテーマに関連している)ことを意味し、ページのアウトラインのエントリとして表示される必要があります。

<div>一方、任意の意味を伝えないその中の任意FOUNDは別に、classlangおよび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、連続する要素のグループに共通のセマンティクスをマークアップできます。langtitle

注:<div>他の要素が適切でない場合のために、著者はその要素を最後の手段の要素と見なすことを強くお勧めします。要素の代わりに、より適切な要素を使用すると<div>、読者のアクセシビリティが向上し、作成者の保守が容易になります。

https://www.w3.org/TR/html/grouping-content.html#the-div-element


22
この回答も含めて、sectionvs についてもっと考えるとdiv、これらはまったく同じ要素であるという結論に達しました。W3Cはdiv「その子を表す」と述べています。さて、それもsection要素が行うことではないでしょうか?はい、sectionその子供は一緒にグループ化されることを意味しdivますが、子供をの中に入れるという行為自体によって、あなたも彼らを一緒グループ化します。少なくとも私のやり方では、君たちについては知らない。
トリシス2014

9
@trysis:「sectionvs についてもっと考えるdiv」— それについてあまり考えないでください。HTMLは複雑ではありません。「子供たちをの中に入れるという行為そのものによってdiv、あなたもそうです、彼らを一緒グループ化します。」あなたがそうでないHTML仕様に従っていません。divスタイリングの目的、JavaScriptの利便性、またはW3Cがまだ考慮していない他の何かでそれらをラップしていますが、子要素がグループであることを読者に示していません。
ポールD.ウェイト2014

8
@ Matian2040:<p>This is a paragraph</p>またはのように、HTMLの目的はテキストに意味を追加することです<h2>This is a second-level heading</h2><div>は意味を追加しないため、問題のテキストに適切な意味を追加する別のHTML要素がない場合にのみ使用します。
ポールD.ウェイト

7
セクションを使用する場合、単一の利点はありませんか?笑、なぜそれが存在するのですか?
ブラック

14
@EdwardBlack:他のタグとは異なる意味を伝えます。意味を伝えることがHTMLの要点です。
ポールD.ウェイト

71

<section>アップマークのセクション<div>無関連するセマンティクスを持つ一般的なブロックアップマーク。


@MarwenTrabelsi —リンクは死んでいません。「セクション」は標準的な英語の単語です。辞書があります。
Quentin、

@MarwenTrabelsi -あなたは「抽象的で広い」と呼ん用語は、ある重要な違い。
Quentin、

64

<div> Vs <Section>

ラウンド1

<div>:HTMLの 要素(またはHTML文書課の要素)が、本質的に何を表していないフローコンテンツのための一般的な容器です。(classまたはid属性を使用して)スタイル設定の目的で要素をグループ化したり、langなどの属性値を共有するために使用できます。他の意味要素(<article>またはなど<nav>)が適切でない場合にのみ使用してください。

<section>:HTML Section要素は、( <section>)通常の見出しで、文書の一般的な部分、すなわち、コンテンツのテーマ別のグループを表します。


ラウンド2

<div>: ブラウザのサポート ここに画像の説明を入力してください

<section>: ブラウザのサポート

表の番号は、要素を完全にサポートする最初のブラウザバージョンを示しています。 ここに画像の説明を入力してください

その意味では、divは純粋なCSSまたはDOMの観点からのみ関連しますが、セクションは意味論にも関連し、近い将来、検索エンジンによる索引付けにも関連します。


10
ブラウザのサポートはここでは問題ではなく、意味論についてです。HTML5を使用している場合は、とにかくポリフィルを使用することになります。
Jack Tuck

@JackTuckそして、もしあなたがそのようなクラッジを使いたくないとしたらどうでしょう?
Lister氏、2015年

49

単なる観察-これを裏付けるドキュメントは見つかりませんでした

セクションに別のセクションが含まれている場合、内側のセクションの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で同じ動作です。


1
どのように非常に奇妙な...それはまだ事だとしてこれをデモするために迅速なstackblitzを作成stackblitz.com/edit/angular-h1ayez
ギャビン・マニオン

24

HTML5標準では、<section>要素は関連要素のブロックとして定義されています。

<div>要素が子要素のブロックとして定義されます。


なぜ誰かがこれをマークダウンしたのかはわかりません。短く、甘い、そして要点。
user6031759 2016年

1
-1意味がありません。階層構造ドキュメント(XML / HTML)で関連する要素をどのようにグループ化するか、タグを使用して子要素のブロックのみをグループ化できます。
Svisstack

@Svisstack囲みタグ(つまり、自己終了/無効ではない)が子要素のブロックをグループ化できることは正しいです。これは、子供たちの関係についてもっと理解していると思いますが。それらはすべて関連するコンテキストを持っていますか?たとえば、いくつかの入力を含むフォームは、機能/スタイル設定の理由でグループ化されます。しかし、このフォームはウェブサイトのセクションではなく、機能を持つ部分です。あなたのページが製品を説明していたとしましょう。要素は集合的なアイデアを伝えるため、製品に関するさまざまなパーツがセクション要素にリストされます。
Xandor

20

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サイト内の何千ものページではなく、何百ものページに共通しています。セクション・タグは、ユニークなコンテンツが含まれている場所を説明するために、限定されるべきです。次に、セクションタグ内で、マークアップを続行し、h1divspanなどの階層の下位にあるHTMLタグでコンテンツを制御します。

ほとんどの単純なページでは、セクションタグは1つだけで、複数ではありません。セクションに類似した他の興味深いHTML5タグがあることも考慮してください。ドキュメントフロー内でarticlesummaryasideなどを使用することを検討してください。ご覧のとおり、これらのタグは、HTMLドキュメントの主要な領域を定義する機能をさらに強化します。


「ほとんどの単純なページでは、セクションタグは1つだけです」1つのページで複数のセクションタグを使用する簡単な例を挙げられますか?
スタイフル2017年

7
私はmainそこでタグを使用し、その中に1つ以上のsectionタグを使用します。
Chazy Chaz 2017

10

<div>—私たち全員が知っており、愛している汎用フローコンテナー。これは追加のセマンティックな意味のないブロックレベルの要素です(W3C:Markup、WhatWG)

<section>-一般的なドキュメントまたはアプリケーションセクション。通常、Aには見出し(タイトル)があり、フッターもある可能性があります。これは、長い記事のサブセクション、ページの主要な部分(ホームページのニュースセクションなど)、またはWebアプリケーションのタブ付きインターフェイスのページなど、関連するコンテンツのチャンクです。(W3C:Markup、WhatWG)

私の提案:div:古いバージョンを使用しました(4.01はまだだと思います)html要素(多くのデザイナーが処理しました)。セクション:最近の(html5)html要素。


9

セクションタグは、htmlのよりセマンティックな構文を提供します。divはセクションの汎用タグです。適切なコンテンツにセクションタグを使用すると、検索エンジンの最適化にも使用できます。セクションタグを使用すると、html解析も簡単になります。詳細については、参照してください。http://blog.whatwg.org/is-not-just-a-semantic


1
「セクションタグを使用すると、html解析も簡単になります」—ええ?ページのアウトラインを生成するという意味ですか?
ポールD.ウェイト2011

7

使用し<section>てもよいすっきり、ヘルプスクリーンリーダーSEOつつ<div>あるバイトが小さく且つ迅速タイプ

全体的にほとんど違いはありません。

また、入れてお勧めしません<section><section>置く代わりに、<div>内部にAを<section>


3

これは、Webアプリケーション(純粋に主観的)の場合に、最近のhtml5要素をどのように区別するかに関するヒントです。

<section>は、グラフィカルユーザーインターフェイスでウィジェットにマークを付けますが、ウィジェット<div>のコンポーネントのコンテナーは、ボタンを保持するコンテナーやラベルなどのコンテナーです。

<article> 目的を共有するウィジェットをグループ化します。

<header> タイトルとメニューバーです。

<footer> ステータスバーです。


1

<section>タグは、章、ヘッダ、フッタ、または文書の他のセクションとして文書のセクションを定義します。

一方:

<div>タグは、分割またはHTMLドキュメント内のセクションを定義します。

<div>タグは、CSSでそれらの書式を設定するためにグループ・ブロック要素に使用されます。


2
ドキュメントのヘッダー、フッター、およびその他のセクションには、独自のセマンティックタグがあります。(<header><footer><nav><article>など)
オリバー

1

<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


それらの違いについて詳しく説明しているリンクをいくつか次に示します。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.