Was ist HTML?
HTML steht für HyperText Markup Language. Das Wort "Markup" ist der Schlüssel: HTML ist keine Programmiersprache wie JavaScript, sondern eine Auszeichnungssprache. Du nimmst Inhalt — sagen wir den Text "Willkommen bei meiner Tischlerei" — und packst ihn in Tags, die dem Browser sagen, wie er den Inhalt einordnen soll: Ist das eine Überschrift, ein normaler Absatz, ein Link, ein Bild?
Jede Website, die du im Browser öffnest, ist im Kern eine HTML-Datei. Selbst wenn dahinter ein modernes Framework wie React oder ein CMS wie WordPress läuft, kommt am Ende immer HTML beim Browser an. Der Browser holt die Datei vom Server, nimmt den HTML-Code, baut daraus die Seitenstruktur (den DOM) und zeigt sie dir.
Vergleich aus dem Alltag: HTML ist wie das Skelett eines Hauses. Es legt fest, wo Wände stehen, wo die Tür ist, wo das Fenster sitzt. Die Farbe, Tapete und Möbel kommen erst später dazu — das ist CSS. Und alles, was sich bewegt oder reagiert (Türklingel, Lichtschalter, Alarm), ist JavaScript.
Wie schreibt man HTML?
HTML besteht aus Elementen. Ein Element ist meistens ein öffnendes Tag, ein Inhalt und ein schließendes Tag:
<h1>Willkommen bei der Tischlerei Müller</h1>
<p>Wir bauen Möbel nach Maß seit über 30 Jahren.</p>
<a href="/kontakt">Jetzt Termin anfragen</a> ist eine Überschrift erster Ordnung. ist ein Absatz (paragraph). ist ein Link (anchor), und das href-Attribut sagt, wohin er führt. Das ist schon der Grundbauplan: Tag öffnen, Inhalt rein, Tag schließen.
Eine vollständige HTML-Seite hat ein festes Grundgerüst:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Tischlerei Müller — Möbel nach Maß</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Willkommen</h1>
<p>Hier kommt der Inhalt deiner Seite hin.</p>
</body>
</html>Im stehen Informationen für den Browser und Suchmaschinen — Titel, Sprache, Zeichensatz, Meta-Title, Meta-Description. Im steht alles, was der Besucher tatsächlich sieht.
Warum ist HTML für deine Website wichtig?
Sauberes HTML entscheidet über drei Dinge: Lesbarkeit für Suchmaschinen, Bedienbarkeit für Screenreader und Wartbarkeit für jeden, der die Seite später anfassen muss. Google liest HTML, um zu verstehen, worum es auf deiner Seite geht — das ist die Basis jeder SEO-Optimierung. Wenn deine Hauptüberschrift in einem Beispiel aus dem Alltag: Eine Bäckerei lässt sich eine Website bauen, und der Entwickler packt jede Überschrift in Diese Tags heißen "semantisches HTML5" — sie beschreiben nicht nur, wie etwas aussieht, sondern was es bedeutet. Ein paar Tags haben keinen Inhalt und kein schließendes Gegenstück — das sind Void Elements wie Dort, wo semantisches HTML nicht reicht — zum Beispiel bei komplexen Widgets, Tabs oder Modalen — kommen ARIA-Attribute ins Spiel. Mehrere Bilder ohne Alt-Text. Jedes Vergessene schließende Tags. Browser verzeihen viel, aber nicht alles. Ein vergessenes WordPress ist das weltweit meistgenutzte Content Management System. Rund 43 Prozent aller Websites im Internet laufen da… Eine API ist eine technische Schnittstelle, über die zwei Software-Systeme miteinander reden. Ein Online-Shop fragt per … Eine IP-Adresse ist die eindeutige Zahlenadresse eines Geräts im Internet. Jeder [Server](server.md), jeder Router, jede… steckt, fehlt dem Crawler die wichtigste Markierung.
, , benutzt, wäre die Information für Suchmaschinen sofort lesbar gewesen.
Die wichtigsten HTML-Tags
sagt: "Das hier ist eine Navigation." sagt: "Das ist ein eigenständiger Inhalt, den man auch losgelöst vom Rest verstehen würde." Suchmaschinen und Screenreader lieben das. oder . Sie stehen für sich allein und werden einfach nur geöffnet. Ein aria-label, aria-expanded, role="dialog" und Co. geben Screenreadern zusätzliche Informationen darüber, was ein Element tut. Wichtig: ARIA ersetzt semantisches HTML nicht, es ergänzt es. Ein . Erst semantisch bauen, dann mit ARIA verfeinern.
Häufige Fehler beim HTML-Schreiben
auf einer Seite. Pro Seite gehört genau eine Hauptüberschrift, nicht drei. Sonst weiß der Crawler nicht, was das Hauptthema ist.alt="..."-Attribut. Fehlt es, weiß weder Google noch ein Screenreader, was auf dem Bild zu sehen ist. Mehr dazu im Eintrag Alt-Tag., , , .
Ähnliche Begriffe
WordPress
API
IP-Adresse
