Was ist HTML?
HTML, das Hypertext-Markup-Language, ist eine essenzielle Sprache im Webentwicklungsprozess. Sie ermöglicht es Entwicklern, den Aufbau und die Struktur einer Webseite festzulegen. HTML verwendet Tags, um Elemente auf einer Webseite zu markieren und zu strukturieren. Ein Tag besteht aus spitzen Klammern (<>) und umschließt den Namen des Elements.
Das HTML-Grundgerüst
Jede Webseite, egal ob sie barrierefrei entwickelt werden soll oder nicht, benötigt ein HTML-Grundgerüst.
Hier der HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel</title>
</head>
<body>
</body>
</html>Die wichtigen Strukturelemente im HTML
Seit HTML5 gibt es Strukturelemente. Das sind HTML-Tags, die innerhalb des Body-Tags verwendet und mit denen der Webseite eine Grundstruktur gegeben werden kann.
Strukturelement: Kopf und Fußzeile
Mit dem Header- und Footer-Tag kann ein Seitenkopf und eine Fußzeile hinzugefügt werden:
<body>
<header>
<img src="logo.svg" alt="logo">
<p>Herzlich willkommen!</p>
</header>
<footer>
Marlem-Software | Markus Lemcke | Tel: 07072/1278463 | Dußlingen |
</footer>
</body>Strukturelement: Navigation
Alle wichtigen Navigationen auf einer Webseite werden mit ein nav-Element umschlossen.
<body>
<nav>
<ul >
<li>
<a href="index.html">Startseite</a>
</li>
<li>
<a href="dienstl.html">Dienstleistungen</a>
</li>
<li>
<a href="kontakt.html">Kontakt</a>
</li>
</ul>
</nav>
</body>Strukturelement: Hauptinhalt
Das main-Element enthält den (Haupt-)Inhalt einer Webseite.
<body>
<main>
<h2>Erklärung der barrierefreien Navigation</h2>
Durch mehrmaliges Drücken der Tabulatortaste können alle
Navigationspunkte erreicht werden.
</main>
</body>Strukturelement: Article
Inhalte, die unabhängig für sich alleinstehen könnten – z.B. ein Post in einem Blog – sind in article-Elementen gut untergebracht. Article sollte nicht mit einem Artikel in einer Zeitschrift / Magazin verglichen werden, eher mit einem Artikel im Angebot eines Warenhauses, der ebenso gut auf einer anderen Etage präsentiert werden könnte.
<body>
<article>
<h1>Titel des Artikels</h1>
<p>Dies ist der Inhalt des Artikels. Hier kann Text, Bilder, Videos oder andere Medien enthalten sein.</p>
<p> Weitere Absätze können folgen, um den Artikel weiter auszuführen.</p>
</article>
</body>Strukturelement: Section
HTML-Section steht für Abschnitte des Inhalts. Sections haben i.d.R. eine Überschrift (der Validator wünscht Überschriften explizit: Section lacks heading) und können Kapitel oder die Beschreibung eines Produkts sein. Wenn ein HTML-Objekt für CSS und Javascript gebraucht wird, ist weiterhin ein div-Tag angebracht.
Ein guter Anhaltspunkt, wo section und wo ein div-Element eingesetzt werden sollte, ist eine Zusammenfassung des Inhalts der Webseite: Wenn Inhalte in einer Liste einen eigenen Punkt haben, ist ein section-Tag die bessere Wahl als ein div-Tag.
<body>
<section>
<h1>Einleitung</h1>
<p>Dies ist der Einführungsteil der Webseite.</p>
</section>
<section>
<h2>Hauptteil</h2>
<p>Hier befindet sich der Hauptinhalt der Webseite.</p>
</section>
<section>
<h2>Zusammenfassung</h2>
<p>Dies ist die Zusammenfassung oder der Abschluss der Webseite.</p>
</section>
</body>Strukturelement: Aside
Das aside-Element umschließt laut Spezifikation Abschnitte einer Seite, deren Inhalt nur in einem indirekten Zusammenhang mit dem umgebenden Inhalt steht. Dies sind unter anderem Randbemerkungen, Fußnoten oder Links zu weitergehenden Webseiten.
<body>
<article>
<h1>Artikelüberschrift</h1>
<p>Dies ist der Hauptinhalt des Artikels.</p>
<aside>
<h2>Zusätzliche Informationen</h2>
<p>Hier sind zusätzliche Informationen, die den Artikel ergänzen könnten.</p>
</aside>
</article>
</body>Strukturelement: h1 bis h6
Ein langer Text auf einer Webseite oder einem Blog ohne Überschriften ist anstrengend zu lesen. Überschriften lockern den Text auf.
Die Hauptaufgabe von Überschriften ist, einen Text in mehrere Themen-Abschnitte zu unterteilen. Überschriften werden mit dem H-Tag erstellt. Es gibt h1 bis h6. Die Überschrift h1 darf pro Seite einer Webseite nur einmal vorkommen.
<body>
<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>
<h3>Überschrift 3</h3>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>
<h4>Überschrift 4</h4>
<h5>Überschrift 5</h5>
<h6>Überschrift 6</h6>
</body>Und was hat die ganze HTML-Struktur mit Barrierefreiheit zu tun?
Assistive Technologien nutzen die HTML-Struktur, um den Code einer Webseite zu verstehen. Blinde Menschen nutzen zum Beispiel die Vorlesefunktion eines Screenreaders, um sich eine Webseite vorlesen zu lassen.
Der Screenreader braucht diese Strukturelemente, um den Inhalt der Webseite zu verstehen und korrekt vorlesen zu können, dem blinden Webseitenbesucher den Aufbau der Webseite zu erklären. Außerdem braucht der Screenreader die Strukturelemente, damit das Navigieren per Tastatur leichter fällt und die blinde Person so unter anderem einfacher von einer Überschrift zur Nächsten springen kann.
