Überschriften und Abschnitte

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

In diesem Abschnitt geht es um die Dokumentstruktur: fassen Sie noch einmal die Elemente aus dem vorherigen Abschnitt zusammen. und markieren Sie die Umrisslinie für Ihre Anwendung.

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, werden Sie meistens das richtige Element für den Job auswählen. Andernfalls werden Sie es wahrscheinlich nicht tun.

Jetzt, da Sie die Auszeichnungssemantik verstehen und wissen, warum die Auswahl des richtigen Elements wichtig ist, werden Sie in der Regel das richtige Element auswählen, ohne viel oder gar keinen zusätzlichen Aufwand.

Website <header>

Erstellen wir einen Website-Header. Sie beginnen mit nicht semantischem Markup und arbeiten sich auf dem Weg zu einer guten Lösung vor, um die Vorteile des HTML-Abschnitts und der Überschriftenelemente kennenzulernen.

Wenn Sie die Semantik für den Header kaum bis gar nicht bedacht haben, können Sie Code wie diesen 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 aussehen. Wenn Sie jedoch die nicht semantische <div> für alle Elemente verwenden, entsteht zusätzlicher Aufwand. Wenn Sie ein Targeting auf mehrere <div>s mit CSS vornehmen, verwenden Sie zur Identifizierung der Inhalte IDs oder Klassen. Der Code enthält auch einen Kommentar für jede schließende </div>, um anzugeben, welches öffnende Tag jedes geschlossene </div> ist.

Die Attribute id und class bieten zwar Hooks für Stile und JavaScript, bieten aber für den Screenreader und größtenteils für die Suchmaschinen keinen semantischen Wert.

Sie können role-Attribute verwenden, 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 eine Semantik und ermöglicht die Verwendung von Attributselektoren im CSS. Es werden aber trotzdem Kommentare hinzugefügt, um zu ermitteln, <div> welche </div> jeweils geschlossen werden.

Wenn Sie sich mit HTML auskennen, müssen Sie sich nur über den Zweck des Inhalts Gedanken machen. Anschließend können Sie diesen Code semantisch schreiben, ohne role zu verwenden und die schließenden Tags nicht 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 eine Sehenswürdigkeit. Je nachdem, wo sie verschachtelt ist, hat sie eine unterschiedliche Semantik. Wenn sich <header> auf der obersten Ebene befindet, ist es die Website banner, eine Orientierungshilfe, die Sie möglicherweise im Codeblock role notiert haben. Wenn ein <header> in <main>, <article> oder <section> verschachtelt ist, wird es lediglich als Überschrift für diesen Abschnitt identifiziert und ist keine Orientierungshilfe.

Das Element <nav> gibt Inhalt als Navigation an. Da dieses <nav> in der Website-Überschrift verschachtelt ist, dient es als Hauptnavigationselement für die Website. Wäre es in einem <article> oder <section> verschachtelt, wäre es die interne Navigation für diesen Abschnitt. Mit semantischen Elementen haben Sie ein aussagekräftiges Barrierefreiheitsobjektmodell (AOM) erstellt. Mithilfe des AOM kann der Screenreader den Nutzer darüber informieren, dass dieser Abschnitt aus einem wichtigen Navigationsblock besteht, den er entweder überspringen oder überspringen kann.

Wenn du die schließenden Tags </nav> und </header> verwendest, muss in Kommentaren nicht mehr angegeben werden, welches Element in den End-Tags geschlossen ist. Außerdem müssen Sie keine id- und class-Hooks mehr erstellen, wenn Sie verschiedene Tags für verschiedene Elemente verwenden. Die CSS-Selektoren können eine geringe Spezifität haben. können Sie die Links wahrscheinlich mit header nav a ausrichten, ohne sich wegen Konflikten Gedanken machen zu müssen.

Sie haben einen Header mit sehr wenig HTML und ohne Klassen oder IDs geschrieben. Wenn Sie semantisches HTML verwenden, 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>

