Begriff

HTML

Web Development S1

2 Quellen 0 Lernpfade 2 Backlinks enriched

Warum wichtig?

Dieser Begriff ist ein Knoten im SengakujiWorks-Wissensnetz. Nutze Level 0 für die erste Einordnung, Level 1 für Praxis, Level 2 für technische Struktur und Level 3 für Grenzen, Fallstricke und Expertenkontext.

HTML ist das Skelett jeder Webseite. Es ist keine Programmiersprache (es kann nicht rechnen), sondern eine Beschreibungssprache. Es sagt dem Browser nur, was was ist:

<h1>Dies ist eine Überschrift</h1>
<p>Dies ist ein Textabsatz</p>
<img>Hier kommt ein Bild hin</img>
<button>Dies ist ein Knopf</button>

Ohne HTML wäre das Internet nur eine weiße Seite. Mit HTML hast du eine hässliche Seite (nur Text und Struktur untereinander). Für das "Schönmachen" (Farben, Layout) brauchst du CSS (die Kleidung). Für das "Verhalten" (was passiert beim Klicken) brauchst du JavaScript (die Muskeln).

Merksatz: Die Standard-Sprache, um die Struktur und den Inhalt von Webseiten zu definieren.

Jeder Browser hat einen "Röntgenblick". Rechtsklick auf jede Webseite -> "Seitenquelltext anzeigen" (View Source). Da siehst du das nackte HTML. Es besteht aus Tags (Etiketten) in spitzen Klammern < >. Die meisten Tags haben einen Anfang <tag> und ein Ende </tag>. Dazwischen steht der Inhalt.

Ein Minimal-Gerüst:

<!DOCTYPE html>
<html>
  <head>
    <title>Meine Seite</title>
  </head>
  <body>
    <h1>Hallo Welt!</h1>
    <p>Das ist mein erster Text.</p>
  </body>
</html>

1. Semantik (Semantic HTML)

Früher hat man für Layouts oft <div> (einen generischen Container) für alles benutzt. <div id="header">, <div id="footer">. Heute ist semantisches HTML Pflicht für SEO und Barrierefreiheit (Screenreader für Blinde). Statt <div> nutzt man tags, die eine Bedeutung haben:

<header>: Das ist der Kopfbereich.
<nav>: Das ist die Navigation.
<article>: Das ist ein eigenständiger Artikel.
<footer>: Das ist die Fußzeile. Google liebt semantisches HTML, weil es die Seite besser versteht.

2. DOM (Document Object Model)

Wenn der Browser dein HTML liest, baut er daraus im Speicher einen Baum ("Tree"). html ist die Wurzel -> body ist ein Ast -> h1 ist ein Blatt. JavaScript manipuliert diesen Baum live. Wenn du auf "Mehr laden" klickst, klebt JS einfach neue Äste an den Baum.

1. Der HTML-Parser und Lexical Analysis

Wie verarbeitet die Browser-Engine (Blink in Chrome) den ankommenden Byte-Stream (60 104 116 109 108...)? Zuerst übersetzt der "Character Decoder" Bytes in das UTF-8 Unicode Format. Dann starte die Lexical Analysis (Tokenizer). Die Engine baut winzige Token (StartTag: html, EndTag: div, Attribute: class). Das Faszinierende am HTML-Parser ist seine Robustheit (Graceful Degradation). Im Gegensatz zu striktem XML, welches beim fehlerhaften Fehlen eines Schluss-Tags sofort tödlich crasht, ist der HTML-Parsing Algorithmus extrem tolerant. Fehlt ein </tr> zwischen zwei Tabellenzeilen, "errät" der Parser logisch das Versäumnis, injiziert es vollautomatisch im RAM in den DOM-Tree und repariert so live Milliarden schlechter Webseiten, damit der User keinen Error sieht.

2. Document Object Model (DOM) Shadow Root

Wenn HTML immer einen "flachen" Baum (window -> document -> html -> body) bildet, wie verbirgt <video> seine Play-Buttons und Timeline-Schieber? (Du schreibst video ja nur einmal hinein, aber die Controls sind super komplexe divs und buttons). Die Antwort ist das Shadow DOM. Die JS-Engine kapselt ein winziges "Mini-HTML-Dokument" unsichtbar hinter den Knoten an einen shadow root. Dieses eingezäunte Reservoire (Web Component) versteckt interne Strukturen. Weder ein Skript (document.querySelectorAll('button')) noch ein globales CSS-Styling (button { color: red }) dringt in diesen Shadow Root ein. Diese exzellente Kapselung hält den riesigen globalen HTML Tree sauber.

3. ARIA (Accessible Rich Internet Applications)

Standard HTML (wie <button>) wird vom Screen-Reader für Blinde korrekt als drückbar angesagt. Entwickler machen aber oft den Performance-Fehler und bauen Buttons aus reinen Spans: <span class="btn" onclick="openMenu()"> Ein Blinder erfährt durch seine Software nie, ob er diesen Text drücken kann, die Maschine liest stur "Text". Hier wird WAI-ARIA zwingend. Mittels role="button" und aria-expanded="false" injiziert man meta-semantischen Sinn (State Machine) in die kaputte DOM-Markup Struktur. Screenreader greifen den Accessibility Object Model (AOM) Baum ab und können blinden Personen hochkomplexe SPA React-Interfaces korrekt vermitteln.

Quick-Check

Warum nennt man HTML keine "Programmiersprache"?
Weil es keine Logik hat. Du kannst in reinem HTML nicht sagen "Wenn X passiert, dann tue Y" oder "Rechne 5 + 5". Es beschreibt nur statische Struktur.
Was passiert, wenn ich ein Tag vergesse zu schließen (z. B. </h1> fehlt)?
Moderne Browser sind sehr tolerant und raten oft richtig, was du meintest. Aber es kann das Layout zerschießen ("Die ganze Seite ist jetzt eine riesige Überschrift!").
Wofür steht das "Hypertext" in HTML?
Für Text, der Verlinkungen (Hyperlinks) zu anderen Texten enthält. Das war die revolutionäre Idee des Webs: Alles ist miteinander verknüpft.