Angesichts von über 100 HTML-Elementen und der Möglichkeit, benutzerdefinierte Elemente zu erstellen, gibt es unendlich viele Möglichkeiten, Ihre Inhalte mit Markup zu versehen. Einige Arten, insbesondere semantisch, sind jedoch besser als andere.
Semantisch bedeutet „mit Bezug zur Bedeutung“. Wenn Sie semantisches HTML schreiben, werden Ihre Inhalte mithilfe von HTML-Elementen anhand der Bedeutung der einzelnen Elemente und nicht nach ihrem Erscheinungsbild strukturiert.
In dieser Reihe wurden noch nicht viele HTML-Elemente behandelt. Doch auch ohne HTML-Kenntnisse zeigen die folgenden beiden Code-Snippets, wie semantisches Markup den Kontext bereitstellen kann. Beide verwenden statt ipsum lorem eine Wortzahl, um das Scrollen zu ersparen. Lassen Sie Ihrer Fantasie freien Lauf, um „dreißig Wörter“ auf 30 Wörter zu erweitern:
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</h2>
<div>sixty-eight words</div>
<div>forty-four words</div>
</div>
</div>
<div>
<span>five words</span>
</div>
Verstehen Sie, worauf sich diese Begriffe erweitern? Nein.
Lassen Sie uns diesen Code nun mit semantischen Elementen umschreiben:
<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 die Bedeutung? Wenn Sie nur die nicht semantischen Elemente von <div> und <span> verwenden, lässt sich nicht erkennen, wofür der Inhalt im ersten Codeblock steht. Das zweite Codebeispiel mit semantischen Elementen bietet genug Kontext für Nicht-Codierer, um den Zweck und die Bedeutung zu verstehen, ohne jemals auf ein HTML-Tag gestoßen zu sein. Sie bietet dem Entwickler auf jeden Fall genügend Kontext, um den Grundriss 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 verstehen, auch ohne den Inhalt zu verstehen, da semantische Elemente Bedeutung und Struktur bieten. Wie Sie sehen, ist der erste Header das Banner der Website, wobei <h1> wahrscheinlich der Name der Website ist. Die Fußzeile ist die Fußzeile der Website. Die fünf Wörter können eine Urheberrechtserklärung oder eine Geschäftsadresse sein.
Beim semantischen Markup geht es nicht nur darum, das Markup für Entwickler leichter lesbar zu machen, sondern es geht in erster Linie darum, dass das Markup für automatisierte Tools leicht entschlüsselt werden kann. Entwicklertools zeigen auch, wie semantische Elemente eine maschinenlesbare Struktur bieten.
Accessibility Object Model (AOM)
Während der Browser den empfangenen Inhalt parst, erstellt er das Document Object Model (DOM) und das CSS-Objektmodell (CSSOM). Außerdem wird ein Baum für Barrierefreiheit erstellt. Assistive Geräte wie Screenreader verwenden den AOM, um Inhalte zu parsen und zu interpretieren. Das DOM ist eine Baumstruktur aller Knoten im Dokument. Das AOM ist eine semantische Version des DOM.
Sehen wir uns an, wie die beiden folgenden Dokumentstrukturen im Bedienungshilfe-Bedienelement von Firefox gerendert werden:
Im zweiten Screenshot enthält der zweite Codeblock vier Rollen für Orientierungspunkte. Dabei werden semantische Orientierungspunkte mit den Bezeichnungen <header>, <main>, <footer> und <nav> für „Navigation“ verwendet. Orientierungspunkte verleihen Webinhalten Struktur und sorgen dafür, dass wichtige Inhaltsabschnitte für Nutzer von Screenreadern einfach über die Tastatur navigieren können.
Beachten Sie, dass <header> und <footer> Orientierungspunkte mit den Rollen banner bzw. contentinfo sind, wenn sie nicht in anderen Orientierungspunkten verschachtelt sind. Die AOM von Chrome zeigt dies so an:
Bei den Chrome-Entwicklertools werden Sie einen erheblichen Unterschied zwischen dem Objektmodell für Barrierefreiheit im Internet und semantischen Elementen feststellen.
Es ist ziemlich klar, dass die Nutzung semantischer Elemente die Barrierefreiheit verbessert und die Verwendung nicht semanischer Elemente die Zugänglichkeit verringert. HTML ist in der Regel standardmäßig zugänglich. Unsere Aufgabe als Entwickler ist es, sowohl die standardmäßige Zugänglichkeit von HTML zu schützen als auch sicherzustellen, dass wir die Zugänglichkeit maximieren. Sie können die AOM in den Entwicklertools einsehen.
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 also für alle Elemente gültig ist. Es wird durch die ARIA-Spezifikation und nicht durch die WASWG-HTML-Spezifikation definiert, in der fast alles andere in dieser Reihe definiert ist.
Semantische Elemente haben jeweils eine implizite Rolle, die teilweise vom Kontext abhängt. Wie wir im Firefox-Screenshot zu den Entwicklertools der Bedienungshilfen erkennen, waren <header>, <main>, <footer> und <nav> der obersten Ebene Orientierungspunkte, während das in <main> verschachtelte <header> ein Abschnitt war. Im Chrome-Screenshot sind die ARIA-Rollen dieser Elemente aufgeführt: <main> ist main, <nav> ist navigation und <footer> ist, wie es die Fußzeile des Dokuments war, contentinfo. Wenn <header> der Header für das Dokument ist, ist die Standardrolle banner, die den Abschnitt als globalen Website-Header definiert. Wenn ein <header>- oder <footer>-Element in einem Abschnittselement verschachtelt ist, ist dies keine Sehenswürdigkeiten-Rolle. Die Screenshots beider Entwicklertools zeigen dies.
Die Namen von Elementrollen sind wichtig beim Erstellen des AOM. Die Semantik eines Elements oder „Rolle“ ist für assistive Technologien und in einigen Fällen für Suchmaschinen wichtig. Nutzer von Hilfstechnologien verlassen sich auf Semantik, um sich durch Inhalte zu bewegen und die Bedeutung von Inhalten zu verstehen. Die Rolle des Elements ermöglicht es den Nutzenden, schnell auf den gesuchten Inhalt zuzugreifen, und – was noch wichtiger ist – die Rolle informiert den Screenreader-Nutzer darüber, wie er mit einem interaktiven Element interagieren kann, sobald es im Fokus ist.
Interaktive Elemente wie Schaltflächen, Links, Bereiche und Kästchen haben implizite Rollen, alle werden automatisch der Tab-Reihenfolge auf der Tastatur hinzugefügt und alle unterstützen standardmäßig erwartete Nutzeraktionen. Durch die implizite Rolle oder den expliziten role-Wert wird der Nutzer darüber informiert, dass er elementspezifische Standardnutzerinteraktionen erwarten kann.
Mit dem Attribut role können Sie jedem Element eine Rolle zuweisen, auch wenn es eine andere Rolle gibt, 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>.
Durch das Hinzufügen von role="button" zu einem Element werden Screenreader darüber informiert, dass es sich um eine Schaltfläche handelt. Aussehen oder Funktionalität des Elements ändert sich dadurch nicht. Das button-Element bietet so viele Funktionen, ohne dass Sie etwas tun müssen. Das button-Element wird automatisch der Tab-Reihenfolge im Dokument hinzugefügt, d. h., es ist standardmäßig mit der Tastatur fokussierbar. Mit der Eingabetaste und der Leertaste lässt sich die Schaltfläche aktivieren. Schaltflächen verfügen auch über alle Methoden und Eigenschaften, die von der HTMLButtonElement-Schnittstelle bereitgestellt werden. Wenn Sie nicht die semantische Schaltfläche für Ihre Schaltfläche verwenden, müssen Sie alle diese 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. Stattdessen sollten Sie Elemente mit der impliziten Rolle verwenden, die Sie benötigen.
Semantische Elemente
Die Frage, welches Element am besten für die Funktion dieses Markup-Abschnitts steht, führt in der Regel dazu, dass Sie das beste Element für Ihre Aufgabe auswählen. Da Tags eine semantische Bedeutung haben, sollte das ausgewählte Element und die verwendeten Tags für den angezeigten Inhalt geeignet sein.
HTML sollte zum Strukturieren von Inhalten verwendet werden, nicht zum Definieren des Aussehens von Inhalten. Die Darstellung entspricht dem Bereich von CSS. Auch wenn einige Elemente so definiert sind, dass sie auf bestimmte Weise angezeigt werden, sollten Sie ein Element nicht basierend darauf verwenden, wie dieses Element durch das User-Agent-Stylesheet standardmäßig angezeigt wird. Stattdessen sollten Sie jedes Element basierend auf seiner semantischen Bedeutung und Funktionalität auswählen. Wenn HTML auf logische, semantische und sinnvolle Weise codiert wird, kann sichergestellt werden, 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, wählen Sie in der Regel das richtige Element für den Job aus. Wenn nicht, werden Sie es wahrscheinlich nicht tun. Wenn Sie die Semantik jedes Elements 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.
Im nächsten Abschnitt verwenden Sie die semantischen Elemente, um die Dokumentstruktur zu erstellen.
Wissen testen
Testen Sie Ihr Wissen über semantisches HTML.
Du solltest einem <button>-Element immer role="button" hinzufügen.
<button>-Element hat diese Rolle bereits.