Überschriften und Abschnitte

Im letzten Abschnitt haben Sie erfahren, wie semantische Elemente, die dem Dokument eine sinnvolle Struktur verleihen, die Struktur des Dokuments verstehen können, auch wenn Sie nicht wissen, was die Wörter auf einer Seite bedeuten.

In diesem Abschnitt lernen Sie die Dokumentstruktur kennen, fassen die Abschnittselemente aus dem vorherigen Abschnitt zusammen und zeichnen die Gliederung für Ihre Anwendung aus.

Wenn Sie beim Programmieren die richtigen Elemente für den Job auswählen, müssen Sie Ihren HTML-Code nicht refaktorieren oder auskommentieren. Wenn Sie darüber nachdenken, das richtige Element für den Job zu verwenden, wählen Sie in der Regel das richtige Element für den Job aus. Wenn nicht, werden Sie es wahrscheinlich nicht tun.

Sie kennen jetzt die Markup-Semantik und wissen, warum die Auswahl des richtigen Elements wichtig ist. Sobald Sie sich mit den verschiedenen Elementen vertraut gemacht haben, können Sie in der Regel ohne großen oder gar keinen zusätzlichen Aufwand das richtige Element auswählen.

Website <header>

Erstellen wir eine Website-Kopfzeile. Sie beginnen mit nicht semantischer Auszeichnung und arbeiten sich zu einer guten Lösung vor, damit Sie die Vorteile der HTML-Abschnitts- und Überschriftenelemente kennenlernen können.

Wenn Sie sich wenig oder gar nicht über die Semantik Ihres Headers Gedanken machen, könnten Sie Code wie den folgenden verwenden:

<!-- start header -->
<div id="pageHeader">
  <div id="title">Machine Learning Workshop</div>
  <!-- navigation -->
  <div id="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

Mit CSS kann (fast) jedes Markup richtig dargestellt werden. Die Verwendung des nicht semantischen <div> für alles erzeugt jedoch zusätzlichen Aufwand. Wenn Sie mit CSS ein Targeting auf mehrere <div>s vornehmen möchten, müssen Sie die Inhalte mithilfe von IDs oder Klassen identifizieren. Der Code enthält auch einen Kommentar für jedes schließende </div>, der angibt, welches öffnende Tag von den einzelnen </div> geschlossen wurde.

Die Attribute id und class bieten Hooks für Stile und JavaScript, bieten jedoch keinen semantischen Wert für den Screenreader und (in den meisten Fällen) für die Suchmaschinen.

Sie können role-Attribute angeben, um Semantik bereitzustellen und ein gutes Accessibility Object Model (AOM) für Screenreader zu erstellen:

<!-- start header -->
<div role="banner">
  <div role="heading" aria-level="1">Machine Learning Workshop</div>
  <div role="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
<div>
<!-- end of header -->

Dies bietet zumindest Semantik und ermöglicht die Verwendung von Attributselektoren im CSS, es werden aber trotzdem Kommentare hinzugefügt, um zu ermitteln, welches <div> jedes </div> schließt.

Wenn Sie sich mit HTML auskennen, müssen Sie sich nur über den Zweck des Inhalts nachdenken. Dann können Sie diesen Code semantisch schreiben, ohne role zu verwenden und ohne die schließenden Tags auskommentieren zu müssen:

<header>
  <h1>Machine Learning Workshop</h1>
  <nav>
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </nav>
</header>

In diesem Code werden zwei semantische Orientierungspunkte verwendet: <header> und <nav>.

Dies ist die Hauptüberschrift. Das <header>-Element ist nicht immer eine Sehenswürdigkeit. Sie hat je nachdem, wo sie verschachtelt ist, eine andere Semantik. Wenn das <header> die oberste Ebene ist, ist es die Website banner. Diese Rolle ist eine Orientierungshilfe, die Sie möglicherweise im Codeblock role vermerkt haben. Wenn ein <header> in <main>, <article> oder <section> verschachtelt ist, wird es lediglich als Header für diesen Abschnitt identifiziert und ist keine Sehenswürdigkeit.

