HTML

Kurz: Die Auszeichnungssprache (HyperText Markup Language), mit der die Struktur von Webseiten definiert wird.

Genauer: Besteht aus verschachtelten Elementen (“Tags”) wie <div>, <p> oder <a>, die dem Browser sagen, was auf der Seite steht und wie es strukturiert ist — nicht wie es aussieht (das übernimmt CSS) oder wie es sich verhält (das übernimmt JavaScript). Bildet zusammen mit CSS und JS das klassische Dreigespann der Web-Frontend-Entwicklung.

Im Detail

Vom Markup zum DOM

<article>
  <h1>Titel</h1>
  <p>Ein Absatz mit <a href="/ziel">einem Link</a>.</p>
  <img src="bild.jpg" alt="Beschreibung für Screenreader" />
</article>

Der Browser liest HTML und baut daraus intern das DOM (Document Object Model) — eine Baumstruktur aus allen Elementen, auf die JavaScript zur Laufzeit zugreifen und die es verändern kann (z. B. ein neues Element einfügen, wenn ein Nutzer klickt, ohne die ganze Seite neu zu laden). Das DOM ist damit nicht identisch mit dem ursprünglichen HTML-Text, sondern eine LIVE-Repräsentation, die sich nach dem ersten Laden dynamisch weiterentwickeln kann — der “View Source” einer Seite zeigt das ursprüngliche HTML, die Browser-Entwicklertools (“Elements”-Tab) zeigen den aktuellen DOM-Zustand, die nach JavaScript-Manipulation oft voneinander abweichen.

Semantisches HTML

HTML5 (seit 2014 offizieller Standard) brachte semantische Elemente wie <article>, <nav>, <header>, <footer> und <section> mit, die nicht nur visuell, sondern auch inhaltlich beschreiben, wozu ein Element dient — vorher behalf man sich meist mit generischen <div>-Elementen und Klassennamen, die für Menschen lesbar, für Maschinen aber bedeutungslos waren. Semantisches HTML ist wichtig für:

• Barrierefreiheit: Screenreader für sehbehinderte Nutzer können Seitenstruktur (Navigation, Hauptinhalt, Fußzeile) korrekt ansagen, statt eine undifferenzierte Masse aus <div>s vorzulesen.
• Suchmaschinen: können Inhalte besser einordnen und gewichten (ein <h1> gilt als wichtigere Überschrift als generischer Text).
• Wartbarkeit: Entwickler verstehen Struktur schneller, ohne CSS-Klassennamen interpretieren zu müssen.

Trennung von Struktur, Darstellung und Verhalten

Attribute wie class oder id an Tags dienen dazu, Elemente gezielt über CSS zu stylen oder über JavaScript anzusprechen — HTML selbst legt bewusst nur die Struktur/Bedeutung fest, Aussehen kommt aus CSS, Verhalten aus JavaScript. Diese Trennung (oft “Separation of Concerns” genannt) hält große Websites wartbar: Design-Änderungen betreffen primär CSS-Dateien, ohne die HTML-Struktur anzufassen, und umgekehrt.

Barrierefreiheit über ARIA hinaus

Für Fälle, die semantisches HTML allein nicht abdeckt (z. B. eine komplexe, per JavaScript gesteuerte Komponente wie ein Dropdown-Menü), ergänzt WAI-ARIA (Accessible Rich Internet Applications) zusätzliche Attribute (role, aria-label, aria-expanded), die Screenreadern mitteilen, um welche Art Element es sich handelt und in welchem Zustand es gerade ist — ein Grundsatz lautet dabei “kein ARIA ist besser als falsches ARIA”: ein korrektes semantisches <button> ist stets vorzuziehen gegenüber einem <div> mit nachträglich aufgesetzten ARIA-Attributen, die die Grundfunktionalität eines echten Buttons (per Tab erreichbar, per Enter/Leertaste auslösbar) nicht automatisch mitbringen.

Siehe auch: CSS, JS, Browser