---
title: "HTML"
siteName: "onlinewachsen.de"
url: "https://onlinewachsen.de/glossar/development/html/"
canonical: "https://onlinewachsen.de/glossar/development/html/"
markdown: "https://onlinewachsen.de/glossar/development/html.md"
describedby: "https://onlinewachsen.de/llms.txt"
description: "HTML (HyperText Markup Language) ist eine Auszeichnungssprache zur Strukturierung von Webinhalten."
datePublished: "2026-03-06T08:12:16+00:00"
dateModified: "2026-09-23T21:13:03+00:00"
author:
  name: "onlinewachsen"
publisher:
  name: "onlinewachsen.de"
  url: "https://onlinewachsen.de/"
language: "de"
contentType: "text/markdown"
categories:
  - "Development"
---

# HTML

> HTML (HyperText Markup Language) ist eine Auszeichnungssprache zur Strukturierung von Webinhalten.

### Abschnitte

Artikel teilen

Definition

**HTML** (HyperText Markup Language) ist eine Auszeichnungssprache zur Strukturierung von Webinhalten. HTML-Tags geben Elementen wie Überschriften, Absätzen, Links und Bildern eine semantische Bedeutung, die Browser und Suchmaschinen interpretieren können.

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.

Kostenloses Werkzeug

Mit dem **KI-Sichtbarkeits-Check von onlinewachsen.de** lässt sich kostenlos und ohne Anmeldung prüfen, ob ChatGPT, Gemini, Claude und Perplexity ein Unternehmen nennen und richtig beschreiben. Eine E-Mail wird nur verschickt, wenn man sie ausdrücklich anfordert.

[Zum KI-Sichtbarkeits-Check](https://onlinewachsen.de/ki-sichtbarkeits-check.md)

## So sieht HTML aus

HTML besteht aus **Tags**: Befehlen in spitzen Klammern. Jedes öffnende Tag hat ein schließendes Gegenstück. Dazwischen liegt der Inhalt.

Aufbau eines HTML-Elements

<a href="https://onlinewachsen.de">Jetzt starten</a>

<a>, der Link-Tag

- Attribut: href. Das Ziel
- Wert: Die URL in Anführungszeichen

Inhalt

Der sichtbare Linktext

Jede HTML-Seite folgt außerdem einer festen Grundstruktur:

index.html

```
<!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>
```

## Die wichtigsten HTML-Tags

Es gibt über 100 HTML-Tags, aber im Alltag braucht man davon nur einen Bruchteil. Diese hier sollte jeder kennen:

<h1>, <h6>

- Überschriften: 6 Ebenen. H1 pro Seite nur einmal, direkter SEO-Faktor.
- Absatz: Textblock. Browser setzt automatisch Abstand davor und danach.
- Link: Verlinkt intern oder extern. Mit `rel="nofollow"` für externe Links.
- Bild: Bindet Bilder ein. Alt-Attribut ist Pflicht für SEO und Barrierefreiheit.
- Container: Neutrales Gruppierungselement ohne Semantik, rein fürs Layout.
- Abschnitt: Semantische Alternative zu <div> für inhaltliche Blöcke.

<ul> / <ol>

- Listen: Ungeordnet (Punkte) oder geordnet (Nummern). Einträge mit <li>.
- Formular: Rahmen für Eingabefelder, Buttons, Checkboxen und Selects.
- Navigation: Markiert Navigationsbereiche semantisch, wichtig für Screenreader.

## Semantisch vs. nicht-semantisch

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.

Nicht semantisch

```
<div class="nav">
  <div class="nav-item">
    Home
  </div>
</div>

<div class="artikel">
  <div class="titel">
    Headline
  </div>
</div>
```

Semantisch korrekt

```
<nav>
  <a href="https://onlinewachsen.de/">
    Home
  </a>
</nav>

<article>
  <h1>
    Headline
  </h1>
</article>
```

## HTML-Tags mit SEO-Relevanz

Diese Tags im <head> und <body> beeinflussen direkt, wie Google eine Seite bewertet und in den Suchergebnissen darstellt:

Title-Tag

<title>Seitentitel</title>

Wird in den Suchergebnissen als Klickbare Überschrift angezeigt. Wichtigster On-Page-Rankingfaktor.

Hoch

Meta Description

Kurzbeschreibung unter dem Titel im Suchergebnis. Beeinflusst die Klickrate, nicht direkt das Ranking.

Mittel

H1

H1-Überschrift

<h1>Hauptüberschrift</h1>

Nur einmal pro Seite. Sollte das Primär-Keyword enthalten und den Seiteninhalt klar benennen.

Hoch

Alt-Attribut

Alternativtext für Bilder. Wichtig für Google Bildersuche, Barrierefreiheit und PageSpeed.

Mittel

Canonical-Tag

Verhindert Duplicate-Content-Probleme indem es die bevorzugte URL einer Seite definiert.

Hoch

## Häufige HTML-Attribute

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 |

## Häufige Fragen zu HTML

Was ist der Unterschied zwischen HTML, CSS und JavaScript?

**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.

Muss ich HTML können, um eine Website zu bauen?

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.

Was ist HTML5 und was ist neu daran?

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.

Wie hängen HTML und WordPress zusammen?

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.

## Verwandte Begriffe

- [React](https://onlinewachsen.de/glossar/development/react.md)React ist eine Open-Source-JavaScript-Bibliothek zur Entwicklung von Benutzeroberflächen, die 2013 von Meta veröffentlicht wurde.
- [Next.js](https://onlinewachsen.de/glossar/development/next-js.md)Next.js ist ein Open-Source-Framework für React, das von Vercel entwickelt wird.
- [Vercel](https://onlinewachsen.de/glossar/development/vercel.md)Vercel ist eine Cloud-Plattform für das Hosting und Deployment von Frontend-Anwendungen und serverlosen Funktionen.

Zuletzt fachlich geprüft am 23. September 2026

[Zurück zum Glossar](https://onlinewachsen.de/glossar.md)

### KI-Sichtbarkeits check

Kennt dein Unternehmen?

In 2 Minuten erfährst du, ob und wie KI-Modelle über deine Marke sprechen.

## Weiterführend

- [Kostenloser KI-Sichtbarkeits-Check für Unternehmen & Marken](https://onlinewachsen.de/ki-sichtbarkeits-check.md)