Text-Formatierung

<p> – Absatz

Dies ist ein Absatz mit normalem Fließtext. Absätze sind die grundlegenden Textbausteine.

<p>Dies ist ein Absatz mit normalem Fließtext. Absätze sind die grundlegenden Textbausteine.</p>

<strong> – Stark betonter Text

Stark betonter Text – semantisch wichtiger Text.

<strong>Stark betonter Text</strong>

<em> – Betonter Text

Betonter Text – semantische Hervorhebung.

<em>Betonter Text</em>

<mark> – Markierter Text

Markierter Text – Hervorhebung von Suchergebnissen oder wichtigen Stellen.

<mark>Markierter Text</mark>

<del> – Gelöschter Text

~~Gelöschter Text~~ – zeigt entfernten Inhalt an.

<del>Gelöschter Text</del>

<ins> – Eingefügter Text

Eingefügter Text – zeigt hinzugefügten Inhalt an.

<ins>Eingefügter Text</ins>

<sup> – Hochgestellt

Hochgestellt² – für Fußnoten oder mathematische Potenzen.

Hochgestellt<sup>2</sup>

<sub> – Tiefgestellt

Tiefgestellt H₂O – für chemische Formeln oder Indizes.

Tiefgestellt H<sub>2</sub>O

<code> – Code-Beispiel

Code-Beispiel – Inline-Code oder Variablennamen.

<code>Code-Beispiel</code>

<kbd> – Tastatureingabe

Drücke Strg + C – für Tastatureingaben.

Drücke <kbd>Strg</kbd> + <kbd>C</kbd>

<abbr> – Abkürzung

HTML – Abkürzungen mit Erklärung.

<abbr title="HyperText Markup Language">HTML</abbr>

<cite> – Werktitel

Der große Gatsby – Titel von kreativen Werken.

<cite>Der große Gatsby</cite>

<q> – Inline-Zitat

Ein kurzes Zitat – Inline-Zitate mit automatischen Anführungszeichen.

<q>Ein kurzes Zitat</q>

<dfn> – Definition

Definition – der definierende Begriff eines Terms.

<dfn>Definition</dfn>

<time> – Datum und Zeit

10. Dezember 2024 – maschinenlesbare Zeitangaben.

<time datetime="2024-12-10">10. Dezember 2024</time>

<blockquote> – Längeres Zitat

Ein längeres Zitat, das als eigenständiger Block dargestellt wird. Oft wird die Quelle mit dem cite-Attribut angegeben.
https://example.com

<blockquote cite="https://example.com">
  <p>Ein längeres Zitat, das als eigenständiger Block dargestellt wird.</p>
</blockquote>

<pre> – Vorformatierter Text

Vorformatierter Text
  mit   Leerzeichen
    und Zeilenumbrüchen

<pre>
Vorformatierter Text
  mit   Leerzeichen
    und Zeilenumbrüchen
</pre>

<hr> – Horizontale Linie

Thematischer Bruch oder Abschnittstrenner.

<hr>

<address> – Kontaktinformation

Kontaktieren Sie uns:
E-Mail: info@example.com
Telefon: 012345-67890

<address>
  Kontaktieren Sie uns:<br>
  E-Mail: <a href="mailto:info@example.com">info@example.com</a><br>
  Telefon: 012345-67890
</address>

Überschriften

<h1> – Überschrift Ebene 1

Hauptüberschrift Ebene 1

<h1>Hauptüberschrift Ebene 1</h1>

<h2> – Überschrift Ebene 2

Überschrift Ebene 2

<h2>Überschrift Ebene 2</h2>

<h3> – Überschrift Ebene 3

Überschrift Ebene 3

<h3>Überschrift Ebene 3</h3>

<h4> – Überschrift Ebene 4

Überschrift Ebene 4

<h4>Überschrift Ebene 4</h4>

<h5> – Überschrift Ebene 5

Überschrift Ebene 5

<h5>Überschrift Ebene 5</h5>

<h6> – Überschrift Ebene 6

Überschrift Ebene 6

<h6>Überschrift Ebene 6</h6>

Listen

<ul> und <li> – Ungeordnete Liste

Listenelement 1
Listenelement 2
Listenelement 3

<ul>
  <li>Listenelement 1</li>
  <li>Listenelement 2</li>
  <li>Listenelement 3</li>
</ul>

<ol> und <li> – Geordnete Liste

Erster Schritt
Zweiter Schritt
Dritter Schritt

<ol>
  <li>Erster Schritt</li>
  <li>Zweiter Schritt</li>
  <li>Dritter Schritt</li>
</ol>

<dl>, <dt> und <dd> – Definitionsliste

Begriff: Definition des Begriffs
Weiterer Begriff: Weitere Definition

