Überschriften und Abschnitte

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

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

Wenn Sie beim Programmieren die richtigen Elemente für die Aufgabe auswählen, müssen Sie Ihren HTML-Code nicht refaktorieren oder auskommentieren. Wenn Sie sich Gedanken darüber machen, welches Element für die jeweilige Aufgabe am besten geeignet ist, wählen Sie meistens das richtige Element aus. Wenn Sie das nicht tun, werden Sie es wahrscheinlich auch nicht.

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

Website <header>

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

Wenn ihr euch keine Gedanken über die Semantik für den Header macht, verwendet ihr 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 dargestellt werden. Wenn Sie jedoch für alles das nicht semantische <div> verwenden, bedeutet das tatsächlich mehr Arbeit. Wenn Sie mehrere <div>-Elemente mit CSS ansprechen möchten, müssen Sie IDs oder Klassen verwenden, um den Inhalt zu identifizieren. Der Code enthält auch einen Kommentar für jedes schließende </div>-Tag, um anzugeben, welches öffnende Tag durch das jeweilige </div>-Tag geschlossen wurde.

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

Sie können role-Attribute einfügen, 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 -->

Dadurch wird zumindest die Semantik bereitgestellt und die Verwendung von Attributselektoren im CSS ermöglicht. Es werden jedoch weiterhin Kommentare hinzugefügt, um zu ermitteln, welches <div> durch welches </div> geschlossen wird.

Wenn Sie HTML kennen, müssen Sie sich nur Gedanken über den Zweck des Inhalts machen. 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 Orientierungspunkte verwendet: <header> und <nav>.

Dies ist die Hauptüberschrift. Das <header>-Element ist nicht immer ein Landmark. Die Semantik hängt davon ab, wo es verschachtelt ist. Wenn sich das <header>-Element auf der obersten Ebene befindet, ist es das banner-Element der Website, eine Landmark-Rolle, die Sie möglicherweise im role-Codeblock bemerkt haben. Wenn ein <header>-Element in <main>, <article> oder <section> verschachtelt ist, wird es nur als Header für diesen Abschnitt identifiziert und ist kein Orientierungspunkt.

Mit dem <nav>-Element werden Inhalte als Navigation gekennzeichnet. Da dieses <nav>-Element in der Websiteüberschrift verschachtelt ist, ist es die Hauptnavigation für die Website. Wenn es in einem <article> oder <section> verschachtelt wäre, wäre es nur für diesen Abschnitt eine interne Navigation. Durch die Verwendung semantischer Elemente haben Sie ein aussagekräftiges Accessibility Object Model (AOM) erstellt. Das AOM ermöglicht es dem Screenreader, die Nutzenden darüber zu informieren, dass dieser Abschnitt aus einem Hauptnavigationsblock besteht, durch den sie entweder navigieren oder den sie überspringen können.

Wenn Sie die schließenden Tags </nav> und </header> verwenden, müssen Sie nicht mehr in Kommentaren angeben, welches Element durch das jeweilige End-Tag geschlossen wird. Außerdem sind bei Verwendung unterschiedlicher Tags für verschiedene Elemente keine id- und class-Hooks erforderlich. Die CSS-Selektoren können eine geringe Spezifität haben. Sie können die Links wahrscheinlich mit header nav a ansprechen, ohne sich Gedanken über Konflikte machen 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 nötig.

Website <footer>

Programmieren Sie 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 sie ein Landmark ist. Wenn es sich um die Fußzeile der Website handelt, ist es ein Landmark und sollte die Informationen enthalten, die auf jeder Seite angezeigt werden sollen, z. B. eine Urheberrechtserklärung, Kontaktinformationen und Links zu Ihren Datenschutz- und Cookie-Richtlinien. Der implizite role für die Fußzeile der Website 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 <header> und <footer>).

In diesem Screenshot gibt es zwei Fußzeilen: eine in einem <article> und eine auf oberster Ebene. Die Fußzeile auf oberster Ebene ist ein Landmark mit der impliziten Rolle contentinfo. Die andere Fußzeile ist kein Landmark. In Chrome wird er als FooterAsNonLandmark und in Firefox als section angezeigt.

Das bedeutet nicht, dass Sie <footer> nicht verwenden sollten. Wenn Sie beispielsweise einen Blog haben, könnten Sie eine Fußzeile mit einer impliziten contentinfo-Rolle haben. Jeder Blogpost kann auch eine <footer> haben. Auf der Haupt-Landingpage Ihres Blogs wissen Browser, Suchmaschine und Screenreader, dass die Hauptfußzeile die Fußzeile der obersten Ebene ist und dass alle anderen Fußzeilen zu den Beiträgen gehören, in denen sie verschachtelt sind.

Wenn ein <footer> ein untergeordnetes Element von <article>, <aside>, <main>, <nav> oder <section> ist, ist es kein Orientierungspunkt. Wenn der Beitrag allein angezeigt wird, kann es je nach Markup sein, dass die Fußzeile hervorgehoben wird.

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

<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-Elemente (oder „Abschnittselemente“) sind. Es gibt noch einige weitere häufig verwendete Elemente zur Strukturierung.