Das <nav>-Element identifiziert Inhalte als Navigation. Da dieses <nav> in der Website-Überschrift verschachtelt ist, ist es die Hauptnavigation für die Website. Wäre der Ort in einem <article>- oder <section>-Element verschachtelt, wäre es nur die interne Navigation für diesen Abschnitt. Mithilfe von semantischen Elementen haben Sie ein aussagekräftiges Accessibility Object Model, kurz AOM, erstellt. Mithilfe der AOM kann der Screenreader den Benutzer darüber informieren, dass dieser Abschnitt aus einem Hauptnavigationsblock besteht, den er entweder durchblättern oder überspringen kann.

Wenn Sie die schließenden Tags </nav> und </header> verwenden, müssen die Kommentare nicht mehr verwendet werden, um zu ermitteln, welches Element jedes End-Tag geschlossen hat. Wenn Sie außerdem unterschiedliche Tags für verschiedene Elemente verwenden, sind keine id- und class-Hooks mehr erforderlich. Die CSS-Selektoren können wenig spezifisch sein. Sie können wahrscheinlich ein Targeting auf die Links mit header nav a vornehmen, ohne sich über Konflikte zu sorgen.

Sie haben einen Header mit sehr wenig HTML und ohne Klassen oder IDs geschrieben. Bei der Verwendung von semantischem HTML ist dies nicht erforderlich.

Website <footer>

Codieren wir die Fußzeile der Website.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>

Ähnlich wie bei <header> hängt es davon ab, wo die Fußzeile verschachtelt ist, ob die Fußzeile eine Sehenswürdigkeit ist. Wenn es sich um die Website-Fußzeile handelt, ist sie eine Orientierungshilfe und sollte die gewünschten Informationen für die Website-Fußzeile auf jeder Seite enthalten, z. B. eine Urheberrechtserklärung, Kontaktdaten und Links zu Ihren Datenschutz- und Cookie-Richtlinien. Die implizite role für die Website-Fußzeile ist contentinfo. Andernfalls hat die Fußzeile keine implizite Rolle und ist keine Orientierungshilfe, wie im folgenden Screenshot des AOM in Chrome dargestellt (wo zwischen <header> und <footer> ein <article> mit <header> und <footer>) ist.

In diesem Screenshot gibt es zwei Fußzeilen: eine in einer <article> und eine in der obersten Ebene. Die Fußzeile auf oberster Ebene ist eine Sehenswürdigkeit mit der impliziten Rolle contentinfo. Die andere Fußzeile ist keine Sehenswürdigkeit. In Chrome wird er als FooterAsNonLandmark angezeigt, in Firefox als section.

Das bedeutet nicht, dass du <footer> nicht verwenden solltest. Angenommen, Sie haben einen Blog. Der Blog hat eine Website-Fußzeile mit einer impliziten contentinfo-Rolle. Jeder Blogpost kann auch ein <footer> enthalten. Auf der Haupt-Landingpage Ihres Blogs wissen Browser, Suchmaschine und Screenreader, dass die Hauptfußzeile die Fußzeile der obersten Ebene ist und dass sich alle anderen Fußzeilen auf die Beiträge beziehen, in die sie verschachtelt sind.

Wenn eine <footer> ein Nachfolger von <article>, <aside>, <main>, <nav> oder <section> ist, ist sie keine Sehenswürdigkeit. Wenn der Beitrag allein angezeigt wird, wird diese Fußzeile je nach Markup möglicherweise hochgestuft.

In der Fußzeile finden Sie häufig Kontaktdaten, die in <address>, dem Element für die Kontaktadresse, eingebettet sind. Dies ist ein Element, das nicht sehr gut benannt ist. Es wird verwendet, um die Kontaktinformationen von Einzelpersonen oder Organisationen und nicht die Postanschriften einzuschließen.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
  <address>Instructors: <a href="/hal.html">Hal</a> and <a href="/eve.html">Eve</a></address>
</footer>

