Überschriften und Abschnitte

Im letzten Abschnitt haben Sie gelernt, dass andere – die Suchmaschine, unterstützende Technologien, ein zukünftiger Verantwortlicher, ein neues Teammitglied – die Gliederung des Dokuments verstehen, auch wenn Sie nicht wissen, was die Wörter auf einer Seite bedeuten, sofern semantische Elemente dem Dokument eine sinnvolle Struktur geben.

In diesem Abschnitt erfahren Sie mehr über die Dokumentstruktur. Sie wiederholen die Abschnittselemente aus dem vorherigen Abschnitt und kennzeichnen den Umriss für Ihre Anwendung.

Wenn Sie beim Programmieren die richtigen Elemente für die jeweilige Aufgabe auswählen, müssen Sie Ihr HTML nicht umgestalten oder auskommentieren. Wenn Sie darüber nachdenken, welches Element für die jeweilige Aufgabe am besten geeignet ist, werden Sie in den meisten Fällen das richtige Element auswählen. Wenn Sie nicht darüber nachdenken, werden Sie wahrscheinlich nicht das richtige Element auswählen.

Nachdem Sie nun die Semantik von Markup verstanden haben und wissen, warum die Auswahl des richtigen Elements wichtig ist, werden Sie in der Regel das richtige Element ohne großen zusätzlichen Aufwand auswählen, sobald Sie alle verschiedenen Elemente kennengelernt haben.

Website <header>

Zuerst sollten Sie einen Websiteheader erstellen. Beginnen Sie mit nicht semantischem Markup und arbeiten Sie sich zu einer guten Lösung vor, damit Sie die Vorteile der HTML-Abschnitts- und Überschriftenelemente kennenlernen.

Wenn Sie sich wenig bis gar keine Gedanken über die Semantik für unseren Header gemacht haben, verwenden Sie möglicherweise Code wie diesen:

<!-- 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 aussehen. Wenn Sie jedoch das nicht semantische <div> für alles verwenden, entsteht zusätzlicher Aufwand. Wenn Sie mehrere <div>-Elemente mit CSS ausrichten möchten, verwenden Sie IDs oder Klassen, um die Inhalte zu identifizieren. Der Code enthält auch einen Kommentar für jedes schließende </div>, um anzugeben, welches öffnende Tag durch das jeweilige </div> geschlossen wurde.

Die Attribute id und class bieten zwar Hooks für Styling und JavaScript, haben aber keinen semantischen Wert für den Screenreader und (zum größten Teil) die Suchmaschinen.

Sie können role-Attribute einfügen, um Semantik bereitzustellen und ein gutes AOM (Accessibility Object Model) 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 -->

So werden zumindest Semantik bereitgestellt und Attributselektoren im CSS können verwendet werden. Es werden jedoch weiterhin Kommentare hinzugefügt, um anzugeben, welches <div> jedes </div> schließt.

Wenn Sie sich mit HTML auskennen, müssen Sie 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 kommentieren 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 Landmarks verwendet: <header> und <nav>.

Dies ist die Hauptüberschrift. Das <header>-Element ist nicht immer ein Orientierungspunkt. Die Semantik ist je nach Verschachtelung unterschiedlich. Wenn <header> auf der obersten Ebene liegt, ist es die Website banner, eine Landmark-Rolle, die Sie möglicherweise im Codeblock role gesehen haben. Wenn ein <header> in <main>, <article> oder <section> verschachtelt ist, wird es nur als Header für diesen Abschnitt identifiziert und ist kein Landmark.

Das <nav>-Element kennzeichnet Inhalte als Navigation. Da <nav> in der Websiteüberschrift verschachtelt ist, dient es als Hauptnavigation für die Website. Wenn sie in einem <article> oder <section> verschachtelt wäre, würde sie nur die interne Navigation für diesen Abschnitt darstellen. Durch die Verwendung semantischer Elemente haben Sie ein aussagekräftiges Accessibility Object Model (AOM) erstellt. Das AOM ermöglicht es dem Screenreader, den Nutzer darüber zu informieren, dass dieser Abschnitt aus einem wichtigen Navigationsblock besteht, durch den er entweder navigieren oder den er überspringen kann.

Wenn Sie die schließenden Tags </nav> und </header> verwenden, sind keine Kommentare mehr erforderlich, um anzugeben, welches Element mit dem jeweiligen End-Tag geschlossen wurde. Außerdem sind bei Verwendung verschiedener Tags für verschiedene Elemente keine id- und class-Hooks mehr erforderlich. Die CSS-Selektoren können eine geringe Spezifität haben. Sie können die Links wahrscheinlich mit header nav a ausrichten, ohne sich um Konflikte sorgen zu müssen.