Ob die Fußzeile eine Sehenswürdigkeit ist, hängt ähnlich wie bei <header> davon ab, wo sie verschachtelt ist. Die Website-Fußzeile dient als Orientierungshilfe und sollte die gewünschten Informationen für die Website-Fußzeile enthalten, z. B. Urheberrechtshinweise, Kontaktdaten sowie Links zu Ihren Datenschutz- und Cookierichtlinien. Die implizite role für die Fußzeile der Website ist contentinfo. Andernfalls hat die Fußzeile keine implizite Rolle und ist keine Sehenswürdigkeit, wie im folgenden Screenshot des AOM in Chrome zu sehen ist (der ein <article> mit einem <header> und einem <footer> zwischen <header> und <footer> enthält).

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

Das bedeutet aber nicht, dass du <footer> nicht verwenden solltest. Angenommen, Sie haben einen Blog. Der Blog hat eine Website-Fußzeile mit der impliziten Rolle contentinfo. Jeder Blogpost kann auch ein <footer> haben. Auf der Hauptzielseite Ihres Blogs erkennen Browser, Suchmaschine und Screenreader, dass es sich bei der Hauptfußzeile um die oberste Fußzeile handelt und dass alle anderen Fußzeilen zu den Posts gehören, in denen sie verschachtelt sind.

Wenn <footer> ein Nachfolgerelement von <article>, <aside>, <main>, <nav> oder <section> ist, ist es keine Sehenswürdigkeit. Wenn der Beitrag allein erscheint, wird diese Fußzeile je nach Markup möglicherweise hervorgehoben.

In Fußzeilen finden Sie häufig Kontaktdaten, die in das Kontaktadressen-Element <address> eingebettet sind. Dies ist ein Element, das nicht sehr gut benannt ist: wird verwendet, um die Kontaktinformationen von Einzelpersonen oder Organisationen einzuschließen, nicht um 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 eindeutig sind und nur Sehenswürdigkeiten oder „Abschnitte“-Elemente sind. Schauen wir uns die „Vollzeit“ an, mithilfe der gängigsten Seitenlayouts:

Ein Layout mit einer Kopfzeile, zwei Seitenleisten und einer Fußzeile wird als Heiliger 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, finden 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>

Durch die Verwendung semantischer Elemente können Browser aussagekräftige Baumstrukturen für Barrierefreiheit erstellen, sodass Screenreader-Nutzer leichter navigieren können. Hier werden banner und contentinfo über die Website <header> und <footer> bereitgestellt. Zu den neuen Elementen, die hier hinzugefügt werden, gehören <main>, <aside> und <article>. außerdem <h1> und <nav>, die du zuvor verwendet hast, sowie <section>, die du noch nicht verwendet hast.

<main>

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

<aside>

Das <aside> ist für Inhalte vorgesehen, die indirekt oder indirekt mit dem Hauptinhalt des Dokuments in Verbindung stehen. In diesem Artikel geht es beispielsweise um HTML. In einem Abschnitt zur Spezifität der CSS-Selektoren für die drei Website-Header-Beispiele (div, Rolle und Semantik) könnte die nicht zusammenhängende Nebenseite in einem <aside> enthalten sein. und wie die meisten Fälle auch das <aside> in einer Seitenleiste oder einem Feld mit Zusatzinformationen enthalten. <aside> ist ebenfalls eine Sehenswürdigkeit und hat die implizite Rolle complementary.

<article>

Verschachtelt in <main> haben wir zwei <article>-Elemente hinzugefügt. Im ersten Beispiel war dies nicht erforderlich, da der Hauptinhalt nur aus einem Wort besteht und in Wirklichkeit nur ein einziger Inhaltsbereich existierte. Wenn Sie jedoch einen Blog schreiben, wie in unserem zweiten Beispiel, sollte jeder Post in einem <article>-Element sein, das in <main> verschachtelt ist.

Ein <article> steht für einen vollständigen oder eigenständigen Inhaltsabschnitt, der prinzipiell unabhängig wiederverwendbar ist. Stellen Sie sich einen Artikel wie einen Artikel in einer Zeitung vor. In Printmedien wird ein Nachrichtenartikel über Jacinda Ardern, die neuseeländische Ministerpräsidentin, möglicherweise nur in einem Bereich angezeigt, vielleicht auch Nachrichten aus aller Welt. Auf der Website der Zeitung könnte derselbe Nachrichtenartikel auf der Startseite, im Bereich „Politik“, im Nachrichtenbereich für Ozeane oder im asiatisch-pazifischen Raum und je nach Nachrichtenthema in den Bereichen „Sport“, „Lifestyle“ oder „Technologie“ erscheinen. Der Artikel kann auch auf anderen Websites wie Pocket oder Yahoo News!

