Agentic Coding
Start / Ressourcen / HTML-Referenz

HTML-Referenz

Kompakte Kurzreferenz aller wichtigen HTML-Elemente, gruppiert nach Kategorie. Jede Karte zeigt Tag-Name, Beschreibung und ein minimales Code-Beispiel.

Grundstruktur
<!DOCTYPE html>
Deklariert das Dokument als HTML5.
<!DOCTYPE html>
<html>
Wurzelelement des gesamten Dokuments.
<html lang="de">...</html>
<head>
Enthalt Metadaten, Titel und verlinkte Ressourcen.
<head>
  <meta charset="UTF-8">
  <title>Titel</title>
</head>
<meta>
Definiert Metainformationen (Zeichensatz, Viewport usw.).
<meta charset="UTF-8">
<meta name="viewport"
  content="width=device-width,
  initial-scale=1.0">
<title>
Seitentitel, erscheint im Browser-Tab.
<title>Meine Seite</title>
<body>
Enthalt den sichtbaren Seiteninhalt.
<body>
  <h1>Hallo Welt</h1>
</body>
<link>
Verknupft externe Ressourcen (z.B. CSS-Dateien).
<link rel="stylesheet"
  href="style.css">
<script>
Bindet JavaScript ein (extern oder inline).
<script src="app.js"></script>
Text
<h1> bis <h6>
Uberschriften von Ebene 1 (groesste) bis 6 (kleinste).
<h1>Haupttitel</h1>
<h2>Untertitel</h2>
<p>
Absatz (Paragraph) fur Fliesstext.
<p>Dies ist ein Absatz.</p>
<br>
Erzwingt einen Zeilenumbruch.
Zeile eins<br>Zeile zwei
<hr>
Horizontale Trennlinie zwischen Abschnitten.
<p>Abschnitt 1</p>
<hr>
<p>Abschnitt 2</p>
<strong>
Semantisch wichtiger Text (fett dargestellt).
<strong>Wichtig!</strong>
<em>
Betonter Text (kursiv dargestellt).
<em>betont</em>
<blockquote>
Langeres Zitat, eingeruckt dargestellt.
<blockquote>
  Ein beruehmtes Zitat.
</blockquote>
<code>
Inline-Code in Monospace-Schrift.
Die Funktion <code>alert()</code>
<pre>
Vorformatierter Text, behalt Leerzeichen und Umbruche.
<pre><code>
function greet() {
  console.log("Hallo");
}
</code></pre>
Links und Medien
<a>
Hyperlink zu einer anderen Seite oder Ressource.
<a href="https://example.com"
   target="_blank">
  Linktext
</a>
<img>
Bild einbetten. Alt-Text ist Pflicht!
<img src="bild.jpg"
     alt="Beschreibung">
<video>
Video mit nativen Browser-Controls.
<video src="clip.mp4"
       controls>
</video>
<audio>
Audio-Player im Browser.
<audio src="ton.mp3"
       controls>
</audio>
Listen
<ul>
Unsortierte Liste (Aufzahlungszeichen).
<ul>
  <li>Eintrag A</li>
  <li>Eintrag B</li>
</ul>
<ol>
Nummerierte (sortierte) Liste.
<ol>
  <li>Schritt 1</li>
  <li>Schritt 2</li>
</ol>
<li>
Einzelnes Listenelement in <ul> oder <ol>.
<li>Listenpunkt</li>
<dl> / <dt> / <dd>
Definitionsliste mit Begriffen und Beschreibungen.
<dl>
  <dt>TEI</dt>
  <dd>Text Encoding Initiative</dd>
</dl>
Tabellen
<table>
Container fur tabellarische Daten.
<table>...</table>
<thead> / <tbody>
Gruppiert Kopf- und Datenzeilen der Tabelle.
<table>
  <thead>...</thead>
  <tbody>...</tbody>
</table>
<tr>
Eine Tabellenzeile (table row).
<tr>
  <td>Zelle 1</td>
  <td>Zelle 2</td>
</tr>
<th>
Kopfzelle mit fetter Schrift (in <thead>).
<th>Spaltenname</th>
<td>
Datenzelle innerhalb einer Zeile.
<td>Inhalt</td>
<caption>
Uberschrift/Beschriftung fur die gesamte Tabelle.
<table>
  <caption>Briefmetadaten</caption>
  ...
</table>
Formulare
<form>
Container fur Eingabefelder und Steuerelemente.
<form action="/send"
      method="post">
  ...
</form>
<input> (text, email)
Einzeiliges Eingabefeld fur Text oder E-Mail.
<input type="text"
       name="name"
       placeholder="Name">
<input type="email"
       name="email">
<input> (number, date)
Eingabefelder fur Zahlen und Datumsangaben.
<input type="number"
       min="1" max="100">
<input type="date"
       name="datum">
<input> (checkbox, radio)
Checkboxen (Mehrfachauswahl) und Radios (Einzelauswahl).
<input type="checkbox"
       id="ok" name="ok">
<label for="ok">Akzeptieren</label>

<input type="radio"
       name="typ" value="a">
<select> / <option>
Dropdown-Auswahl mit vordefinierten Optionen.
<select name="stadt">
  <option value="graz">Graz</option>
  <option value="wien">Wien</option>
</select>
<textarea>
Mehrzeiliges Textfeld fur langere Eingaben.
<textarea name="nachricht"
  rows="4" cols="40">
</textarea>
<button>
Schaltflache zum Absenden oder fur Aktionen.
<button type="submit">
  Absenden
</button>
<label>
Beschriftung fur ein Formularfeld (verknupft via for/id).
<label for="email">E-Mail:</label>
<input type="email" id="email">
<fieldset> / <legend>
Gruppiert zusammengehorige Felder mit Uberschrift.
<fieldset>
  <legend>Kontaktdaten</legend>
  <input type="text" name="name">
</fieldset>
Semantik
<header>
Kopfbereich einer Seite oder eines Abschnitts.
<header>
  <h1>Seitentitel</h1>
  <nav>...</nav>
</header>
<main>
Hauptinhalt der Seite (nur einmal pro Dokument).
<main>
  <article>...</article>
</main>
<footer>
Fussbereich mit Copyright, Kontaktdaten usw.
<footer>
  <p>Uni Graz 2026</p>
</footer>
<nav>
Navigationsbereich mit Links.
<nav>
  <ul>
    <li><a href="/">Start</a></li>
  </ul>
</nav>
<article>
Eigenstandiger Inhalt (Blogeintrag, Brief usw.).
<article>
  <h2>Brieftitel</h2>
  <p>Brieftext...</p>
</article>
<section>
Thematischer Abschnitt innerhalb einer Seite.
<section id="kapitel1">
  <h2>Kapitel 1</h2>
  <p>Inhalt...</p>
</section>
<aside>
Erganzende Inhalte (Sidebar, Randnotiz).
<aside>
  <p>Siehe auch: ...</p>
</aside>
<figure> / <figcaption>
Abbildung mit optionaler Bildunterschrift.
<figure>
  <img src="karte.png"
       alt="Karte">
  <figcaption>Abb. 1</figcaption>
</figure>
Meta/Head-Elemente
meta charset
Zeichenkodierung des Dokuments (immer UTF-8).
<meta charset="UTF-8">
meta viewport
Steuert die Darstellung auf mobilen Geraten.
<meta name="viewport"
  content="width=device-width,
  initial-scale=1.0">
link rel="stylesheet"
Bindet eine externe CSS-Datei ein.
<link rel="stylesheet"
  href="css/style.css">
script defer
Ladt JS nach dem HTML-Parsen (empfohlen).
<script src="app.js" defer>
</script>