Zum Hauptinhalt

Alle Elemente

Formularelemente

Text-Eingaben

Zahlen & Bereiche

60

Datum & Zeit

Farbe & Datei

Checkboxen & Radios

Checkboxen
Radiobuttons

Textarea

Select (Auswahl)

Datalist

Progress & Meter

70 % Lädt… 20 % 50 % 85 %

Buttons




Link als Button Link Primary Link Danger

Zustände


Alle HTML-Elemente

Überschriften

Überschrift H1

Überschrift H2

Überschrift H3

Überschrift H4

Überschrift H5
Überschrift H6

Absätze & Textblöcke

Dies ist ein normaler Absatz. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Ein zweiter Absatz mit fettem Text, kursivem Text und kleinem Text. Außerdem ein Link im Fließtext.

Dies ist ein Blockzitat. „Das Wesentliche ist für die Augen unsichtbar."

Antoine de Saint-Exupéry
// Codeblock (pre + code)
function grüßen(name) {
  return `Hallo, ${name}!`;
}
console.log(grüßen('Welt'));

Inline-Code: const x = 42;


Inline-Textelemente

strong — Wichtig

em — Betont

b — Fett (ohne Betonung)

i — Kursiv (ohne Betonung)

u — Unterstrichen

s — Durchgestrichen (nicht mehr gültig)

del — Gelöscht

ins — Eingefügt

mark — Hervorgehoben

small — Klein

subskript und superskript

HTML — Abkürzung (mit title)

cite — Quellenangabe

dfn — Definition

q — Inline-Zitat

code — Inline-Code

Strg + S — Tastatureingabe

samp — Programmausgabe

var — Variable

— Zeitangabe

Zweiundvierzig — Maschinenlesbare Daten

bdo — Rückwärts

Ein بِسْمِ isolierter Text (bdi)

(かん)() — Ruby-Annotation

Langeszusammengesetzteswort — wbr (Umbruchmöglichkeit)

Listen

Ungeordnete Liste (ul)

Geordnete Liste (ol)

  1. Schritt eins
  2. Schritt zwei
    1. Teilschritt 2a
    2. Teilschritt 2b
  3. Schritt drei

Definitionsliste (dl) — App-Stil

Name
Max Mustermann
Telefon
06221 / 12 34 56
Status
Aktiv
Pflegegrad
3

Menu

  • Tabellen

    Beispiel-Tabelle mit Kopf, Körper und Fuß
    Name Ort Stunden
    Rolf Engel Heidelberg 12
    Petra Yilmaz Mannheim 24
    Hannah Schröder Weinheim 8
    Gesamt 44

    Medien

    Bild (img)

    App-Icon

    Figure + Figcaption

    App-Icon im Figure
    Abbildung 1: Das App-Icon

    Picture (mit Fallback)

    Picture-Element

    SVG (inline)

    SVG

    Canvas

    Canvas wird nicht unterstützt.

    Audio

    Video

    Interaktive Elemente

    Details & Summary

    Klicken zum Aufklappen

    Dieser Inhalt ist jetzt sichtbar. Er war zuvor versteckt.

    Bereits geöffnet

    Dieses Details-Element ist standardmäßig geöffnet.

    Dialog

    Dialog-Titel

    Dies ist ein modaler Dialog. Er überlagert den Rest der Seite.

    App-Komponenten

    Status-Badges (data-status)

    OK Warnung Fehler Info

    Avatar (data-initials)

    MM VH AS

    Karten (article) — mit data-border

    Semantische Abschnitte

    Article > Header

    Inhalt eines eigenständigen Artikels.

    Article > Footer
    Kontakt: info@beispiel.de
    Bergstr. 12, 69120 Heidelberg

    Eingebettete Inhalte

    Iframe

    Sonstige Elemente

    Horizontale Linie (hr)


    Zeilenumbruch (br)

    Zeile eins.
    Zeile zwei.
    Zeile drei.

    Trennlinie & Absatz-Kombination

    Text vor der Linie.


    Text nach der Linie.

    ← Zurück zur Startseite