<section>

Das Element <section> wird verwendet, um generische allgemeine Abschnitte eines Dokuments zu umfassen, wenn kein spezifisches semantisches Element zur Verwendung vorhanden ist. Bereiche sollten bis auf wenige Ausnahmen eine Überschrift haben.

Bei dem Beispiel von Jacinda Ardern würde das Banner auf der Startseite der Zeitung den Namen der Zeitung gefolgt von einem einzelnen <main> enthalten, das in mehrere <section>s unterteilt ist, die jeweils eine Überschrift wie „Weltnachrichten“ haben. und „Politik“. In jedem Abschnitt finden Sie eine Reihe von <article>s. Innerhalb von <article> können auch ein oder mehrere <section>-Elemente vorhanden sein. Wenn Sie sich diese Seite ansehen, Teil ist <article>. Dieser <article> wird dann in mehrere <section>s unterteilt, darunter site header, site footer und die Dokumentstruktur. Der Artikel selbst hat ebenso wie die einzelnen Abschnitte eine Überschrift.

Eine <section> ist nur dann eine Sehenswürdigkeit, wenn sie einen barrierefreien Namen hat. Wenn der Name zugänglich ist, lautet die implizite Rolle region. Rollen von Orientierungspunkten sollten nur sparsam verwendet werden, um einen größeren Teil des Dokuments zu identifizieren. Die Verwendung von zu vielen Orientierungsrollen kann zu Störfaktoren führen in Screenreadern, was das Verständnis des Gesamtlayouts der Seite erschwert. Wenn deine <main> zwei oder drei wichtige Unterabschnitte enthält, könnte beispielsweise ein barrierefreier Name für jeden <section> von Vorteil sein.

Überschriften: <h1>–<h6>

Es gibt sechs Abschnittsüberschrift-Elemente: <h1>, <h2>, <h3>, <h4>, <h5> und <h6>. Jede stellt eine der sechs Ebenen der Abschnittsüberschriften dar, wobei <h1> die höchste oder wichtigste Abschnittsebene und <h6> die niedrigste ist.

Wenn eine Überschrift in einem Dokumentbanner <header> verschachtelt ist, handelt es sich dabei um die Überschrift für die Anwendung oder Website. Bei einer Verschachtelung in <main>, unabhängig davon, ob sie in einem <header>-Element in <main> verschachtelt ist, wird der Header für diese Seite verwendet, nicht die gesamte Website. Wenn er in einem <article> oder <section> verschachtelt ist, handelt es sich um die Kopfzeile für diesen Unterabschnitt der Seite.

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

Manche Nutzer von Screenreadern greifen auf Überschriften zu, um den Inhalt einer Seite zu verstehen. Ursprünglich sollte mit Überschriften ein Dokument umrissen werden, so wie in Microsoft Word oder Google Docs eine Gliederung basierend auf Überschriften erstellt werden kann, aber diese Struktur wurde von Browsern nie implementiert. Obwohl Browser verschachtelte Überschriften in immer kleineren Schriftgrößen anzeigen, wie im folgenden Beispiel gezeigt, unterstützen sie die Gliederung eigentlich nicht.

Sie haben jetzt genug Wissen, um den Kurs zu MachineLearningWorkshop.com zu beschreiben:

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

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

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

Dies ist zu diesem Zeitpunkt selbstverständlich, aber verwenden Sie keine Überschriften, um Text fett oder groß zu formatieren. verwenden Sie stattdessen CSS. Wenn Sie Text betonen möchten, können Sie dazu auch semantische Elemente verwenden. Wir werden dies behandeln und den Großteil des Seiteninhalts ausfüllen, wenn wir die Textgrundlagen besprechen. nachdem wir uns die Attribute genauer angesehen haben.

Wissen testen

Testen Sie Ihr Wissen über Überschriften und Abschnitte.