Onlinewachsen De White Logo Icon
Projekt starten
    [

    HTML

    ]
    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

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

    <p>
    Absatz

    Textblock. Browser setzt automatisch Abstand davor und danach.

    <a>
    Link

    Verlinkt intern oder extern. Mit rel="nofollow" für externe Links.

    <img>
    Bild

    Bindet Bilder ein. Alt-Attribut ist Pflicht für SEO und Barrierefreiheit.

    <div>
    Container

    Neutrales Gruppierungselement ohne Semantik, rein fürs Layout.

    <section>
    Abschnitt

    Semantische Alternative zu <div> für inhaltliche Blöcke.

    <ul> / <ol>
    Listen

    Ungeordnet (Punkte) oder geordnet (Nummern). Einträge mit <li>.

    <form>
    Formular

    Rahmen für Eingabefelder, Buttons, Checkboxen und Selects.

    <nav>
    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:

    T
    Title-Tag
    <title>Seitentitel</title>
    Wird in den Suchergebnissen als Klickbare Überschrift angezeigt. Wichtigster On-Page-Rankingfaktor.
    Hoch
    M
    Meta Description
    <meta name="description" content="...">
    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
    Alt-Attribut
    <img alt="Beschreibung">
    Alternativtext für Bilder. Wichtig für Google Bildersuche, Barrierefreiheit und PageSpeed.
    Mittel
    CA
    Canonical-Tag
    <link rel="canonical" href="...">
    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.

    AttributAuf welchem TagWofür
    href<a>Ziel-URL des Links
    src<img>, <script>Quelldatei (Bild, Script)
    alt<img>Alternativtext: SEO und Barrierefreiheit
    classalle ElementeCSS-Klasse zuweisen
    idalle ElementeEindeutiger 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

    • ReactReact ist eine Open-Source-JavaScript-Bibliothek zur Entwicklung von Benutzeroberflächen, die 2013 von Meta veröffentlicht wurde.
    • Next.jsNext.js ist ein Open-Source-Framework für React, das von Vercel entwickelt wird.
    • VercelVercel ist eine Cloud-Plattform für das Hosting und Deployment von Frontend-Anwendungen und serverlosen Funktionen.

    Zuletzt fachlich geprüft am

    Zurück zum Glossar

    KI-Sichtbarkeits check

    Kennt dein Unternehmen?

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

    MENU

    • Webdesign
    Visuell stark. Intuitiv bedienbar. Auf Wirkung ausgerichtet.
    • Development
    Wir bauen Systeme die funktionieren und bleiben.
    • Branding
    Identität, die bleibt. Marken, die man fühlt.
    • Scaling
    Mehr Sichtbarkeit. Mehr Anfragen. Messbares Wachstum.

    RESSOURCEN

    Linkedin-in Instagram Whatsapp
    Login
    Registrieren

    Kennt ChatGPT dein Unternehmen?

    KI-Sichtbarkeits check

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

    „5 Sterne sind absolut verdient!Von der ersten Idee bis zur fertigen Website hat alles gepasst. Das Team arbeitet kreativ, modern und mit einem richtig guten Gespür für Design und Markenauftritt. Unsere Website für Running Late ist jung, frisch und genau so geworden, wie wir sie uns vorgestellt haben.Besonders überzeugt hat uns die schnelle Kommunikation, die Zuverlässigkeit und die Fähigkeit, eigene Ideen einzubringen und gleichzeitig unsere Wünsche perfekt umzusetzen.Wer eine Webagentur sucht, die nicht nur schöne Webseiten gestaltet, sondern auch mitdenkt und individuelle Lösungen entwickelt, ist hier genau richtig. Vielen Dank für die tolle Zusammenarbeit. Wir freuen uns schon auf die nächsten gemeinsamen Projekte!“

    Michelle Friedrich Runninglatetogo