Was ist der Unterschied zwischen <section> und <div>?

Antworten:

1037

<section> bedeutet, dass der Inhalt darin gruppiert ist (dh sich auf ein einzelnes Thema bezieht) und als Eintrag in einem Umriss der Seite angezeigt werden sollte.

<div>, Auf der anderen Seite, vermittelt keine Bedeutung , abgesehen von Festgestellte in seinen class, langund titleAttributen.

Also nein: Die Verwendung von a <div>definiert keinen Abschnitt in HTML.

Aus der Spezifikation:

<section>

Das <section>Element repräsentiert einen allgemeinen Abschnitt eines Dokuments oder einer Anwendung. Ein Abschnitt ist in diesem Zusammenhang eine thematische Gruppierung von Inhalten. Jedes sectionsollte identifiziert werden, typischerweise durch Einfügen einer Überschrift (h1-h6-Element) als untergeordnetes Element des <section>Elements.

Beispiele für Abschnitte sind Kapitel, die verschiedenen Registerkarten in einem Dialogfeld mit Registerkarten oder die nummerierten Abschnitte einer Arbeit. Die Homepage einer Website kann in Abschnitte für eine Einführung, Nachrichten und Kontaktinformationen unterteilt werden.

...

Das <section>Element ist kein generisches Containerelement. Wenn ein Element nur für Stylingzwecke oder als Annehmlichkeit für die Skripterstellung benötigt wird, wird den Autoren empfohlen, das <div>Element stattdessen zu verwenden. Eine allgemeine Regel lautet, dass das <section>Element nur dann geeignet ist, wenn der Inhalt des Elements explizit in der Gliederung des Dokuments aufgeführt wird.

