Das SECTION-Element ist als semantischer Abschnitt einer Webseite oder Site definiert, der keinem anderen spezifischeren Typ wie ARTICLE oder ASIDE entspricht. Designer verwenden dieses Element häufig, wenn sie einen bestimmten Abschnitt der Seite markieren – einen ganzen Abschnitt, der verschoben und auf anderen Seiten oder Teilen der Site verwendet werden könnte. Es ist ein eigenständiger Inhalt.
Im Gegensatz dazu eignet sich das DIV-Element für Teile der Seite, die Sie zu anderen Zwecken aufteilen möchten als Semantik. Sie können beispielsweise einige Inhalte in ein DIV einschließen, um es mit CSS zu stylen. Es ist vielleicht kein semantischer Abschnitt des Inhalts, aber er ist getrennt, damit Sie ein gewünschtes Layout oder Gefühl erzielen können.
Es geht um Semantik
Der einzige Unterschied zwischen den Elementen DIV und SECTION ist die Semantik – die Bedeutung des Inhalts, den Sie aufteilen.
Jeder Inhalt, der in einem DIV-Element enthalten ist, hat keine inhärente Bedeutung. Es wird am besten für Dinge verwendet wie:
- CSS-Stile und Hooks für CSS-Stile
- Layout-Container
- JavaScript-Hooks
- Unterteilungen, die das Lesen von Inhalten oder HTML erleichtern
Das DIV-Element war früher das einzige Element, das zum Hinzufügen von Hooks zu Stildokumenten und Layouts verfügbar war. Vor HTML5 war die typische Webseite mit DIV-Elementen durchsetzt. Tatsächlich verwendeten einige WYSIWYG-Editoren ausschließlich das DIV-Element, manchmal anstelle von Absätzen.
HTML5 führte Abschnittselemente ein, die semantisch beschreibendere Dokumente erstellten und half, Stile für diese Elemente zu definieren.
Was ist mit dem SPAN-Element?
Ein weiteres häufiges nicht-semantisches Element ist SPAN. Es ist gebraucht im Einklang um Hooks für Stile und Skripte um Inhaltsblöcke (normalerweise Text) hinzuzufügen. In diesem Sinne ist es genau wie das DIV, aber es ist kein Blockelement. Stellen Sie sich das DIV als SPAN auf Blockebene vor und verwenden Sie es auf die gleiche Weise, jedoch für ganze Blöcke von HTML-Inhalten.
HTML hat kein vergleichbares Inline-Sectioning-Element.
Für ältere Versionen von Internet Explorer
Selbst wenn Sie wesentlich ältere Versionen von Microsofts Internet Explorer unterstützen, die HTML5 nicht zuverlässig erkennen, sollten Sie semantisch korrekte HTML-Tags verwenden. Die Semantik hilft Ihnen und Ihrem Team, die Seite in Zukunft zu verwalten. Die neuesten Versionen von Internet Explorer sowie sein Nachfolger Microsoft Edge erkennen HTML5.
Verwenden von DIV- und SECTION-Elementen
Sie können sowohl DIV- als auch SECTION-Elemente zusammen in einem gültigen HTML5-Dokument verwenden – SECTION, um semantisch getrennte Teile des Inhalts und DIV, um Hooks für CSS, JavaScript und Layout zu definieren Zwecke.
Originalartikel von Jennifer Krynin. Herausgegeben von Jeremy Girard am 15.03.17.