In diesem Leitfaden erfährst du, wie HTML-Tags funktionieren, wie du sie verwendest und welche Tags du am häufigsten benötigst.
Wenn du deinen eigenen HTML-Code erstellen willst, solltest du die einzelnen HTML-Tags kennen.
Dieser Leitfaden stellt dir die gängigsten HTML-Tags vor und erklärt dir, wozu du sie einsetzt.
Was sind HTML-Tags?
HTML-Tags sind einfache Anweisungen, die einem Webbrowser vermitteln, wie Text formatiert werden soll. Mithilfe von Tags kannst du Kursivschrift, Zeilenumbrüche, Objekte, Gliederungspunkte und mehr formatieren.
Diese Tags sind in HTML (Hypertext Markup Language) jeder Webseite enthalten. Kurz: HTML ist die Sprache von Webseiten.
Wie werden HTML-Tags von Webseiten gelesen?
Um Inhalte zu entschlüsseln und wiederzugeben, lesen die Server den HTML-Code. Der HTML-Code wird von oben nach unten gelesen, so wie auch dieser Leitfaden gelesen wird.
Zur Formatierung von Content kannst du beliebig viele oder wenige Tags verwenden. Dabei solltest du jedoch ein paar wichtige HTML-Tags und -Regeln besonders beachten.
Ein HTML-Tag besteht immer aus drei Teilen:
- Öffnendes Tag – ein Tag beginnt mit dem Zeichen < >
- Content – kurze Anweisungen, wie das On-Page-Element angezeigt werden soll
- Schließendes Tag – ein Tag schließt mit dem Zeichen </ >
Einige HTML-Tags können jedoch offen sein. Das heißt, dass solche HTML-Tags nicht mit </ > geschlossen werden müssen. Nicht geschlossene Tags werden in der Regel für Metadaten oder Zeilenumbrüche verwendet.
Worin besteht der Unterschied zwischen Attributen und HTML-Tags?
Auch wenn sich dieser Leitfaden mit HTML-Tags beschäftigt, ist es wichtig, den Unterschied zwischen HTML-Tags, HTML-Elementen und HTML-Attributen zu kennen.
Ein HTML-Element ist ein Element auf der Seite; es gehört zum Inhalt der Webseite. Ein HTML-Tag entscheidet, wie ein HTML-Element aussieht. Ein HTML-Attribut beschreibt die Eigenschaften des jeweiligen Elements.
Hier findest du eine Übersicht darüber, wie Elemente, Tags und Attribute zusammenwirken:
- HTML-Tags beinhalten kurze Anweisungen, wie das On-Page-Element angezeigt werden soll. Sie beginnen mit einem < und enden mit einem > und stehen vor und nach dem Elementinhalt. (z.B <b> Bold Tag </b>)
- HTML-Elemente sind die On-Page-Inhalte zwischen den Tags. (<b> Bold Tag </b>)
- HTML-Attribute bieten zusätzliche Informationen zu HTML-Elementen und erscheinen innerhalb des HTML-Tags (z. B. <html lang="en-US">).
| Typ | HTML-Tags | HTML-Elemente | HTML-Attribute |
| Beinhaltet | Anweisungen, wie das On-Page-Element angezeigt werden soll | Anzuzeigende On-Page-Inhalte | Zusätzliche Informationen zu den On-Page-Elementen |
| Aussehen | Beginnt mit < und endet mit > | Innerhalb eines HTML-Tags | Im öffnenden Tag vor den Elementen |
Beispiele für HTML-Tags
<p> Absatz-Tag </p>
<p> und </p> sind die HTML-Tags und „Absatz-Tag“ ist das HTML-Element, also der Text auf der Seite.
Texte, die zwischen dem öffnenden <p> Tag und dem schließenden </p> Tag stehen, werden als Standardabsatz oder Fließtext formatiert.
<h2> Überschrift-Tag </h2>
In diesem Beispiel sind <h2>; und </h2> die HTML-Tags und „Überschrift-Tag“ das HTML-Element, d. h. die Überschrift auf der Seite.
Text, der zwischen dem öffnenden <h2> Tag und dem schließenden </h2> Tag steht, wird mit diesem Tag als Überschrift 2 (eine Art Untertitel) formatiert.
<b> Bold Tag </b>
Hier sind <b> und </b> die HTML-Tags und „Fettschrift-Tag“ das HTML-Element, d. h. der Text auf der Seite.
Mit diesem Tag wird der Text zwischen dem öffnenden <b> Tag und dem schließenden </b> Tag fett formatiert.
<i> Kursiv-Tag </i>
Hier sind <i> und </i> die HTML-Tags und „Kursiv-Tag“ das HTML-Element (also der Text auf der Seite).
Mit diesem Tag wird der Text zwischen dem öffnenden <i> Tag und dem schließenden </i> Tag kursiv formatiert.
<u> Unterstrichen-Tag</u>
Hier sind <u> und </u> die HTML-Tags und „Unterstrichen-Tag“ das HTML-Element, d. h. der Text auf der Seite.
Mit diesem Tag wird der Text zwischen dem öffnenden <u> Tag und dem schließenden </u> Tag unterstrichen formatiert.
Die gängigsten HTML-Tags
Es gibt knapp 100 verschiedene HTML-Tags, die du für deine Webseiten nutzen kannst. Hier ist eine Übersicht der gängigsten HTML-Tags:
| Tag | Typ | Beschreibung |
| <p> | HTML-Text-Tags | Absatz |
| <h1> | HTML-Text-Tags | Überschrift 1 |
| <h2> | HTML-Text-Tags | Überschrift 2 |
| <h3> | HTML-Text-Tags | Überschrift 3 |
| <h4> | HTML-Text-Tags | Überschrift 4 |
| <h5> | HTML-Text-Tags | Überschrift 5 |
| <h6> | HTML-Text-Tags | Überschrift 6 |
| <strong> | HTML-Text-Tags | Starke Betonung |
| <em> | HTML-Text-Tags | Hervorhebung |
| <abbr> | HTML-Text-Tags | Abkürzung |
| <address> | HTML-Text-Tags | Kontaktdaten |
| <bdo> | HTML-Text-Tags | Ändert die Laufrichtung des Texts |
| <blockquote> | HTML-Text-Tags | Content ist aus einer anderen Quelle |
| <cite> | HTML-Text-Tags | Titel eines Werkes, Buches, Website |
| <q> | HTML-Text-Tags | Anführungszeichen für Zitat |
| <code> | HTML-Text-Tags | Zeigt einen Teil des Programmiercodes an |
| <ins> | HTML-Text-Tags | Eingefügter Text |
| <del> | HTML-Text-Tags | Aus dem Dokument gelöschter Text |
| <dfn> | HTML-Text-Tags | Zeichnet einen Begriff innerhalb eines Satzes/einer Phrase als Definition aus |
| <kbd> | HTML-Text-Tags | Tastatur-Eingabe |
| <pre> | HTML-Text-Tags | Vorformatierter Text |
| <samp> | HTML-Text-Tags | Beispiel der Ausgaben eines Computerprogramms |
| <var> | HTML-Text-Tags | Name einer Variable, die in der Mathematik oder Programmierung verwendet wird |
| <br> | HTML-Text-Tags | Einzelner Zeilenumbruch |
| <div> | HTML-Text-Tags | Bereich |
| <a> | HTML-Link-Tags | Anker-Tag für einen Link |
| <base> | HTML-Link-Tags | Basis-URL aller relativen URL innerhalb des Dokuments |
| <img> | HTML-Tags für Bilder und Objekte | Bild |
| <area> | HTML-Tags für Bilder und Objekte | Fläche eines Bilds |
| <map> | HTML-Tags für Bilder und Objekte | Definiert die Imagemap |
| <param> | HTML-Tags für Bilder und Objekte | Parameter für ein <Objekt>-Element |
| <object> | HTML-Tags für Bilder und Objekte | Bettet ein Objekt ein |
| <ul> | HTML-Listen-Tags | Ungeordnete Liste |
| <ol> | HTML-Listen-Tags | Geordnete Liste |
| <li> | HTML-Listen-Tags | Listenelement |
| <dl> | HTML-Listen-Tags | Beginn einer Definitionsliste |
| <dt> | HTML-Listen-Tags | Begriff in Definitionsliste |
| <dd> | HTML-Listen-Tags | Erklärung in einer Definitionsliste |
Eine vollständige Liste aller über 100 HTML-Elemente findest du im Leitfaden von javaTpoint.
So überprüfst du die HTML-Tags deiner Website
Wenn du die HTML-Tags auf deinen Webseiten überprüfen möchtest, schaust du dir am besten den HTML-Code deiner Seite an. Dazu benötigst du nur deinen Webbrowser.
So zeigst du den HTML-Code deiner Webseite an:
- Klicke in Google Chrome mit der rechten Maustaste auf deine Webseite.
- Klicke auf „Untersuchen“.
- Der HTML-Code wird entweder seitlich oder am Ende der Seite in einem Feld angezeigt.
- Suche mit Strg + F nach bestimmten Tags oder Elementen.
Wenn du überprüfen willst, ob deine Website die HTML-Tags richtig verwendet, kannst du ein SEO-Audit deiner Website durchführen. Tools wie Site Audit ermitteln, ob die grundlegenden HTML-Tags und -Attribute korrekt sind und ob deine Seiten zu viel HTML verwenden.
Bevor du ein SEO-Audit mit Site Audit durchführen kannst, musst du zuerst ein Projekt für deine Domain erstellen. Hast du bereits ein Projekt angelegt, kannst du die Option „Site Audit“ in deinem Projekt-Dashboard auswählen:
Das Tool fragt dich dann, ob du deine Ziel-Domain eingeben und zusätzliche Einstellungen vornehmen möchtest:
In den Einstellungen des Tools kannst du den Crawl-Bereich festlegen, URLs ausschließen oder zusätzlichen Zugriff auf die Website gewähren. Klicke auf „Audit starten“. Du wirst benachrichtigt, sobald die Prüfung abgeschlossen ist.
In der Site-Audit-Übersicht werden alle Probleme der Webseite angezeigt:
Klicke auf die Registerkarte „Probleme“, um eine detaillierte Übersicht über alle HTML-Probleme zu erhalten. Das Tool bietet dir Vorschläge, wie du jedes einzelne Problem beheben kannst.
Fazit
HTML muss nicht kompliziert sein. Mit dem Spickzettel aus diesem Leitfaden kannst du passende HTML-Tags für deine Webseiten finden und einsetzen.
Möchtest du mehr über HTML-Attribute erfahren und wie du sie bearbeiten kannst? Dann schau dir unseren Leitfaden über die HTML Attribute an.
Mehr über Site-Audits und die Analyse des HTML-Codes deiner Website findest du in unserem Leitfaden zur Durchführung eines SEO-Audits in 18 Schritten.