W3docs
de
Anmelden

HTML <section>-Tag

The <section> tag is used to create standalone page sections. Tag description and examples of using.

Das HTML <section>-Element ist eines der HTML5-Elemente. Es wird verwendet, um eigenständige Abschnitte innerhalb einer Webseite zu erstellen, die logisch zusammenhängende Inhalte enthalten (News-Bereich, Kontaktinformationen usw.). Der <section>-Tag wird häufig beim Erstellen einer Landingpage eingesetzt, um die Seite in separate logische Blöcke zu unterteilen.

Ein Navigationsmenü muss beispielsweise in einen <nav>-Tag eingebettet werden, während eine Kartenanzeige und eine Liste von Suchergebnissen keine spezifischen Elemente haben und in einen <section>-Tag eingefügt werden können.

Der <section>-Tag kann innerhalb des <article>-Tags verschachtelt werden, um den Inhalt in Gruppen zu unterteilen. HTML5 empfiehlt, jedem Abschnitt eine Überschrift (<h1>–<h6>) hinzuzufügen, um sein Thema zu definieren. Zwar kann jede Überschriftenebene verwendet werden, es ist jedoch Best Practice, einer logischen Hierarchie zu folgen, die auf der Verschachtelungsstruktur basiert.

danger

Verwenden Sie den <section>-Tag nicht als universellen Container zum Erstellen der Seitenstruktur; dafür sollten Sie den <div>-Tag verwenden.

Syntax

Der <section>-Tag kommt immer in Paaren vor. Der Inhalt wird zwischen dem öffnenden (<section>) und dem schließenden (</section>) Tag geschrieben.

Beispiel für den HTML <section>-Tag:

Beispiel für den HTML <section>-Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Using the section tag</title>
  </head>
  <body>
    <section>
      <h2>Hypertext markup language HTML</h2>
      <p>HTML is the standard markup language for creating web pages and web applications. Browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
    </section>
    <section>
      <h2>CSS</h2>
      <p>Formal language, which is used as a description zone, formatting the appearance of a web page, written by the help of markup languages HTML and XHTML, but it can be applied to any XML-document, for example, to SVG or XUL.</p>
    </section>
  </body>
</html>
Probier es selbst »

Ergebnis

section tag example

Beispiel für den HTML <section>-Tag innerhalb eines weiteren <section>-Tags:

Beispiel für den HTML <section>-Tag innerhalb eines weiteren <section>-Tags

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example of the section tag</h1>
    <section>
      <h2>Hypertext markup language HTML</h2>
      <p>
        HTML is the standard markup language for creating web pages and web applications. Browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
      </p>
      <section>
        <h3>Hypertext markup language HTML</h3>
        <p>HTML is the standard markup language for creating web pages and web applications. Browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
      </section>
    </section>
    <section>
      <h2>CSS</h2>
      <p>Formal language, which is used as a description zone, formatting the appearance of a web page, written by the help of markup languages HTML and XHTML, but it can be applied to any XML-document, for example, to SVG or XUL.</p>
    </section>
  </body>
</html>
Probier es selbst »

Attribute

Der <section>-Tag unterstützt die Globalen Attribute und die Ereignisattribute.

So stylen Sie einen HTML <section>-Tag

section {
  background-color: #f9f9f9;
  padding: 20px;
  border: 1px solid #ddd;
}

Praxis

Übung

Was ist der Zweck des Section-Tags in HTML?