Semantisches HTML

Mit über 100 HTML-Elementen und der Möglichkeit, benutzerdefinierte Elemente zu erstellen, gibt es unendlich viele Möglichkeiten, Ihre Inhalte mit Markup zu versehen. aber manche sind, insbesondere semantisch, besser als andere.

Semantisch bedeutet „in Bezug auf die Bedeutung“. Semantische HTML-Elemente werden beim Schreiben von HTML-Elementen verwendet, um Ihre Inhalte nach ihrer Bedeutung und nicht nach ihrer Darstellung zu strukturieren.

In dieser Reihe wurden noch nicht viele HTML-Elemente behandelt. Doch auch ohne HTML-Kenntnisse zeigen die folgenden beiden Code-Snippets, wie semantisches Markup Inhaltskontext liefern kann. Beide verwenden eine Wortzahl anstelle von ipsum lorem, um das Scrollen zu reduzieren – lassen Sie Ihrer Fantasie freien Lauf und erweitern Sie „30 Wörter“. in 30 Wörter:

Im ersten Code-Snippet werden <div> und <span> verwendet, zwei Elemente ohne semantischen Wert.

<div>
  <span>Three words</span>
  <div>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>
<div>
  <div>
    <div>five words</div>
  </div>
  <div>
    <div>three words</div>
    <div>forty-six words</div>
    <div>forty-four words</div>
  </div>
  <div>
    <div>seven words</div>
    <div>sixty-eight words</div>
    <div>forty-four words</div>
  </div>
</div>
<div>
   <span>five words</span>
</div>

Haben Sie eine Vorstellung davon, worauf sich diese Wörter ausdehnen? Nicht wirklich.

Schreiben wir diesen Code mit semantischen Elementen um:

<header>
  <h1>Three words</h1>
  <nav>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </nav>
</header>
<main>
  <header>
    <h1>five words</h1>
  </header>
  <section>
    <h2>three words</h2>
    <p>forty-six words</p>
    <p>forty-four words</p>
  </section>
  <section>
    <h2>seven words</h2>
    <p>sixty-eight words</p>
    <p>forty-four words</p>
  </section>
</main>
<footer>
  <p>five words</p>
</footer>

Welcher Codeblock vermittelte Bedeutung? Wenn Sie nur die nicht semantischen Elemente von <div> und <span> verwenden, können Sie nicht ermitteln, was der Inhalt im ersten Codeblock darstellt. Das zweite Codebeispiel mit semantischen Elementen bietet einem Nicht-Programmierer genügend Kontext, um den Zweck und die Bedeutung zu entschlüsseln, ohne jemals auf ein HTML-Tag gestoßen zu sein. Es bietet dem Entwickler auf jeden Fall genügend Kontext, um den Aufbau der Seite zu verstehen, auch wenn er die Inhalte nicht versteht, z. B. Inhalte in einer Fremdsprache.

Im zweiten Codeblock können wir die Architektur auch ohne Verständnis des Inhalts verstehen, da semantische Elemente Bedeutung und Struktur vermitteln. Sie erkennen, dass es sich bei dem ersten Header um das Banner der Website handelt. Das <h1> ist wahrscheinlich der Name der Website. Die Fußzeile ist die Fußzeile der Website: Die fünf Wörter können ein Urheberrechtshinweis oder eine Geschäftsadresse sein.

Semantisches Markup dient nicht nur dazu, dass Markups für Entwickler leichter lesbar sind. ist vor allem wichtig, damit automatisierte Tools Markups entschlüsseln können. Entwicklertools zeigen außerdem, wie semantische Elemente ebenfalls eine maschinenlesbare Struktur liefern.

Accessibility Object Model (AOM)

Während der Browser den empfangenen Inhalt analysiert, werden das Document Object Model (DOM) und das CSS-Objektmodell (CSSOM) erstellt. Anschließend wird ein Baum für Barrierefreiheit erstellt. Assistive Geräte wie Screenreader verwenden das AOM zum Parsen und Interpretieren von Inhalten. Das DOM ist eine Baumstruktur aller Knoten im Dokument. Das AOM ist eine semantische Version des DOM.

Vergleichen wir einmal, wie diese beiden Dokumentstrukturen im Firefox-Bedienfeld „Bedienungshilfen“ gerendert werden:

In Abbildung 2 befinden sich im zweiten Codeblock vier markante Rollen. Für „Navigation“ werden semantische Orientierungspunkte verwendet, die einfach als <header>, <main>, <footer> und <nav> bezeichnet werden. Orientierungspunkte geben dem Web-Content eine Struktur und stellen sicher, dass wichtige Inhaltsbereiche für Screenreader-Nutzer per Tastatur navigieren können.

<header> und <footer> sind Orientierungspunkte mit den Rollen banner und contentinfo, wenn sie nicht in anderen Orientierungspunkten verschachtelt sind. Das AOM von Chrome zeigt dies so an:

Wenn Sie sich die Chrome-Entwicklertools ansehen, werden Sie einen deutlichen Unterschied zwischen dem Barrierefreiheit-Objektmodell feststellen, wenn Sie semantische Elemente verwenden, und wenn Sie sie nicht verwenden.

Es ist ziemlich klar, dass die Verwendung semantischer Elemente die Barrierefreiheit verbessert und die Verwendung nicht semantischer Elemente die Barrierefreiheit verringert. HTML ist standardmäßig verfügbar. Unsere Aufgabe als Entwickler besteht darin, die standardmäßig zugängliche HTML-Struktur zu schützen und gleichzeitig dafür zu sorgen, dass die Zugänglichkeit für unsere Nutzer maximiert wird. Sie können den AOM in den Entwicklertools überprüfen.

Das Attribut role