Ein Layout mit einem Header, zwei Seitenleisten und einem Footer wird als Holy-Grail-Layout bezeichnet. Es gibt viele Möglichkeiten, diese Inhalte zu kennzeichnen, darunter:

<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 Accessibility Trees erstellen. Dadurch wird die Navigation mit Screenreadern verbessert. Hier werden ein banner und ein contentinfo über eine Website (<header>) und eine <footer> bereitgestellt. Zu den neuen Elementen, die hier hinzugefügt werden, gehören <main>, <aside> und <article> sowie <h1> und <nav>, die Sie bereits verwendet haben, und <section>, das Sie noch nicht verwendet haben.

<main>

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

<aside>

<aside> ist für Inhalte gedacht, die indirekt oder am Rande mit dem Hauptinhalt des Dokuments zusammenhängen. In diesem Dokument geht es beispielsweise um HTML. In einem Abschnitt zur Spezifität von CSS-Selektoren für die drei Beispiele für Website-Header (div, role und semantic) könnte der am Rande relevante Exkurs in einem <aside> enthalten sein. Wie die meisten <aside> würde er wahrscheinlich in einer Seitenleiste oder einem Callout-Feld dargestellt werden. Das <aside> ist auch ein Landmark mit der impliziten Rolle complementary.

<article>

In <main> haben wir zwei <article>-Elemente verschachtelt. Im ersten Beispiel war das nicht nötig, da der Hauptinhalt nur aus einem Wort bestand, oder in der Praxis aus einem einzelnen Inhaltsabschnitt. Wenn Sie jedoch einen Blog schreiben, wie in unserem zweiten Beispiel, sollte jeder Beitrag in einem <article>-Element enthalten sein, das in einem <main>-Element verschachtelt ist.

Ein <article> stellt einen vollständigen oder eigenständigen Inhaltsabschnitt dar, der im Prinzip unabhängig wiederverwendbar ist. Stellen Sie sich einen Artikel wie einen Zeitungsartikel vor. In einer gedruckten Zeitung erscheint ein Nachrichtenartikel über Jacinda Ardern, die Premierministerin von Neuseeland, möglicherweise nur in einem Bereich, vielleicht in den Weltnachrichten. Auf der Website der Zeitung kann derselbe Nachrichtenartikel auf der Startseite, im Politikbereich, im Bereich für Nachrichten aus Ozeanien oder dem asiatisch-pazifischen Raum und je nach Thema der Nachrichten vielleicht auch im Bereich für Sport, Lifestyle oder Technologie 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 bis auf wenige 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 Abschnitt finden Sie eine Reihe von <article>s. In jedem <article> können auch ein oder mehrere <section>-Elemente enthalten sein. Wenn Sie sich diese Seite ansehen, ist der gesamte Bereich „Ü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, sodass das Gesamtlayout der Seite schwer zu verstehen ist. Wenn Ihr <main> zwei oder drei wichtige Unterabschnitte enthält, kann es hilfreich sein, für jeden <section> einen barrierefreien Namen anzugeben.

Überschriften: <h1>–<h6>

Es gibt sechs Elemente für Abschnittsüberschriften: <h1>, <h2>, <h3>, <h4>, <h5> und <h6>. Jedes steht für eine der sechs Ebenen von Abschnittsüberschriften, wobei <h1> die höchste oder wichtigste Abschnittsebene und <h6> die niedrigste 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 einem <header> in <main> 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: Beginne mit <h1> als Hauptüberschrift, verwende <h2> als Überschriften für Unterabschnitte und <h3>, wenn diese Unterabschnitte Abschnitte haben. Vermeide es, Überschriftenebenen zu überspringen. 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 anhand von Überschriften erstellen können. Browser haben diese Struktur jedoch nie implementiert und der vorgeschlagene Gliederungsalgorithmus wurde aus der HTML-Spezifikation entfernt. Früher wurden <h1>-Elemente, die in Abschnittselementen verschachtelt waren, in kleineren Schriftgrößen angezeigt. In modernen Browsern wurden diese Standardstile jedoch entfernt und die automatische Dokumentgliederung wird nicht unterstützt.

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

<body> von MLW.com

Dies ist die Gliederung für den sichtbaren Inhalt der Website des Workshops zum maschinellen Lernen:

Da kein Inhalt ein eigenständiger, vollständiger Inhalt ist, ist <section> besser geeignet als <article>. Obwohl jeder Inhalt eine Überschrift hat, ist kein Abschnitt eines <footer> würdig.

Es sollte sich von selbst verstehen, dass Überschriften nicht verwendet werden sollten, um Text fett oder groß zu formatieren. Verwenden Sie stattdessen CSS. Wenn Sie Text hervorheben möchten, gibt es dafür auch semantische Elemente. Wir werden uns damit befassen und den Großteil des Seiteninhalts ausfüllen, wenn wir die Grundlagen von Text besprechen, nachdem wir uns die Attribute genauer angesehen haben.

Dein Wissen wird getestet

Testen Sie Ihr Wissen zu Überschriften und Abschnitten.