HTML Tags

Dokumentstruktur

Tag Start-Tag Attribute & Erklärung End-Tag Bedeutung Beispiel
<!-- <!-- nichts --> Kommentar (wird nicht angezeigt) <!-- Dies ist ein Kommentar -->
<!DOCTYPE html> <!DOCTYPE html> nichts nichts deklariert HTML5-Dokumenttyp <!DOCTYPE html>
<html> <html> lang (z. B. "de", "en", "fr", "es") – Sprache des Dokuments </html> Wurzelelement des HTML-Dokuments <html lang="de">...</html>
<head> <head> nichts </head> enthält Metadaten, Titel, Links zu CSS/JS <head>...</head>
<title> <title> nichts </title> Titel der Seite (Browser-Tab) <title>Meine Seite</title>
<meta> <meta> charset ("UTF-8")
name (z. B. "description", "viewport", "keywords", "author") + content 		keines (void) Metainformationen für Browser/Suchmaschinen <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body> <body> nichts (veraltet: bgcolor, text) </body> sichtbarer Inhalt der Seite <body>...</body>

Textformatierung & Inline-Elemente

Tag Start-Tag Attribute & Erklärung End-Tag Bedeutung Beispiel
<h1> bis <h6> <h1> … <h6> class (beliebiger Name) - damit spezifischer zum Ansprechen von CSS
id (beliebiger Name) - eindeutige Bezeichnung (für Hyperlinks, CSS)
style (z. B. "color:red; font-size:24px; text-align:center") - CSS Code nur für diesen Tag 		</h1> … </h6> Überschriften (h1 = wichtigste) <h1 style="color:#00ffcc">Hauptüberschrift</h1>

Hauptüberschrift
<p> <p> class (beliebiger Name) - damit spezifischer zum Ansprechen von CSS
id (beliebiger Name) - eindeutige Bezeichnung (für Hyperlinks, CSS)
style (z. B. "text-align:justify; margin:20px") - CSS Code nur für diesen Tag 		</p> Textabsatz <p class="intro" style="color:#e0e0e0">Dies ist ein Absatz.</p>

Dies ist ein Absatz.
<br> <br> nichts keines (void) Zeilenumbruch Zeile 1<br>Zeile 2

Zeile 1


Zeile 2
<hr> <hr> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") keines (void) horizontale Trennlinie <hr style="border-color:#00ffcc">
<strong> <strong> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </strong> wichtiger Text (fett, semantisch) <strong style="color:red">wichtiger Text</strong>

wichtiger Text
<em> <em> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </em> betont (kursiv, semantisch) <em>betonter Text</em>

betonter Text
<small> <small> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </small> kleiner Text (z. B. Fußnoten) <small>Kleingedrucktes</small>

Kleingedrucktes
<mark> <mark> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </mark> hervorgehobener Text (gelb) <mark>Markiert</mark>

Markiert
<code> <code> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </code> Quellcode-Darstellung <code>console.log("Hallo");</code>
<pre> <pre> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </pre> vorformatierter Text (Leerzeichen erhalten) <pre>Text mit Leerzeichen</pre>

Text    mit    Leerzeichen
<span> <span> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </span> Inline-Element für Styling Text <span style="color:red">rot</span> weiter

Text rot weiter

Links & Medien

Tag Start-Tag Attribute & Erklärung End-Tag Bedeutung Beispiel
<a> <a> href (z. B. "https://fhelron.danielschlep.de", "/seite.html", "#abschnitt")
target ("_blank", "_self", "_parent", "_top")
rel ("noopener", "noreferrer", "nofollow")
title (beliebiger Tooltip-Text)
download (Dateiname oder leer) 		</a> Hyperlink <a href="https://fhelron.danielschlep.de" target="_blank" rel="noopener">Link</a>

Link
<img> <img> src (Pfad oder URL zum Bild)
alt (beschreibender Text)
width (z. B. "300", "50%")
height (z. B. "200", "auto")
loading ("lazy", "eager")
srcset (kommagetrennte Bildquellen für responsive) 		keines (void) Bild einbinden <img src="media/html_example_image.png" alt="Beschreibung" loading="lazy">

Beschreibung
<figure> <figure> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </figure> Container für Medien (Bilder/Videos/Diagramme) mit Beschreibung <figure><img ...><figcaption>Bildunterschrift</figcaption></figure>

Bildunterschrift
<figcaption> <figcaption> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </figcaption> Beschriftung für <figure> siehe oben

Listen

Tag Start-Tag Attribute & Erklärung End-Tag Bedeutung Beispiel
<ul> <ul> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </ul> ungeordnete Liste (Punkte) <ul class="menu"><li>Punkt</li></ul>

  • Punkt