Sie haben einen Header mit sehr wenig HTML und ohne Klassen oder IDs geschrieben. Wenn Sie semantisches HTML verwenden, ist das nicht erforderlich.

Website <footer>

Fußzeile der Website programmieren

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

Ähnlich wie bei <header> hängt es davon ab, wo sich die Fußzeile befindet, ob sie ein Orientierungspunkt ist. Wenn es sich um die Website-Fußzeile handelt, ist es ein Orientierungspunkt und sollte die Informationen enthalten, die Sie auf jeder Seite haben möchten, z. B. eine Urheberrechtserklärung, Kontaktdaten und Links zu Ihrer Datenschutzerklärung und Cookie-Richtlinie. Der implizite role für die Website-Fußzeile ist contentinfo. Andernfalls hat die Fußzeile keine implizite Rolle und ist kein Orientierungspunkt, wie im folgenden Screenshot des AOM in Chrome zu sehen ist (mit einem <article> mit einem <header> und <footer> zwischen dem <header> und <footer>).

Auf diesem Screenshot sind zwei Fußzeilen zu sehen: eine in einem <article> und eine auf der obersten Ebene. Die Fußzeile der obersten Ebene ist eine Markierung mit der impliziten Rolle contentinfo. Die andere Fußzeile ist kein Orientierungspunkt. In Chrome wird es als FooterAsNonLandmark und in Firefox als section angezeigt.

Das bedeutet nicht, dass Sie <footer> nicht verwenden sollten. Wenn Sie beispielsweise einen Blog haben, können Sie einen Website-Footer mit einer impliziten contentinfo-Rolle haben. Jeder Blogbeitrag kann auch ein <footer> haben. Auf der Haupt-Landingpage Ihres Blogs wissen Browser, Suchmaschinen und Screenreader, dass der Haupt-Footer der Footer der obersten Ebene ist und dass alle anderen Footer mit den Beiträgen verknüpft sind, in denen sie eingebettet sind.

Wenn ein <footer> ein untergeordnetes Element von <article>, <aside>, <main>, <nav> oder <section> ist, handelt es sich nicht um ein Landmark. Wenn der Beitrag allein angezeigt wird, kann die Fußzeile je nach Markup hervorgehoben werden.

In der Fußzeile finden Sie oft Kontaktdaten, die im Element <address> (Kontaktadresse) enthalten sind. Dieses Element ist nicht sehr gut benannt. Es wird verwendet, um die Kontaktdaten von Einzelpersonen oder Organisationen einzuschließen, nicht physische Postadressen.

<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 manchmal Landmark- oder „Sectioning“-Elemente sind. Es gibt mehrere häufigere Sectioning-Elemente.

Ein Layout mit einer Kopfzeile, zwei Seitenleisten und einer Fußzeile wird als Holy Grail-Layout bezeichnet. Es gibt viele Möglichkeiten, diese Inhalte zu kennzeichnen, z. B.:

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

Wenn Sie einen Blog erstellen, haben Sie 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>

Wenn semantische Elemente verwendet werden, können Browser aussagekräftige Barrierefreiheitsbäume erstellen. Das erleichtert die Navigation mit Screenreadern. Hier werden banner und contentinfo über die Websites <header> und <footer> bereitgestellt. Die neuen Elemente, die hier hinzugefügt wurden, sind <main>, <aside> und <article>. Außerdem sind <h1> und <nav> enthalten, die Sie bereits verwendet haben, sowie <section>, die Sie noch nicht verwendet haben.

<main>

Es gibt ein einzelnes <main>-Landmark-Element. Das <main>-Element kennzeichnet den Hauptinhalt des Dokuments. Pro Seite darf nur ein <main> vorhanden sein.

<aside>

Die <aside> ist für Inhalte, die indirekt oder nur am Rande mit dem Hauptinhalt des Dokuments zusammenhängen. In diesem Dokument geht es beispielsweise um HTML. Für einen Abschnitt zur Spezifität von CSS-Selektoren für die drei Beispiele für Website-Header (div, role und semantic) könnte die tangenziell verwandte Anmerkung in einem <aside> enthalten sein. Wie die meisten <aside> würde sie wahrscheinlich in einer Seitenleiste oder einem Infofeld dargestellt. <aside> ist auch ein Orientierungspunkt mit der impliziten Rolle complementary.

<article>

