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

Question

Was ist der Unterschied zwischen <section> y <div> sur HTML ?
Definieren wir nicht in beiden Fällen Abschnitte?

Answer 1

<section> bedeutet, dass der darin enthaltene Inhalt gruppiert ist (d. h. sich auf ein einziges Thema bezieht) und als Eintrag in einer Gliederung der Seite erscheinen sollte.

<div> auf der anderen Seite, keine Bedeutung vermittelt abgesehen von denen, die in seinem class , lang y title Attribute.

Also nein: die Verwendung einer <div> definiert keinen Abschnitt in HTML.

Aus der Spezifikation:

<section>

Le site <section> Element stellt einen generischen Abschnitt eines Dokuments oder einer Anwendung dar. Ein Abschnitt ist in diesem Zusammenhang eine thematische Gruppierung von Inhalten. Jeder section gekennzeichnet werden, in der Regel durch die Aufnahme einer Überschrift (Element h1-h6) als untergeordnetes Element der <section> Element.

Beispiele für Abschnitte wären Kapitel, die verschiedenen Registerseiten in einem Dialogfeld mit Registerkarten oder die nummerierten Abschnitte einer Dissertation. Die Homepage einer Website könnte in Abschnitte für eine Einleitung, Nachrichten und Kontaktinformationen unterteilt werden.

...

Le site <section> Element ist kein allgemeines Containerelement. Wenn ein Element nur für Styling-Zwecke oder als Bequemlichkeit für die Skripterstellung benötigt wird, wird den Autoren empfohlen, das <div> Element stattdessen. Als allgemeine Regel gilt, dass das <section> Element ist nur dann sinnvoll, wenn der Inhalt des Elements in der Gliederung des Dokuments explizit aufgeführt wird.

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

<div>

Le site <div> Element hat keine besondere Bedeutung. Es repräsentiert seine Kinder. Es kann mit dem Element class , lang und title Attribute, um die gemeinsame Semantik einer Gruppe von aufeinanderfolgenden Elementen zu kennzeichnen.

Anmerkung: Den Autoren wird dringend empfohlen, sich die <div> als Element der letzten Wahl, wenn kein anderes Element geeignet ist. Verwendung von geeigneteren Elementen anstelle des <div> Element führt zu einer besseren Zugänglichkeit für die Leser und einer leichteren Wartbarkeit für die Autoren.

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

Die Abschnitte sind vor allem für die Landmark-Navigation bei Hilfsmitteln relevant. Damit sie in der Gliederung des Dokuments oder in der Liste der Orientierungspunkte erscheinen, benötigen sie einen Namen, der mit Hilfe von aria-label , aria-labelledby ou title :

<section aria-labelledby="s3-h2">
  <h2 id="s3-h2">Introduction</h2>
  …

Zum Beispiel kann VoiceOver auf dem Mac dann eine Gliederung liefern, um direkt zu diesem Abschnitt zu navigieren.

Answer 2

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

Answer 3

Nur eine Beobachtung - ich habe keine Unterlagen gefunden, die dies bestätigen.

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

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

-- die Level2 - Überschrift wird in einer kleineren Schrift angezeigt als die Level1 - Überschrift.

Wenn Sie css verwenden, um h1 Kopfzeile zu färben, wurden die inneren h1 auch gefärbt (verhält sich wie normale h1). Es ist das gleiche Verhalten in Firefox 18, IE 10 und Chrome 28.

Answer 4

<div> Vs <Section>

Runde 1

<div>: Die HTML Element (oder HTML Document Division Element) ist der generische Container für Flow-Inhalte, der an sich nichts repräsentiert. Es kann verwendet werden, um Elemente für Styling-Zwecke zu gruppieren (unter Verwendung der class- oder id-Attribute) oder weil sie Attributwerte teilen, wie z. B. lang. Es sollte nur verwendet werden, wenn kein anderes semantisches Element (wie z.B. <article> ou <nav> ) angemessen ist.

<section>: Die HTML Abschnittselement ( <section> ) steht für einen allgemeinen Abschnitt eines Dokuments, d. h. eine thematische Gruppierung von Inhalten, in der Regel mit einer Überschrift.

---

Runde 2

<div>: Browser-Unterstützung

<section>: Browser-Unterstützung

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

In diesem Sinne ist ein div nur aus einer reinen CSS- oder DOM-Perspektive relevant, während ein Abschnitt auch für

Answer 5

Im HTML5-Standard wird die <section> Element ist als ein Block zusammengehöriger Elemente definiert.

Le site <div> Element ist als ein Block von Kinderelementen definiert.