Wenn HTML5 vor einigen Jahren in die Szene eindringt, fügte es der Sprache eine Reihe neuer Gliederungselemente hinzu, einschließlich derSEKTION Element. Die meisten der neuen Elemente, die HTML5 einführt, haben klare Verwendungen. Beispielsweise wird das Element zum Definieren von Artikeln und Hauptteilen einer Webseite verwendet, das Element wird zum Definieren von verwandten Inhalten verwendet, die für den Rest der Seite nicht kritisch sind, und Kopfzeile, Navi und Fußzeile sind ziemlich selbsterklärend. Das neu hinzugefügtSEKTION Element ist jedoch etwas weniger klar.
Viele Leute glauben, dass die HTML-Elemente SEKTION und sind eigentlich genau das Gleiche - generische Containerelemente, die verwendet werden, um Inhalte auf einer Webseite zu enthalten. Die Realität ist jedoch, dass diese beiden Elemente, obwohl beide Containerelemente sind, alles andere als generisch sind. Es gibt bestimmte Gründe, beide zu verwenden SEKTION Element und die DIV Element - und dieser Artikel wird diese Unterschiede erklären.
Abschnitte und Divs
Das SEKTION Element ist definiert als ein semantischer Abschnitt einer Webseite oder Website, der kein anderer spezifischerer Typ ist (wie Artikel oder beiseite). Ich neige dazu, dieses Element zu verwenden, wenn ich einen bestimmten Bereich der Seite markiere - einen Bereich, der großflächig verschoben und auf anderen Seiten oder Teilen der Website verwendet werden könnte. Es ist ein bestimmter Inhalt oder ein "Abschnitt" des Inhalts, wenn Sie so wollen.
Im Gegensatz dazu verwenden Sie die DIV Element für Teile der Seite, die Sie teilen möchten, jedoch nicht für Semantikzwecke. Ich würde einen Bereich mit Inhalt in eine Division einwickeln, wenn ich nur einen Haken für die Verwendung mit CSS habe. Es handelt sich möglicherweise nicht um einen bestimmten Abschnitt von Inhalten, der auf Semantik basiert, aber ich gebe mir das Diktieren, um das Layout zu erreichen, das ich für meine Seite möchte.
Es geht nur um Semantik
Dies ist ein schwer zu verstehendes Konzept, aber der einzige Unterschied zwischen dem DIV Element und die SEKTION Element ist Semantik. Mit anderen Worten, es ist die Bedeutung des Abschnitts des Codes, den Sie aufteilen
Jeder Inhalt, der in einem enthalten ist DIV Das Element hat keine inhärente Bedeutung. Es wird am besten für Dinge wie verwendet:
- CSS-Stile und Hooks für CSS-Stile
- Layout-Container
- JavaScript-Haken
- Abteilungen für das HTML, um das Lesen zu erleichtern
Das DIV Früher war das Element das einzige Element, das wir für das Hinzufügen von Haken zum Stilen unserer Dokumente und zum Erstellen von Spalten und ausgefallenen Layouts hatten. Aus diesem Grund landeten wir mit HTML, das durchgespielt wurde DIV Elemente - was können Webdesigner "Divitis" nennen. Es gab sogar WYSIWYG-Editoren, die die DIV Element ausschließlich. Ich bin eigentlich auf HTML gestoßen, das das verwendet DIV Element statt für Absätze!
Mit HTML5 können Abschnittselemente verwendet werden, um semantisch beschreibende Dokumente (für die Navigation und für beschreibende Figuren usw.) zu erstellen und die Stile für diese Elemente zu definieren.
Was ist mit dem SPAN-Element?
Das andere Element, an das die meisten Leute denken, wenn sie an das denken DIV Element ist das Element. Dieses Element mag DIVist kein semantisches Element. Mit diesem Inline-Element können Sie Hooks für Formatvorlagen und Skripts um Inline-Inhaltsblöcke (normalerweise Text) hinzufügen. In diesem Sinne ist es genau wie das DIV Element, nur Inline statt Blockelement. In mancher Hinsicht könnte es einfacher sein, an das zu denken DIV als Blockebene SPANNE Element und verwenden Sie es auf die gleiche Weise wie Sie würden SPANNE nur für ganze Blöcke von HTML-Inhalten.
In HTML5 gibt es kein vergleichbares Inline-Schnittelement.
Für ältere Versionen von Internet Explorer
Selbst wenn Sie erheblich ältere Versionen von IE (wie IE 8 und niedriger) unterstützen, die HTML5 nicht zuverlässig erkennen, sollten Sie keine Angst haben, semantisch korrekte HTML-Tags zu verwenden. Die Semantik wird Ihnen und Ihrem Team dabei helfen, die Seite in Zukunft zu verwalten (da Sie wissen, dass dieser Abschnitt der Artikel ist, wenn er von dem umgeben ist ARTIKEL Element). Außerdem unterstützen Browser, die diese Tags erkennen, diese besser.
Sie können weiterhin semantische HTML5-Abschnittselemente mit Internet Explorer verwenden. Sie müssen lediglich Skripts hinzufügen und möglicherweise einige Umgebungen DIV Elemente, damit sie die Tags als HTML erkennen.
Verwenden von DIV- und SECTION-Elementen
Wenn Sie sie richtig verwenden, können Sie beide verwenden DIV und SEKTION Elemente zusammen in einem gültigen HTML5-Dokument. Wie Sie hier in diesem Artikel gesehen haben, verwenden Sie die SEKTION Element, um semantisch diskrete Teile des Inhalts zu definieren, und Sie verwenden das DIV Element als Hooks für CSS und JavaScript sowie Definieren eines Layouts, das keine semantische Bedeutung hat.
Originalartikel von Jennifer Krynin. Bearbeitet von Jeremy Girard am 15.03.17