<dl>
  <dt>Begriff</dt>
  <dd>Definition des Begriffs</dd>
  <dt>Weiterer Begriff</dt>
  <dd>Weitere Definition</dd>
</dl>

Links & Navigation

<a> – Link

Ein Link – Hyperlink zu einer anderen Seite.

<a href="https://example.com">Ein Link</a>

<nav> – Navigation

<nav>
  <ul>
    <li><a href="#home">Startseite</a></li>
    <li><a href="#about">Über uns</a></li>
    <li><a href="#contact">Kontakt</a></li>
  </ul>
</nav>

Medien

<img> – Bild

<img src="demo.jpg" alt="Beispielbild" width="300" height="200">

<figure> und <figcaption> – Abbildung mit Bildunterschrift

<figure>
  <img src="demo.jpg" alt="Landschaftsfoto">
  <figcaption>Eine schöne Landschaft im Herbst</figcaption>
</figure>

<picture> und <source> – Responsives Bild

<picture>
  <source srcset="bild-gross.jpg" media="(min-width: 800px)">
  <source srcset="bild-mittel.jpg" media="(min-width: 400px)">
  <img src="bild-klein.jpg" alt="Responsives Bild">
</picture>

<audio> und <source> – Audio

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Ihr Browser unterstützt kein Audio.
</audio>

<video>, <source> und <track> – Video

<video controls width="320" height="240">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <track kind="subtitles" src="untertitel-de.vtt" srclang="de" label="Deutsch">
  Ihr Browser unterstützt kein Video.
</video>

Tabellen

<table> – Tabelle

Spalte 1	Spalte 2
Daten 1	Daten 2
Daten 3	Daten 4

<table>
  <thead>
    <tr>
      <th>Spalte 1</th>
      <th>Spalte 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Daten 1</td>
      <td>Daten 2</td>
    </tr>
  </tbody>
</table>

<colgroup> und <col> – Spaltenformatierung

A	B	C
1	2	3

<table>
  <colgroup>
    <col style="background-color: #f0f0f0;">
    <col span="2" style="background-color: #e0e0e0;">
  </colgroup>
  <tr><td>A</td><td>B</td><td>C</td></tr>
</table>

Formulare

<form> – Formular

<form action="/submit" method="post">
  Formular
</form>

<label> – Beschriftung

E-Mail-Adresse:

<label for="email">E-Mail-Adresse:</label>
<input type="email" id="email" name="email">

<input> – Eingabefeld

<input type="text" name="username" placeholder="Benutzername">

<textarea> – Mehrzeiliges Textfeld

<textarea name="nachricht" rows="4" cols="50" placeholder="Ihre Nachricht"></textarea>

<button> – Schaltfläche

Klick mich

<button type="button">Klick mich</button>

<input type=“checkbox“> – Checkbox

Newsletter abonnieren

<label>
  <input type="checkbox" name="newsletter" value="ja">
  Newsletter abonnieren
</label>

<input type=“radio“> – Radio-Button

Frau Herr Divers

<label>
  <input type="radio" name="anrede" value="frau">
  Frau
</label>
<label>
  <input type="radio" name="anrede" value="herr">
  Herr
</label>
<label>
  <input type="radio" name="anrede" value="divers">
  Divers
</label>

<select> und <option> – Auswahlmenü

<select name="land">
  <option value="de">Deutschland</option>
  <option value="at">Österreich</option>
  <option value="ch">Schweiz</option>
</select>

<optgroup> – Optionsgruppe

<select name="fahrzeug">
  <optgroup label="PKW">
    <option value="vw">Volkswagen</option>
    <option value="bmw">BMW</option>
  </optgroup>
  <optgroup label="LKW">
    <option value="man">MAN</option>
    <option value="mercedes">Mercedes</option>
  </optgroup>
</select>

<fieldset> und <legend> – Formulargrupppe

Persönliche Informationen Vorname:
Nachname:

<fieldset>
  <legend>Persönliche Informationen</legend>
  <label>Vorname: <input type="text" name="vorname"></label><br>
  <label>Nachname: <input type="text" name="nachname"></label>
</fieldset>

<datalist> – Autovervollständigung

<input list="browser" name="browser" placeholder="Browser wählen">
<datalist id="browser">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>

<progress> – Fortschrittsanzeige

70%

<progress value="70" max="100">70%</progress>

Interaktive Elemente

<details> und <summary> – Aufklappbarer Inhalt

Mehr Informationen anzeigen

Hier sind die zusätzlichen Details, die zunächst verborgen sind.

<details>
  <summary>Mehr Informationen anzeigen</summary>
  <p>Hier sind die zusätzlichen Details, die zunächst verborgen sind.</p>
</details>

<dialog> – Dialog-Fenster

<dialog open>
  <p>Dies ist ein Dialog-Fenster.</p>
  <button>Schließen</button>
</dialog>

Table of Contents