Das Attribut role beschreibt die Rolle, die ein Element im Kontext des Dokuments hat. Das role-Attribut ist ein globales Attribut, das für alle Elemente gültig ist. Es ist durch die ARIA-Spezifikation und nicht die WHATWG-HTML-Spezifikation definiert, in der fast alles andere in dieser Reihe definiert ist.

Semantische Elemente haben jeweils eine implizite Rolle, manche hängen vom Kontext ab. Wie wir im Screenshot der Firefox-Entwicklertools mit Bedienungshilfen gesehen haben, waren <header>, <main>, <footer> und <nav> auf der obersten Ebene nur Orientierungspunkte, während die in <main> verschachtelten <header>-Elemente ein Abschnitt waren. Im Chrome-Screenshot sind diese Elemente ARIA-Rollen: <main> ist main, <nav> ist navigation und <footer> ist contentinfo, da es die Fußzeile des Dokuments war. Wenn <header> der Header für das Dokument ist, ist die Standardrolle banner. Sie definiert den Abschnitt als globalen Website-Header. Wenn <header> oder <footer> in einem Abschnittselement verschachtelt ist, handelt es sich nicht um eine Orientierungshilfe. Beide Entwicklertools Screenshots zeigen das.

Die Namen von Elementrollen sind beim Erstellen des AOM wichtig. Die Semantik eines Elements oder einer „Rolle“ ist für Hilfstechnologien und in manchen Fällen auch für Suchmaschinen wichtig. Nutzer von Hilfstechnologien nutzen die Semantik, um sich durch Inhalte zu bewegen und die Bedeutung von Inhalten zu verstehen. Die Rolle des Elements ermöglicht es einem Nutzer, schnell auf den gesuchten Inhalt zuzugreifen. Noch wichtiger ist jedoch, dass die Rolle den Nutzer des Screenreaders darüber informiert, wie er mit einem interaktiven Element interagieren kann, sobald es im Fokus ist.

Interaktive Elemente wie Schaltflächen, Links, Bereiche und Kästchen haben alle implizite Rollen, werden automatisch der Tab-Reihenfolge der Tastatur hinzugefügt und alle unterstützen standardmäßig erwartete Nutzeraktionen. Die implizite Rolle oder der explizite role-Wert informiert den Nutzer darüber, dass elementspezifische Standardnutzerinteraktionen zu erwarten sind.

Mit dem Attribut role kannst du jedem Element eine Rolle zuweisen, einschließlich einer anderen Rolle, als das Tag impliziert. <button> hat beispielsweise die implizite Rolle button. Mit role="button" können Sie jedes Element semantisch in eine Schaltfläche umwandeln: <p role="button">Click Me</p>.

Wenn Sie einem Element role="button" hinzufügen, werden Screenreader darüber informiert, dass es sich bei dem Element um eine Schaltfläche handelt. Aussehen oder Funktionalität des Elements werden dadurch nicht geändert. Das button-Element bietet so viele Funktionen, ohne dass Sie irgendetwas tun müssen. Das button-Element wird automatisch in die Tab-Reihenfolge des Dokuments eingefügt, d. h., es ist standardmäßig mit der Tastatur fokussierbar. Die Schaltfläche wird mit der Eingabetaste und der Leertaste aktiviert. Die Schaltflächen haben außerdem alle Methoden und Eigenschaften, die von der HTMLButtonElement-Schnittstelle bereitgestellt werden. Wenn Sie für Ihre Schaltfläche keine semantische Schaltfläche verwenden, müssen Sie alle Funktionen wieder programmieren. Mit <button> ist das viel einfacher.

Kehren Sie zum Screenshot des AOM für den nicht semantischen Codeblock zurück. Sie werden feststellen, dass nicht semantische Elemente keine impliziten Rollen haben. Wir können die nicht semantische Version semantisch machen, indem wir jedem Element eine Rolle zuweisen:

<div role="banner">
  <span role="heading" aria-level="1">Three words</span>
  <div role="navigation">
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>

Mit dem Attribut role können Sie jedem Element Semantik hinzufügen. Sie sollten jedoch Elemente mit der benötigten impliziten Rolle verwenden.

Semantische Elemente

Fragen Sie sich: „Welches Element stellt die Funktion dieses Markup-Abschnitts am besten dar?“ führt in der Regel dazu, dass Sie das beste Element für die jeweilige Aufgabe auswählen. Das ausgewählte Element und damit die Tags, die Sie verwenden, sollten für den angezeigten Content geeignet sein, da Tags semantische Bedeutung haben.

HTML sollte zur Strukturierung von Inhalten verwendet werden, nicht, um das Aussehen von Inhalten zu definieren. Die Darstellung entspricht dem Bereich von CSS. Zwar sind einige Elemente so definiert, dass sie auf eine bestimmte Weise angezeigt werden, aber verwenden Sie kein Element, das darauf basiert, wie das Element im User-Agent-Style Sheet standardmäßig angezeigt wird. Wählen Sie stattdessen jedes Element basierend auf seiner semantischen Bedeutung und Funktionalität aus. Durch die logische, semantische und sinnvolle Codierung von HTML-Code wird sichergestellt, dass CSS wie vorgesehen angewendet wird.

Wenn Sie beim Programmieren die richtigen Elemente für den Job auswählen, müssen Sie Ihren HTML-Code nicht refaktorieren oder kommentieren. 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. Wenn Sie die Semantik der einzelnen Elemente verstehen und wissen, warum die Auswahl des richtigen Elements wichtig ist, können Sie im Allgemeinen ohne großen zusätzlichen Aufwand die richtige Entscheidung treffen.

Dann erstellen Sie mit semantischen Elementen Dokumentenstruktur.

Wissen testen

Testen Sie Ihr Wissen über semantisches HTML.