Wann sollte das HTML5 SECTION-Element verwendet werden?

click fraud protection

Das neue HTML5 Sektion Element kann etwas verwirrend sein. Wenn Sie HTML-Dokumente vor HTML5 erstellt haben, verwenden Sie wahrscheinlich das Element bereits, um strukturelle Unterteilungen innerhalb Ihrer Seiten zu erstellen und dann die Seiten damit zu gestalten. Es mag also naheliegend sein, einfach Ihr vorhandenes zu ersetzen DIV Elemente mit Sektion Elemente. Aber das ist technisch falsch.

Das 'Abschnitt'-Element ist ein semantisches Element

Das SEKTION Element ist a semantisch Element; es gibt sowohl Benutzeragenten als auch Menschen Bedeutung darüber, was der eingeschlossene Inhalt ist – insbesondere ein Abschnitt des Dokuments.

Dies mag wie eine sehr allgemeine Beschreibung erscheinen, und das liegt daran, dass es so ist. Da sind andere HTML5-Elemente die Ihren Inhalten mehr semantische Unterscheidungen bieten, die Sie zuerst verwenden sollten, bevor Sie die Sektion Element:

  • Artikel
  • Beiseite
  • Navi

Wann sollte das Element 'Abschnitt' verwendet werden?

Verwenden Sie die Artikel

instagram viewer
-Element, wenn der Inhalt ein unabhängiger Teil der Website ist, der für sich allein stehen und wie ein Artikel oder ein Blogbeitrag syndiziert werden kann. Verwenden Sie die beiseite -Element, wenn der Inhalt tangential entweder mit dem Inhalt der Seite oder der Site selbst zusammenhängt, z. B. Seitenleisten, Anmerkungen, Fußnoten oder zugehörige Site-Informationen. Verwenden Sie die Navi -Element für Inhalte, die die Site-Navigation unterstützen.

Das Sektion element ist ein generisches semantisches Element. Verwenden Sie es, wenn keines der anderen semantischen Containerelemente geeignet ist. Es fasst Teile Ihres Dokuments in einzelne Einheiten zusammen, die Sie in irgendeiner Weise als verwandt beschreiben können. Wenn Sie die Elemente im 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 kombinieren möchten, keine semantische Bedeutung hat, Sie ihn aber dennoch für das Styling kombinieren müssen, dann ist die DIV element ist das geeignete Element.

So funktioniert das 'Abschnitt'-Element

Ein Abschnitt Ihres Dokuments kann als äußerer Container für Artikel erscheinen und beiseite Elemente. Es kann auch Inhalte enthalten, die nicht Teil eines Artikel oder beiseite. EIN Sektion Element kann auch in einem gefunden werden Artikel, Navi, oder beiseite. Sie können sogar Abschnitte verschachteln, um anzugeben, dass eine Inhaltsgruppe ein Abschnitt einer anderen Inhaltsgruppe ist, die ein Abschnitt eines Artikels oder der Seite als Ganzes ist.

Das Sektion -Element erstellt Elemente innerhalb einer Gliederung des Dokuments. Und als solches sollten Sie immer ein Header-Element haben (H1 durch H6) als Teil des Abschnitts. Wenn Sie keinen Titel für den Abschnitt finden können, DIV Element ist wahrscheinlich besser geeignet.

Wenn der Abschnittstitel nicht auf der Seite erscheinen soll, können Sie ihn jederzeit mit CSS maskieren.

Wann Sie das Element 'Abschnitt' nicht verwenden sollten

Es gibt einen Zweck, für den Sie das nicht verwenden sollten Sektion Element: nur für Stil.

Mit anderen Worten, wenn der einzige Grund, warum Sie ein Element an dieser Stelle platzieren, darin besteht, anzuhängen CSS-Stil Eigenschaften sollten Sie nicht a. verwenden Sektion Element. Finde einen semantisches Element oder benutze die DIV Element statt.

Letztendlich kann es egal sein

Eine Schwierigkeit beim Schreiben von semantischem HTML besteht darin, dass das, was für den Browser semantisch ist, für Sie völliger Unsinn sein kann. Wenn Sie der Meinung sind, dass Sie die Verwendung der rechtfertigen können Sektion Element in Ihren Dokumenten, dann sollten Sie es verwenden. Die meisten Benutzeragenten kümmern sich nicht darum und zeigen die Seite so an, wie Sie es erwarten könnten, egal ob Sie ein DIV oder ein Sektion.

Für Designer, die semantisch korrekt sein möchten, verwenden Sie die Sektion semantisch gültiges Element ist wichtig. Für Designer, die nur wollen, dass ihre Seiten funktionieren, ist das nicht so wichtig. Das Schreiben von semantisch gültigem HTML ist eine gute Praxis und hält die Seiten zukunftssicherer. Aber am Ende liegt es an dir.

instagram story viewer