Was ist der Unterschied zwischen <section>und <div>in HTML?
Definieren wir nicht in beiden Fällen Abschnitte?
Antworten:
<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. Jedessectionsollte 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 werdenclass,langundtitleAttributen 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 )
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.
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.
<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.
<section>Markiert einen Abschnitt , <div>markiert einen generischen Block ohne zugehörige Semantik.
<div> Vs <Section><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.
<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 die Semantik und in naher Zukunft für die Indizierung durch Suchmaschinen relevant ist.
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.
Im HTML5-Standard wird das <section>Element als Block verwandter Elemente definiert.
Das <div>Element ist als Block von untergeordneten Elementen definiert.
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>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.
mainTag dort verwenden und darin ein oder mehrere sectionTags.
<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.
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
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.
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.
<header>, <footer>, <nav>, <article>Etc.)
<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: