HTML ist die Sprache, in der das Web geschrieben ist. Jede Website – vom einfachen Blog bis zur komplexen Web-App – basiert auf HTML. Es ist keine Programmiersprache, sondern eine Auszeichnungssprache, die Struktur und Bedeutung von Inhalten definiert.
HTML besteht aus Tags – Befehlen in spitzen Klammern. Jedes öffnende Tag hat ein schließendes Gegenstück. Dazwischen liegt der Inhalt.
Jede HTML-Seite folgt außerdem einer festen Grundstruktur:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Seitentitel – wird in Google angezeigt</title> </head> <body> <h1>Hauptüberschrift</h1> <p>Das ist ein Absatz mit Text.</p> <a href="/kontakt">Kontakt</a> </body> </html>
Es gibt über 100 HTML-Tags – aber im Alltag braucht man davon nur einen Bruchteil. Diese hier sollte jeder kennen:
6 Ebenen. H1 pro Seite nur einmal – direkter SEO-Faktor.
Textblock. Browser setzt automatisch Abstand davor und danach.
Verlinkt intern oder extern. Mit rel="nofollow" für externe Links.
Bindet Bilder ein. Alt-Attribut ist Pflicht für SEO und Barrierefreiheit.
Neutrales Gruppierungselement ohne Semantik – rein fürs Layout.
Semantische Alternative zu <div> für inhaltliche Blöcke.
Ungeordnet (Punkte) oder geordnet (Nummern). Einträge mit <li>.
Rahmen für Eingabefelder, Buttons, Checkboxen und Selects.
Markiert Navigationsbereiche semantisch – wichtig für Screenreader.
Semantisches HTML bedeutet, Tags so einzusetzen, dass sie den Inhalt beschreiben – nicht nur das optische Ergebnis. Google bevorzugt semantisch sauberes HTML, weil es die Seitenstruktur verständlicher macht.
<div class="nav">
<div class="nav-item">
Home
</div>
</div>
<div class="artikel">
<div class="titel">
Headline
</div>
</div><nav>
<a href="/">
Home
</a>
</nav>
<article>
<h1>
Headline
</h1>
</article>Diese Tags im <head> und <body> beeinflussen direkt, wie Google eine Seite bewertet und in den Suchergebnissen darstellt:
Attribute geben Tags zusätzliche Informationen und stehen immer im öffnenden Tag als name="wert"-Paar.
| Attribut | Auf welchem Tag | Wofür |
|---|---|---|
| href | <a> | Ziel-URL des Links |
| src | <img>, <script> | Quelldatei (Bild, Script) |
| alt | <img> | Alternativtext – SEO und Barrierefreiheit |
| class | alle Elemente | CSS-Klasse zuweisen |
| id | alle Elemente | Eindeutiger Bezeichner für Anker und JS |
| target="_blank" | <a> | Link in neuem Tab öffnen |
| rel="nofollow" | <a> | Google anweisen, Link nicht zu verfolgen |
| lang | <html> | Sprache der Seite – wichtig für SEO und Screenreader |
HTML ist die Struktur – es legt fest, was auf der Seite ist. CSS ist das Design – es bestimmt, wie es aussieht. JavaScript ist die Logik – es macht die Seite interaktiv. Zusammen bilden sie das Fundament jeder modernen Website.
Mit WordPress und Elementor nicht zwingend. Aber HTML-Grundkenntnisse helfen enorm bei SEO-Optimierungen, Fehlersuche und individuellem Styling – besonders wenn fertige Templates angepasst werden. Die Grundlagen sind in wenigen Stunden erlernbar.
HTML5 ist seit 2014 der aktuelle Standard. Die wichtigsten Neuerungen: semantische Tags wie <section>, <article> und <nav>, native Video- und Audio-Einbettung ohne Plugins, Canvas-Element für Grafiken und verbesserte Formular-Elemente wie Datums- und E-Mail-Felder.
WordPress generiert HTML automatisch aus dem Inhalt, den du im Editor eingibst. Themes und Page-Builder wie Elementor steuern, welches HTML dabei entsteht. Im Hintergrund läuft immer HTML – WordPress versteckt es nur hinter einer grafischen Oberfläche.
Wir verwenden Cookies, um Ihr Nutzungserlebnis auf unserer Website zu verbessern. Durch die Nutzung unserer Website erklären Sie sich mit der Verwendung von Cookies einverstanden.
Verwalten Sie Ihre Cookie-Einstellungen unten:
Essential cookies enable basic functions and are necessary for the proper function of the website.
Statistics cookies collect information anonymously. This information helps us understand how visitors use our website.
Google Analytics is a powerful tool that tracks and analyzes website traffic for informed marketing decisions.
Service URL: policies.google.com (opens in a new window)
Analyse-Tool von Microsoft, das aufzeichnet, wie Nutzer mit der Website interagieren (z. B. Klicks, Scroll-Bewegungen), um die Benutzerfreundlichkeit zu analysieren und zu verbessern.
Service URL: privacy.microsoft.com (opens in a new window)