Dokumentstruktur

Dieses Modul beginnt mit <header> und <footer>, da sie nur gelegentlich als Orientierungspunkte oder „Abschnitte“ bezeichnet werden. Beschäftigen wir uns nun mit dem Abschnittselement „Vollzeit“, indem wir die häufigsten Seitenlayouts besprechen:

Ein Layout mit einer Kopfzeile, zwei Seitenleisten und einer Fußzeile wird als Heiligen-Gral-Layout bezeichnet. Es gibt viele Möglichkeiten, diese Inhalte mit Markup zu versehen:

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>Content</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

Wenn Sie einen Blog erstellen, gibt es möglicherweise eine Reihe von Artikeln in <main>:

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>
    <article>First post</article>
    <article>Second post</article>
  </main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

Mit semantischen Elementen können Browser aussagekräftige Barrierefreiheitsstrukturen erstellen, sodass Nutzer von Screenreadern leichter navigieren können. Hier werden banner und contentinfo über die Website <header> und <footer> bereitgestellt. Zu den neuen Elementen, die hier hinzugefügt wurden, gehören <main>, <aside> und <article>, auch <h1> und <nav>, die Sie zuvor verwendet haben, sowie <section>, die Sie noch nicht verwendet haben.

<main>

Es gibt ein einzelnes <main>-Markierungselement. Das <main>-Element gibt den Hauptinhalt des Dokuments an. Es sollte nur ein <main> pro Seite vorhanden sein.

<aside>

Die <aside> ist für Inhalte bestimmt, die indirekt oder direkt mit dem Hauptinhalt des Dokuments im Zusammenhang stehen. In diesem Artikel geht es beispielsweise um HTML. In einem Abschnitt zur Spezifität von CSS-Selektoren für die drei Beispiele von Website-Headern (div, Rolle und Semantik) könnte das tangentiale Nebenbezug in einem <aside> enthalten sein. Wie bei den meisten Fällen wird auch das <aside> in einer Seitenleiste oder einem Callout-Feld angezeigt. Das <aside> ist auch ein Orientierungspunkt mit der impliziten Rolle complementary.

<article>

In <main> eingebettet, haben wir zwei <article>-Elemente hinzugefügt. Im ersten Beispiel, als der Hauptinhalt nur aus einem Wort bestand, oder in der Realität aus einem einzelnen Inhaltsabschnitt, war dies nicht notwendig. Wenn Sie jedoch einen Blog wie im zweiten Beispiel schreiben, sollte jeder Post in einem <article> liegen, das in <main> verschachtelt ist.

Ein <article> steht für einen vollständigen oder in sich geschlossenen Inhaltsbereich, der im Prinzip unabhängig voneinander verwendet werden kann. Stellen Sie sich einen Artikel wie einen Artikel in einer Zeitung vor. Im gedruckten Format erscheint ein Nachrichtenartikel über Jacinda Ardern, die Premierministerin von Neuseeland, möglicherweise nur in einem Abschnitt, vielleicht auch nur in den Weltnachrichten. Auf der Website der Zeitung kann derselbe Nachrichtenartikel beispielsweise auf der Startseite, im Bereich „Politik“, in den Nachrichtenbereichen Ozeana oder Asien-Pazifik und je nach Nachrichtenthema, Sport, Lifestyle oder Technologie erscheinen. Möglicherweise wird der Artikel auch auf anderen Websites wie Pocket oder Yahoo!

<section>

Das <section>-Element wird verwendet, um generische eigenständige Abschnitte eines Dokuments einzuschließen, wenn kein spezifischeres semantisches Element zu verwenden ist. Abschnitte sollten bis auf wenige Ausnahmen eine Überschrift haben.

