web-dev-qa-db-ja.com

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

HTMLの<section>と<div>の違いは何ですか？どちらの場合もセクションを定義しませんか。

html5html
794
Simplicity

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

<div>、一方、意味を伝えません _、そのclass、lang、およびtitle属性にあるものは別として.

いいえ、<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 ）

927
Paul D. Waite

<section>は section をマークアップし、<div>は関連する意味を持たない総称ブロックをマークアップします。

72
Quentin

<div> Vs <Section>

ラウンド1

<div>:_ html _ 要素（またはHTML文書部要素）は、フローコンテンツの汎用コンテナです。本質的には何も表しません。これは、スタイルを設定する目的（class属性またはid属性を使用）、またはlangなどの属性値を共有するために要素をグループ化するために使用できます。他のセマンティック要素（<article>や<nav>など）が適切でない場合にのみ使用してください。

<section>:_ html _ Section要素（<section>）は、ドキュメントの一般的なセクション、つまり内容をテーマ別にまとめたもの、通常は見出し付きです。

ラウンド2

<div>: ブラウザのサポート  enter image description here

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

表内の数字は、その要素を完全にサポートする最初のブラウザのバージョンを示しています。 enter image description here

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

59
Subodh Ghulaxe

ただの観察 - これを裏付けるいかなる文書も見当たらない

セクションに別のセクションが含まれている場合、内側のセクションのh1ヘッダーは外側のセクションのh1ヘッダーよりも小さいフォントで表示されます。 sectionの代わりに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でも同じ動作です。

37
runec

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

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

19
srikanth_k

div 要素の代わりに section タグを使いすぎないように注意してください。 section タグは body の文脈の中で重要な領域を定義するべきです。意味的には、HTML5は私達に私達の文書を次のように定義することを勧めています：

<html>
<head></head>
<body>
    <header></header>
    <section>
        <h1></h1>
        <div>
            <span></span>
        </div>
        <div></div>
    </section>
    <footer></footer>
</body>
</html>

この戦略により、Webロボットや自動スクリーンリーダーは、コンテンツの流れをよりよく理解することができます。このマークアップは、あなたの主要なページコンテンツがどこに含まれるかを明確に定義します。もちろん、ヘッダーとフッターはWebサイト内の何千ものページではないにしても、何百ものページで共通することがよくあります。 section タグは、一意のコンテンツが含まれる場所を説明するために限定されるべきです。 section タグ内では、 h1 、 div 、 span などのように、階層の下位にあるHTMLタグを使用してコンテンツをマークアップして制御する必要があります.

ほとんどの単純なページでは、複数のタグではなく、単一の section タグだけが必要です。また、 section に似た他の興味深いHTML5タグがあることも考慮してください。文書フロー内で article 、 summary 、 aside などを使用することを検討してください。ご覧のとおり、これらのタグによって、HTMLドキュメントの主要領域を定義する機能がさらに強化されています。

12
KoolWebDezign

<div>—私たち全員が知っていて愛している一般的なフローコンテナ。これは追加の意味を持たないブロックレベルの要素です（W3C：Markup、WhatWG）

<section> - 一般的なドキュメントまたはアプリケーションのセクション。 Aには通常見出し（タイトル）があり、おそらくフッターもあります。長い記事の一部、ページの大部分（ホームページのニュースセクションなど）、Webアプリケーションのタブ付きインターフェイスのページなど、関連するコンテンツがたくさんあります。 （W3C：マークアップ、WhatWG）

私の提案：div：html要素（多くのデザイナーがそれを扱っていました）を使用していました。 section：最近やってくる（html5）html要素。

10
anglimasS

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

9
pooamlairaj

<section>の使用は より適切 、help スクリーンリーダー および _ seo _ は<div>は バイト数の減少 および 入力の迅速化

全体的に非常に小さな違い。

また、<section>を<section>に入れることをお勧めしません。代わりに<div>を<section>の内側に配置してください。

5
drooh

<section>タグは、チャプター、ヘッダー、フッター、またはドキュメントの他のセクションなど、ドキュメント内のセクションを定義します。

一方：

<div>タグは、HTML文書内の部門またはセクションを定義します。

<div>タグは、ブロック要素をCSSでフォーマットするためにグループ化するために使用されます。

1
Jeeves

ここでは、Webアプリケーションの場合に最近のhtml5要素をいくつか区別する方法について説明します（純粋に主観的）。

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

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

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

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

1
Kaan E.

<section></section>

ＨＴＭＬの<section>要素は、文書の一般的なセクション、すなわち典型的には見出しを有する内容の主題のグループ化を表す。それぞれの<section>は、通常は<h1>要素の子として見出し（<h6>-<section>要素）を含めることによって識別する必要があります。詳細は下記リンクをご覧ください。

参考文献：

<div></div>

HTMLの<div>要素（またはHTML Document Division要素）は、フローコンテンツの汎用コンテナです。これは本質的には何も表しません。これは、スタイルを設定する目的（class属性またはid属性を使用）、またはlangなどの属性値を共有するために要素をグループ化するために使用できます。他のセマンティック要素（<article>や<nav>など）が適切でない場合にのみ使用してください。

参照先： - http://www.w3schools.com/tags/tag_div.asp - https://developer.mozilla.org/en/docs/Web/HTML/Element/div

これらの違いについてもっと議論するリンクがいくつかあります：

1
Asad Ali