Das neue HTML5
SEKTION Element kann etwas verwirrend sein. Wenn Sie HTML-Dokumente vor HTML5 erstellt haben, besteht die Möglichkeit, dass Sie das Element bereits verwenden, um strukturelle Gliederungen auf Ihren Seiten zu erstellen und die Seiten mit diesen zu gestalten. Es könnte also eine natürliche Sache sein, einfach das bestehende zu ersetzen
DIV Elemente mit
SEKTION Elemente. Das ist aber technisch falsch. Wenn Sie also nicht einfach ersetzen
DIV Elemente mit
SEKTION Elemente, wie verwenden Sie sie richtig?
Das SECTION-Element ist ein semantisches Element
Das erste, was zu verstehen ist, ist das
SEKTION Element ist ein semantisches Element. Dies bedeutet, dass sowohl Benutzeragenten als auch Menschen Informationen darüber erhalten, was der eingeschlossene Inhalt ist - insbesondere ein Abschnitt des Dokuments.
Dies kann wie eine sehr allgemeine semantische Beschreibung erscheinen, und zwar deshalb. Es gibt andere HTML5-Elemente, die Ihrem Inhalt mehr semantische Unterscheidungen bieten, die Sie zuerst verwenden sollten, bevor Sie das verwenden
SEKTION Element:
-
ARTIKEL
-
BEISEITE
-
NAV
Wann das SECTION Element verwendet wird
Verwenden Sie die
ARTIKEL Element, wenn der Inhalt ein unabhängiger Teil der Website ist, der für sich alleine stehen kann und wie ein Artikel oder ein Blogbeitrag syndiziert werden kann. Verwenden Sie die
BEISEITE Element, wenn der Inhalt entweder tangential mit dem Inhalt der Seite oder der Site selbst zusammenhängt, wie Seitenleisten, Anmerkungen, Fußnoten oder verknüpften Site-Informationen. Verwenden Sie die
NAV Element für den Inhalt der Navigation.
Das
SEKTION Element ist ein generisches semantisches Element. Sie verwenden es, wenn keines der anderen semantischen Containerelemente geeignet ist. Sie verwenden es, um Teile Ihres Dokuments in diskreten Einheiten zusammenzufassen, die Sie auf irgendeine Weise als miteinander verbunden beschreiben können. Wenn Sie die Elemente in diesem Abschnitt nicht in ein oder zwei Sätzen beschreiben können, sollten Sie das Element wahrscheinlich nicht verwenden.
Verwenden Sie stattdessen die
DIV Element. Das
DIV Element in HTML5 ist ein nicht semantisches Containerelement. Wenn der Inhalt, den Sie zu kombinieren versuchen, keine semantische Bedeutung hat, Sie ihn jedoch weiterhin für das Styling kombinieren müssen, dann klicken Sie auf
DIV Element ist das geeignete zu verwendende Element.
Wie das SECTION Element funktioniert
Ein Abschnitt Ihres Dokuments kann als äußerer Container für Artikel und angezeigt werden
BEISEITE Elemente. Es kann auch Inhalte enthalten, die nicht Teil von sind
ARTIKEL oder
BEISEITE. EIN
SEKTION Element kann auch in einem gefunden werden
ARTIKEL,
NAV, oder
BEISEITE. Sie können sogar Abschnitte verschachteln, um anzuzeigen, dass eine Inhaltsgruppe ein Abschnitt einer anderen Inhaltsgruppe ist, bei dem es sich um einen Abschnitt eines Artikels oder der gesamten Seite handelt.
Das
SEKTION Element erstellt Elemente in einer Gliederung des Dokuments. Als solches sollten Sie immer ein Kopfelement haben (
H1 durch
H6) als Teil des Abschnitts. Wenn Sie keinen Titel für den Abschnitt finden können, dann erneut die
DIV Element ist wahrscheinlich passender. Wenn Sie nicht möchten, dass der Abschnittstitel auf der Seite angezeigt wird, können Sie ihn immer mit CSS maskieren.
Wann darf das SECTION Element nicht verwendet werden?
Neben den oben genannten Hinweisen zur Verwendung der spezifischeren semantischen Elemente gibt es einen bestimmten Bereich, den Sie nicht verwenden sollten
SEKTION element: nur für style
Mit anderen Worten, wenn Sie ein Element nur an dieser Stelle platzieren, weil Sie CSS-Stileigenschaften verwenden, sollten Sie keine verwenden
SEKTION Element. Suchen Sie ein semantisches Element oder verwenden Sie die
Letztendlich spielt es keine Rolle
Eine Schwierigkeit beim Schreiben von semantischem HTML-Code besteht darin, dass das, was für mich semantisch ist, für Sie absolut unsinnig sein kann. Wenn Sie das Gefühl haben, können Sie die Verwendung der
SEKTION Element in Ihren Dokumenten, dann sollten Sie es verwenden. Die meisten Benutzeragenten interessieren sich nicht und zeigen die Seite so an, wie Sie es vielleicht erwarten, ob Sie einen Stil erstellen
DIV oder ein
SEKTION.
Für Designer, die semantisch korrekt sein möchten, verwenden Sie die
SEKTION Element auf semantisch gültige Weise ist wichtig. Für Designer, die nur wollen, dass ihre Seiten funktionieren, ist das nicht so wichtig. Wir sind der Meinung, dass das Schreiben von semantisch gültigem HTML-Code gute Praxis ist und die Seiten zukunftssicherer macht. Aber am Ende liegt es an dir.