( https://www.w3.org/TR/html/sections.html#the-section-element )

<div>

Das <div>Element hat überhaupt keine besondere Bedeutung. Es repräsentiert seine Kinder. Es kann mit dem verwendet werden class, langund titleAttributen Semantik gemeinsam mit einer Gruppe von aufeinanderfolgenden Elementen zu markieren.

Hinweis: Autoren wird dringend empfohlen, das <div>Element als Element des letzten Auswegs anzusehen, wenn kein anderes Element geeignet ist. Die Verwendung geeigneterer Elemente anstelle des <div>Elements führt zu einer besseren Zugänglichkeit für Leser und einer leichteren Wartbarkeit für Autoren.

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

Paul D. Waite
quelle
22
Wenn ich mehr über sectionvs. nachdenke div, auch angesichts dieser Antwort, bin ich zu dem Schluss gekommen, dass sie genau das gleiche Element sind. Das W3C sagt, ein div"repräsentiert seine Kinder". Ist das nicht auch das, was das sectionElement tut? Ja, sectionbedeutet , seine Kinder zusammen gruppiert sind, sondern durch den Akt von Kindern im Innern eines Putting div, sind Sie auch, ja, sie zusammen gruppieren . Zumindest so wie ich es mache, weiß ich nichts über euch.
Trysis
9
@trysis: "Mehr über sectionvs. divnachdenken" - denken Sie nicht zu viel darüber nach. HTML ist nicht kompliziert. "Indem Sie Kinder in ein Haus divstecken, gruppieren Sie sie auch, ja ." Nicht gemäß der HTML-Spezifikation sind Sie nicht. Sie verpacken sie divzu Stylingzwecken oder zur Bequemlichkeit von JavaScript oder in etwas anderes, an das das W3C noch nicht gedacht hat, aber den Lesern nicht anzeigt, dass die untergeordneten Elemente eine Gruppe sind.
Paul D. Waite
8
@ Matian2040: weil der Zweck von HTML darin besteht, Text eine Bedeutung zu verleihen, zum Beispiel <p>This is a paragraph</p>oder <h2>This is a second-level heading</h2>. Da es <div>keine Bedeutung hinzufügt, würden Sie es nur verwenden, wenn es kein anderes HTML-Element gibt, das dem betreffenden Text eine angemessene Bedeutung hinzufügt.
Paul D. Waite
7
Es gibt also keinen einzigen Vorteil bei der Verwendung von Abschnitten? lol, warum existiert es dann überhaupt?!
Schwarz
14
@EdwardBlack: Es vermittelt eine andere Bedeutung als andere Tags. Sinn vermitteln ist der ganze Sinn von HTML.
Paul D. Waite
71

<section>Markiert einen Abschnitt , <div>markiert einen generischen Block ohne zugehörige Semantik.

QUentin
quelle
@ MarwenTrabelsi - Der Link ist nicht tot. "Abschnitt" ist ein englisches Standardwort. Wörterbücher sind verfügbar.
Quentin
@MarwenTrabelsi - Die Begriffe, die Sie "abstrakt und breit" nennen, sind die Hauptunterschiede.
Quentin
64

<div> Vs <Section>

Runde 1

<div>:Das HTML- Element (oder HTML Document Division Element) ist der generische Container für Flow-Inhalte, der von Natur aus nichts darstellt. Es kann verwendet werden, um Elemente für Stilzwecke zu gruppieren (unter Verwendung der Klassen- oder ID-Attribute) oder weil sie Attributwerte wie lang gemeinsam nutzen. Es sollte nur verwendet werden, wenn kein anderes semantisches Element (wie <article>oder <nav>) geeignet ist.

<section>:Das HTML Section-Element ( <section>) stellt einen generischen Abschnitt eines Dokuments dar, dh eine thematische Gruppierung von Inhalten, normalerweise mit einer Überschrift.

Runde 2

<div>: Browser-Unterstützung Geben Sie hier die Bildbeschreibung ein

<section>: Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die das Element vollständig unterstützt. Geben Sie hier die Bildbeschreibung ein

In diesem Sinne ist ein div nur aus einer reinen CSS- oder DOM-Perspektive relevant, während ein Abschnitt auch für die Semantik und in naher Zukunft für die Indizierung durch Suchmaschinen relevant ist.

Subodh Ghulaxe
quelle
10
Browserunterstützung ist hier kein Problem, es geht um Semantik. Wenn Sie HTML5 verwenden, verwenden Sie wahrscheinlich trotzdem eine Polyfüllung.
Jack Tuck
@ JackTuck Und was ist, wenn Sie solche Kludges nicht verwenden möchten?
Herr Lister
49

Nur eine Beobachtung - ich habe keine Dokumentation gefunden, die dies bestätigt

Wenn ein Abschnitt einen anderen Abschnitt enthält, wird ein h1-Header im inneren Abschnitt in einer kleineren Schrift angezeigt als ein h1-Header im äußeren Abschnitt. Bei Verwendung von div anstelle von section wird der innere div h1-Header als h1 angezeigt.

<section>
  <h1>Level1</h1>
  some text
  <section>
    <h1>Level2</h1>
    some more text
  </section>
</section>

- Der Level2 - Header wird in einer kleineren Schrift als der Level1 - Header angezeigt.

Bei Verwendung von CSS zum Färben des h1-Headers wurden auch die inneren h1 gefärbt (verhält sich wie normales h1). Dies ist das gleiche Verhalten in Firefox 18, IE 10 und Chrome 28.

runec
quelle
1
Wie seltsam ... hat einen schnellen Stackblitz erstellt, um dies zu demonstrieren, da es immer noch eine Sache ist. Stackblitz.com/edit/angular-h1ayez
Gavin Mannion
24

Im HTML5-Standard wird das <section>Element als Block verwandter Elemente definiert.

Das <div>Element ist als Block von untergeordneten Elementen definiert.

srikanth_k
quelle
Ich weiß nicht, warum jemand dies notiert hat. Kurz, süß und auch der Punkt.
user6031759
1
-1 Es macht keinen Sinn, wie Sie verwandte Elemente im hierarchischen Strukturdokument (XML / HTML) gruppieren möchten. Sie können nur Blöcke von untergeordneten Elementen mit einem beliebigen Tag gruppieren.
Svisstack
@Svisstack Sie haben Recht, dass jedes einschließende Tag (dh nicht selbstschließend / nichtig) Blöcke von untergeordneten Elementen gruppieren kann. Obwohl ich denke, dass dies mehr in die Beziehung der Kinder einfließt. Haben sie alle einen verwandten Kontext zu vermitteln? Beispiel: Ein Formular mit mehreren Eingaben wird aus Gründen der Funktionalität / des Stils zusammengefasst. Dieses Formular ist jedoch kein Abschnitt der Website, sondern ein Teil mit einer Funktion. Angenommen, Ihre Seite hat ein Produkt beschrieben. Verschiedene Teile des Produkts würden in einem Abschnittselement aufgeführt, da die Elemente eine kollektive Idee vermitteln.
Xandor
20

Achten Sie darauf, das Abschnitts- Tag nicht als Ersatz für ein div- Element zu verwenden. Ein Abschnitts- Tag sollte einen signifikanten Bereich im Kontext des Körpers definieren . Semantisch ermutigt uns HTML5, unser Dokument wie folgt zu definieren:

<html>
<head></head>
<body>
    <header></header>
    <section>
        <h1></h1>
        <div>
            <span></span>
        </div>
        <div></div>
    </section>
    <footer></footer>
</body>
</html>
Erweitern Sie das Snippet

Diese Strategie ermöglicht es Web-Robotern und automatisierten Screenreadern, den Fluss Ihrer Inhalte besser zu verstehen. Dieses Markup definiert klar, wo der Inhalt Ihrer Hauptseite enthalten ist. Natürlich sind Kopf- und Fußzeilen häufig auf Hunderten, wenn nicht Tausenden von Seiten innerhalb einer Website üblich. Das Abschnitts- Tag sollte begrenzt werden, um zu erklären, wo der eindeutige Inhalt enthalten ist. Innerhalb des Abschnitts- Tags sollten wir dann den Inhalt weiterhin mit HTML-Tags markieren und steuern, die in der Hierarchie niedriger sind, wie z. B. h1 , div , span usw.

In den meisten einfachen Seiten sollte es nur ein einzelnes Abschnitts- Tag geben, nicht mehrere. Bitte beachten Sie auch, dass es andere interessante HTML5-Tags gibt, die dem Abschnitt ähnlich sind . Erwägen Sie die Verwendung von Artikeln , Zusammenfassungen , Seiten und anderen Elementen in Ihrem Dokumentfluss. Wie Sie sehen können, verbessern diese Tags unsere Fähigkeit, die Hauptbereiche des HTML-Dokuments zu definieren.

KoolWebDezign
quelle
"Auf den meisten einfachen Seiten sollte es nur ein einziges Abschnitts-Tag geben". Können Sie ein nicht einfaches Beispiel geben, bei dem Sie mehrere Abschnitts-Tags auf einer einzelnen Seite verwenden möchten?
Styfle
7
Ich würde das mainTag dort verwenden und darin ein oder mehrere sectionTags.
Chazy Chaz
10

<div>- der generische Durchflussbehälter, den wir alle kennen und lieben. Es ist ein Element auf Blockebene ohne zusätzliche semantische Bedeutung (W3C: Markup, WhatWG)

<section>- Ein allgemeiner Dokument- oder Anwendungsabschnitt. A hat normalerweise eine Überschrift (Titel) und vielleicht auch eine Fußzeile. Es handelt sich um einen Teil verwandter Inhalte, z. B. einen Unterabschnitt eines langen Artikels, einen Großteil der Seite (z. B. den Nachrichtenbereich auf der Startseite) oder eine Seite in der Oberfläche einer Webanwendung mit Registerkarten. (W3C: Markup, WhatWG)

Mein Vorschlag: div: verwendete niedrigere Version (ich denke 4.01 bis still) HTML-Element (viele Designer haben das erledigt). Abschnitt: Kürzlich kommendes (html5) HTML-Element.

anglimasS
quelle
9

Das Section-Tag bietet eine semantischere Syntax für HTML. div ist ein generisches Tag für einen Abschnitt. Wenn Sie das Abschnitts-Tag für den entsprechenden Inhalt verwenden, kann es auch zur Suchmaschinenoptimierung verwendet werden. Das Abschnitts-Tag erleichtert auch das Parsen von HTML. Weitere Informationen finden Sie unter. http://blog.whatwg.org/is-not-just-a-semantic

pooamlairaj
quelle
1
"Section Tag macht es auch einfach für das Parsen von HTML" - wie? Meinen Sie damit, einen Umriss der Seite zu generieren?
Paul D. Waite
7

Die Verwendung <section>kann sauberere , Hilfe Screenreadern und SEO während <div>ist in Bytes kleinen und schnellen Typ

Insgesamt sehr wenig Unterschied.

Auch würde nicht empfehlen, <section>ein <section>, sondern ein <div>in ein zu setzen<section>

drooh
quelle
3

Hier ist ein Tipp, wie ich einige neuere HTML5-Elemente im Fall einer Webanwendung (rein subjektiv) unterscheide.

<section>markiert ein Widget in einer grafischen Benutzeroberfläche, während <div>der Container der Komponenten eines Widgets wie ein Container mit einer Schaltfläche und einer Beschriftung usw. ist.

<article> gruppiert Widgets, die einen gemeinsamen Zweck haben.

<header> ist Titel und Menüleiste.

<footer> ist die Statusleiste.

Kaan E.
quelle
1

Das <section>Tag definiert Abschnitte in einem Dokument, z. B. Kapitel, Kopf- und Fußzeilen oder andere Abschnitte des Dokuments.

wohingegen:

Das <div>Tag definiert eine Abteilung oder einen Abschnitt in einem HTML-Dokument.

Das <div>Tag wird verwendet, um Blockelemente zu gruppieren, um sie mit CSS zu formatieren.

Jeeves
quelle
2
Kopf- und Fußzeilen sowie andere Abschnitte des Dokuments haben ihre eigenen semantischen Tags. ( <header>, <footer>, <nav>, <article>Etc.)
Oliver
1

<section></section>

Das HTML- <section>Element stellt einen allgemeinen Abschnitt eines Dokuments dar, dh eine thematische Gruppierung von Inhalten, normalerweise mit einer Überschrift. Jedes <section>sollte identifiziert werden, normalerweise durch Einfügen einer Überschrift ( <h1>- <h6>Element) als untergeordnetes <section> Element des Elements. Für Details folgen Sie bitte dem Link.

Verweise :

<div></div>

Das HTML- <div>Element (oder HTML Document Division Element) ist der generische Container für Flow-Inhalte, der von Natur aus nichts darstellt. Es kann verwendet werden, um Elemente für Stilzwecke zu gruppieren (unter Verwendung der Klassen- oder ID-Attribute) oder weil sie Attributwerte wie lang gemeinsam nutzen. Es sollte nur verwendet werden, wenn kein anderes semantisches Element (wie <article>oder <nav>) geeignet ist.

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

Hier sind einige Links, die mehr über die Unterschiede zwischen ihnen diskutieren:

Asad Ali
quelle