Wenn wir noch einmal auf das Beispiel von Jacinda Ardern zurückkommen: Auf der Startseite der Zeitung enthält das Banner den Namen der Zeitung gefolgt von einem einzelnen <main>, das in mehrere <section>s mit jeweils einer Überschrift wie „World News“ und „Politik“ unterteilt ist. In jedem Abschnitt finden Sie eine Reihe von <article>s. In jeder <article> können auch ein oder mehrere <section>-Elemente vorhanden sein. Wenn Sie sich diese Seite ansehen, ist der gesamte „Headers and section“-Teil der <article>. Diese <article> wird dann in mehrere <section>s unterteilt, einschließlich site header, site footer und der Dokumentstruktur. Der Artikel selbst und alle Abschnitte haben eine Überschrift.

Eine <section> ist nur dann eine Sehenswürdigkeit, wenn sie einen zugänglichen Namen hat. Wenn sie einen zugänglichen Namen hat, lautet die implizite Rolle region. Orientierungshilfen sollten sparsam eingesetzt werden, um größere Abschnitte des Dokuments zu erkennen. Die Verwendung zu vieler ARIA-Rollen kann bei Screenreadern „Rauschen“ verursachen und das Gesamtlayout der Seite erschweren. Wenn deine <main> zwei oder drei wichtige Unterabschnitte enthält, könnte dies von Vorteil sein, einschließlich eines barrierefreien Namens für jede <section>.

Überschriften: <h1>–<h6>

Es gibt sechs Überschriftenelemente für Abschnitt: <h1>, <h2>, <h3>, <h4>, <h5> und <h6>. Jede Ebene steht für eine der sechs Ebenen der Abschnittsüberschriften, wobei <h1> die höchste oder wichtigste Ebene und <h6> die niedrigste ist.

Wenn eine Überschrift in einem Dokumentbanner <header> verschachtelt ist, ist sie die Überschrift für die Anwendung oder Website. Ist dies in <main> verschachtelt, unabhängig davon, ob es in einem <header> in <main> verschachtelt ist oder nicht, dann ist es der Header für die jeweilige Seite und nicht die gesamte Website. Wenn es in einem <article> oder <section> verschachtelt ist, ist es der Header für diesen Unterabschnitt der Seite.

Es wird empfohlen, Überschriftenebenen ähnlich wie Überschriftenebenen in einem Texteditor zu verwenden: Beginnen Sie mit einer <h1> als Hauptüberschrift, mit <h2> als Überschriften für Unterabschnitte und <h3>, wenn diese Unterabschnitte Abschnitte enthalten. Vermeiden Sie das Überspringen von Überschriftenebenen. Hier finden Sie einen guten Artikel zu Abschnittsüberschriften.

Einige Nutzer von Screenreadern greifen auf Überschriften zu, um den Inhalt einer Seite zu verstehen. Ursprünglich sollten Überschriften ein Dokument darstellen, genau wie MS Word oder Google Docs eine Gliederung basierend auf Überschriften erstellen können, aber Browser haben diese Struktur nie implementiert. Obwohl Browser verschachtelte Überschriften in immer kleineren Schriftgrößen anzeigen, wie im folgenden Beispiel gezeigt, unterstützen sie das Gliedern nicht.

Sie verfügen jetzt über ausreichend Wissen, um MachineLearningWorkshop.com zu skizzieren:

Die <body> von MLW.com

Hier ist der Überblick über die sichtbaren Inhalte der Workshop-Website für maschinelles Lernen:

Da es sich bei keinem Inhalt um einen eigenständigen, vollständigen Inhalt handelt, ist <section> besser geeignet als <article>. Obwohl jeder Inhalt eine Überschrift hat, ist kein Abschnitt einer <footer> wert.

An dieser Stelle sollten selbstverständlich keine Änderungen vorgenommen werden. Verwenden Sie jedoch keine Überschriften, um Text fett oder groß zu machen. Verwenden Sie stattdessen CSS. Wenn Sie Text hervorheben möchten, gibt es dazu semantische Elemente. Wir werden dies behandeln und den Großteil des Inhalts der Seite ergänzen, bevor wir uns mit den Grundlagen von Text befassen, nachdem wir uns eingehender mit Attributen befasst haben.

Wissen testen

Testen Sie Ihr Wissen über Überschriften und Abschnitte.