<ol> <ol> type ("1", "a", "A", "i", "I")
start (z. B. "5")
reversed (leer oder "reversed")
class, id, style 		</ol> geordnete Liste (Nummern/Buchstaben) <ol type="A" start="3"><li>Punkt</li></ol>

  1. Punkt
<li> <li> value (Zahl, nur bei <ol>)
class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") 		</li> Listenelement <li value="10">Element</li>

  • Element
    		•
    <dl> <dl> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </dl> Beschreibungsliste <dl><dt>Begriff</dt><dd>Beschreibung</dd></dl>

    Begriff
    Beschreibung
    <dt> <dt> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </dt> Begriff in Beschreibungsliste siehe oben
    <dd> <dd> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </dd> Beschreibung in Beschreibungsliste siehe oben

    Tabellen

    Tag Start-Tag Attribute & Erklärung End-Tag Bedeutung Beispiel
    <table> <table> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </table> Tabellenstruktur <table class="data">...</table>
    <thead> <thead> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </thead> Tabellenkopf-Bereich <thead><tr><th>Kopf</th></tr></thead>
    <tbody> <tbody> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </tbody> Tabellenkörper siehe Beispiel bei <table>
    <tr> <tr> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </tr> Tabellenzeile siehe oben
    <th> <th> scope ("row", "col", "rowgroup", "colgroup")
    colspan (Zahl)
    rowspan (Zahl)
    class, id, style (siehe oben - "<h1> bis <h6>" und "<p>")     		</th> Kopfzelle (fett) <th colspan="2">Kopf</th>
    <td> <td> colspan (Zahl)
    rowspan (Zahl)
    class, id, style (siehe oben - "<h1> bis <h6>" und "<p>")     		</td> Daten-Zelle <td rowspan="2">Inhalt</td>

    Formulare

    Tag Start-Tag Attribute & Erklärung End-Tag Bedeutung Beispiel
    <form> <form> action (URL oder Pfad)
    method ("get", "post")
    name, id, class, style     		</form> Formular <form action="/submit" method="post">...</form>
    <input> <input> type ("text", "password", "checkbox", "radio", "submit", "reset", "button", "email", "tel", "number", "date", "file", "hidden" usw.)
    name (beliebiger Schlüsselname)
    value (Vorgabetext oder Wert)
    placeholder (Hinweistext)
    required (leer oder "required")
    checked (für checkbox/radio, leer oder "checked")
    class, id, style     		keines (void) Eingabefeld <input type="email" name="email" placeholder="beispiel@domain.de" required>
    <button> <button> onclick (z.B. "")
    type ("submit", "reset", "button")
    class, id, style     		</button> Schaltfläche <button type="submit">Absenden</button>
    <label> <label> for (ID des verknüpften Inputs)
    class, id, style     		</label> Beschriftung (Barrierefreiheit) <label for="email">E-Mail:</label>
    <select> <select> name (Schlüsselname)
    required
    multiple (leer oder "multiple")
    class, id, style     		</select> Dropdown-Auswahl <select name="farbe" required>...</select>
    <option> <option> value (gesendeter Wert)
    selected (leer oder "selected")
    disabled     		</option> Option in Dropdown <option value="rot" selected>Rot</option>
    <textarea> <textarea> name
    rows (Zahl)
    cols (Zahl)
    placeholder
    required
    class, id, style (siehe oben - "<h1> bis <h6>" und "<p>")     		</textarea> mehrzeiliges Textfeld <textarea name="nachricht" rows="5" placeholder="Ihre Nachricht"></textarea>

    Block-Container & Layout (klassisch)

    Tag Start-Tag Attribute & Erklärung End-Tag Bedeutung Beispiel
    <div> <div> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </div> Block-Container (unsichtbar) <div class="container" style="padding:20px">Inhalt</div>

    Semantische HTML5-Elemente

    Tag Start-Tag Attribute & Erklärung End-Tag Bedeutung Beispiel
    <header> <header> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </header> Kopfbereich (Logo, Navigation) <header class="site-header"><h1>Titel</h1></header>
    <nav> <nav> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </nav> Navigationsbereich <nav class="main-nav"><ul>...</ul></nav>
    <main> <main> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </main> Hauptinhalt der Seite <main>...</main>
    <section> <section> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </section> thematischer Abschnitt <section class="about"><h2>Über uns</h2>...</section>
    <article> <article> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </article> selbstständiger Inhalt (Blogbeitrag) <article>...</article>
    <aside> <aside> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </aside> Seitenleiste / ergänzender Inhalt <aside class="sidebar">Werbung</aside>
    <footer> <footer> class, id, style (siehe oben - "<h1> bis <h6>" und "<p>") </footer> Fußbereich (Impressum, Links) <footer>© 2025</footer>