Wir haben zwei <article>-Elemente in <main> verschachtelt. Das war im ersten Beispiel nicht erforderlich, da der Hauptinhalt nur ein Wort oder in der realen Welt ein einzelner Inhaltsabschnitt war. Wenn Sie jedoch einen Blog schreiben, wie in unserem zweiten Beispiel, sollte jeder Beitrag in einem <article>-Element stehen, das in <main> verschachtelt ist.

Eine <article> steht für einen vollständigen oder eigenständigen Inhaltsabschnitt, der grundsätzlich unabhängig wiederverwendet werden kann. Stellen Sie sich einen Artikel wie einen Zeitungsartikel vor. In einer Printausgabe würde ein Nachrichtenartikel über Jacinda Ardern, die Premierministerin von Neuseeland, möglicherweise nur in einem Abschnitt erscheinen, z. B. in den Weltnachrichten. Auf der Website der Zeitung kann derselbe Nachrichtenartikel auf der Startseite, im Politikbereich, im Nachrichtenbereich für Ozeanien oder den asiatisch-pazifischen Raum und je nach Thema der Nachricht möglicherweise auch im Sport-, Lifestyle- oder Technologiebereich erscheinen. Der Artikel kann auch auf anderen Websites wie Pocket oder Yahoo News! erscheinen.

<section>

Das <section>-Element wird verwendet, um allgemeine eigenständige Abschnitte eines Dokuments zu umschließen, wenn kein spezifischeres semantisches Element verwendet werden kann. Abschnitte sollten mit wenigen Ausnahmen eine Überschrift haben.

Zurück zum Beispiel mit Jacinda Ardern: Auf der Startseite der Zeitung würde das Banner den Namen der Zeitung enthalten, gefolgt von einem einzelnen <main>, das in mehrere <section>s unterteilt ist, jeweils mit einer Überschrift wie „Weltnachrichten“ und „Politik“. In jedem Bereich finden Sie eine Reihe von <article>s. In jedem <article>-Element finden Sie möglicherweise auch ein oder mehrere <section>-Elemente. Auf dieser Seite ist der gesamte Teil „Überschriften und Abschnitte“ der <article>. Diese <article> wird dann in mehrere <section>s unterteilt, darunter site header, site footer und Dokumentstruktur. Der Artikel selbst hat eine Überschrift, ebenso wie jeder der Abschnitte.

Ein <section> ist nur dann ein Orientierungspunkt, wenn es einen barrierefreien Namen hat. Wenn es einen barrierefreien Namen hat, ist die implizite Rolle region. Landmark-Rollen sollten sparsam verwendet werden, um größere Abschnitte des Dokuments zu kennzeichnen. Wenn Sie zu viele Landmark-Rollen verwenden, kann dies zu „Rauschen“ in Screenreadern führen, was es erschwert, das Layout der Seite zu verstehen. Wenn Ihr <main> zwei oder drei wichtige Unterabschnitte enthält, kann es hilfreich sein, einen barrierefreien Namen für jedes <section> anzugeben.

Überschriften: <h1>–<h6>

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

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

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

Einige Screenreader-Nutzer greifen auf Überschriften zu, um den Inhalt einer Seite zu verstehen. Ursprünglich sollten Überschriften ein Dokument gliedern, so wie MS Word oder Google Docs eine Gliederung auf Grundlage von Überschriften erstellen können. Browser haben diese Struktur jedoch nie implementiert. Browser zeigen zwar verschachtelte Überschriften mit immer kleineren Schriftgrößen an, wie im folgenden Beispiel zu sehen ist, unterstützen aber keine Gliederung.

Sie haben jetzt genug Wissen, um MachineLearningWorkshop.com zu skizzieren:

Übersicht über die <body> von MLW.com

Hier ist der Überblick über die sichtbaren Inhalte der Website für den Machine-Learning-Workshop:

Da kein Inhalt ein eigenständiger, vollständiger Inhalt ist, ist <section> besser geeignet als <article>. Beide haben zwar eine Überschrift, aber kein Abschnitt ist eine <footer> wert.

Es sollte selbstverständlich sein, aber verwenden Sie keine Überschriften, um Text fett oder groß darzustellen. Verwenden Sie stattdessen CSS. Wenn Sie Text hervorheben möchten, gibt es dafür auch semantische Elemente. Wir werden das und den größten Teil des Seiteninhalts behandeln, wenn wir die Grundlagen von Text besprechen, nachdem wir uns genauer mit Attributen befasst haben.

Dein Wissen wird getestet

Testen Sie Ihr Wissen zu Überschriften und Abschnitten.