Verwendung des HTML-Sektionstags

Einführung

Im HTML wird das <section>-Tag verwendet, um einen Dokument in mehrere Abschnitte aufzuteilen, um die Klarheit und Unterscheidung zu verbessern. Es ist ein semantisches Element, das für einzelne Abschnitte oder geschachtelte Abschnitte innerhalb eines Dokuments verwendet werden kann. In diesem Lab werden Sie durch die einfachen Schritte geführt, um das <section>-Tag in einer HTML-Datei zu verwenden.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie in Visual Studio Code HTML schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Skills Graph

Fügen Sie einen einfachen Abschnitt hinzu

Erstellen Sie zunächst in Ihrem bevorzugten Code-Editor eine Datei namens index.html. In dieser Datei wird der HTML-Code enthalten sein, mit dem wir arbeiten werden.

Beginnen Sie, indem Sie einen einfachen Abschnitt mithilfe des <section>-Tags hinzufügen. Dies können Sie wie folgt tun:

<section>
  <h1>Abschnittstitel</h1>
  <p>Der Inhalt des Abschnitts steht hier.</p>
</section>

Im obigen Code sind h1 und p jeweils HTML-Tags für Überschrift und Absatz. Das h1-Tag definiert eine oberste Überschrift für den Abschnitt, und das p-Tag wird verwendet, um Textinhalt zum Abschnitt hinzuzufügen.

Fügen Sie einen Unterabschnitt hinzu

Sie können auch einen Unterabschnitt innerhalb eines Abschnitts mithilfe der Verschachtelung von <section>-Tags erstellen. Beispielsweise:

<section>
  <h1>Abschnittstitel</h1>
  <p>Der Inhalt des Abschnitts steht hier.</p>

  <section>
    <h2>Unterabschnittstitel</h2>
    <p>Der Inhalt des Unterabschnitts steht hier.</p>
  </section>
</section>

Im obigen Code haben wir einen Abschnitt, der einen weiteren geschachtelten Abschnitt enthält, der als Unterabschnitt fungiert. Das h2-Tag innerhalb des geschachtelten Abschnitts definiert die Überschrift für den Unterabschnitt, und das p-Tag fügt Textinhalt zum Unterabschnitt hinzu.

Gestaltung mit CSS

Standardmäßig ist das <section>-Tag in HTML ein Blockelement. Sie können CSS verwenden, um das <section>-Element zu gestalten, genauso wie mit jedem anderen HTML-Element. Hier ist ein Beispiel:

<style>
  section {
    border: 2px solid black;
    padding: 10px;
    margin-bottom: 20px;
  }
</style>

Im obigen Code wird ein style-Tag verwendet, um den CSS-Code für das <section>-Tag zu enthalten. Der CSS-Code fügt einem <section>-Element einen Rahmen, Innenabstand und Außenabstand hinzu. Sie können diese Eigenschaften nach Ihren Vorlieben anpassen.

Fügen Sie weitere Abschnitte hinzu

Schließlich können Sie weitere Abschnitte Ihrer HTML-Datei nach Bedarf hinzufügen. Denken Sie daran, die Struktur der öffnenden und schließenden Abschnitts-Tags zu befolgen.

<section>
  <h1>Abschnitt 1</h1>
  <p>Der Inhalt steht hier.</p>
</section>

<section>
  <h1>Abschnitt 2</h1>
  <p>Der Inhalt steht hier.</p>
</section>

<section>
  <h1>Abschnitt 3</h1>
  <p>Der Inhalt steht hier.</p>
</section>

Zusammenfassung

Das <section>-Tag in HTML ist ein semantisches Element, das zum Aufteilen eines Dokuments in mehrere Abschnitte zur Verdeutlichung und Unterscheidung verwendet wird. Es ermöglicht die Erstellung von eigenständigen Abschnitten und geschachtelter Unterabschnitte innerhalb eines Dokuments. Mit den in diesem Lab bereitgestellten Schritten können Sie nun <section>-Tags zu Ihren HTML-Dateien hinzufügen, sie mit CSS anpassen und die Organisation und Lesbarkeit Ihrer Dokumente verbessern.