Diese Seite ist eine Nachschlagehilfe, keine Anleitung. Zu jedem Bereich gibt es einen ausführlichen Beitrag – die Verweise stehen jeweils darunter.

Grundgerüst

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Titel</title>
  <meta name="description" content="Beschreibung">
  <link rel="stylesheet" href="/stil.css">
</head>
<body>
  <!-- Inhalt -->
</body>
</html>

Ausführlich: body · head

Bereiche

<header>   Einleitung eines Abschnitts
<nav>      Navigation
<main>     Hauptinhalt, einmal pro Dokument
<article>  eigenständiger Beitrag
<section>  thematischer Abschnitt mit Überschrift
<aside>    Nebeninhalt
<footer>   Abschluss eines Abschnitts
<div>      Gruppierung ohne Bedeutung

Ausführlich: div · semantisches HTML

Text

<h1> … <h6>  Überschriften, Ebenen nicht überspringen
<p>          Absatz
<strong>     wichtig
<em>         betont, sinnverändernd
<b>          abgesetzt ohne Begründung
<i>          abweichend, etwa Fremdwort
<br>         Umbruch, der zum Inhalt gehört
<hr>         thematischer Wechsel
<code>       Quelltext in der Zeile
<pre>        erhält Umbrüche und Leerzeichen
<blockquote> längeres Zitat
<sub> <sup>  tief- und hochgestellt

Ausführlich: Überschriften · Absätze · code und pre

Listen

<ul><li>…</li></ul>     Reihenfolge beliebig
<ol><li>…</li></ol>     Reihenfolge mit Bedeutung
<dl><dt>…<dd>…</dl>     Begriff und Erklärung

Ausführlich: Listen

Verweise und Medien

<a href="/ziel">Text</a>
<a href="#kennung">Sprungziel</a>
<a href="mailto:…"> <a href="tel:…">

<img src="…" alt="…" width="800" height="450">
<picture><source …><img …></picture>
<video controls><source …><track …></video>
<figure><img …><figcaption>…</figcaption></figure>

Ausführlich: Verweise · Bilder

Tabellen

<table>
  <caption>Beschriftung</caption>
  <thead><tr><th scope="col">…</th></tr></thead>
  <tbody><tr><th scope="row">…</th><td>…</td></tr></tbody>
</table>

Ausführlich: Tabellen

Formulare

<form action="/senden" method="post">
  <label for="mail">E-Mail</label>
  <input type="email" id="mail" name="mail" required>
  <button type="submit">Absenden</button>
</form>

Feldtypen: text, email, tel, url, number, date, color, range, file, checkbox, radio, password, hidden

Ausführlich: Formularelemente · Input-Typen

Häufige Attribute

id="…"          einmalig im Dokument
class="…"       mehrfach, durch Leerzeichen getrennt
lang="de"       Sprache des Inhalts
title="…"       Sprechblase, nicht für Wichtiges
data-eigen="…"  eigene Angabe für JavaScript
hidden          blendet ein Element aus