Styleguide

Dieser Beispiel-Styleguide zeigt die wichtigsten WYSIWYG-Elemente für umfangreiche redaktionelle Inhalte auf Seiten oder in Artikeln. Er ist nicht vollständig, deckt aber die gängigsten benötigten Elemente ab.

Verwenden Sie class="intro" für einen einleitenden Text, der stärker hervorstechen soll als ein Standardabsatz.

Verwenden Sie class="small" für ergänzende Hinweise, die lesbar bleiben, sich aber klar vom Fließtext abheben.

Verwenden Sie class="citation" für Quellenangaben, kompakte Credits, Bildunterschriften oder redaktionelle Hinweise.

Redaktioneller Text

Redaktionelle Seiten können wichtige Aussagen, Betonungen, entfernte Formulierungen, hervorgehobene Begriffe und Inline-Elemente code-style labels kombinieren.

Verwenden Sie <mark> zur Hervorhebung einer Formulierung, <del> oder <s> für entfernten oder nicht mehr aktuellen Text und <code> für wörtliche Bezeichnungen, Dateinamen, Einstellungen oder kurze technische Verweise.

Verwenden Sie class="callout" für kurze Hinweise, Launch-Notizen, Kaufinformationen oder wichtige Richtlinien.

Überschriftenskalierung

Überschriften sollten eine klare Gliederung schaffen. Reservieren Sie <h1> für den primären Seitentitel, wenn die Vorlage keinen Titel bereitstellt, und verwenden Sie <h2> sowie <h3> für Seitenabschnitte.

Überschrift Ebene eins für Hautpflege

Überschrift Ebene zwei für Seitenabschnitte

Überschrift Ebene drei für Unterabschnitte

Überschrift Ebene vier für gruppierte Details

Überschrift Ebene fünf für kompakte Bezeichnungen

Überschrift Ebene sechs für Metadaten

Inline-Semantik

Verwenden Sie <kbd> für Tastaturbefehle wie Ctrl + K, <abbr> für Abkürzungen wie SEO und <dfn> zur Einführung eines Begriffs wie strukturierte Inhalte.

Verwenden Sie <time> für Daten wie 25. Juni 2026, <cite> für Titel oder Quellen wie The Align Journal, <var> für Variablen wie n und <samp> für Beispielausgaben wie Erfolgreich gespeichert.

Inline-Beispiele umfassen außerdem Fett, Kursiv, Unterstrichen, Durchgestrichen, _Tiefgestellt, ^Hochgestellt und einen Produktlink.

Adresse

Verwenden Sie <address> für Kontakt- oder Standortangaben, nicht für allgemeine Postanschriften.

Listen

Listen sollten übersichtliche Hinweise ermöglichen und zugleich genügend Text für Umbrüche, Links und Inline-Formatierungen enthalten.

Ungeordnete Liste mit geordneten Schritten

• Vergleichen Sie Produkte sorgfältig. Beginnen Sie mit einer weiteren empfohlenen Hautpflege und prüfen Sie anschließend die wichtigsten Details für den vorgesehenen Gebrauch.
• Planen Sie den Kaufweg. Ein Listenelement kann verschachtelte Schritte enthalten:
  1. Bestätigen Sie Anforderungen an Größe, Material oder Stil.
  2. Prüfen Sie ergänzende Inhalte wie FAQs und Richtlinienseiten.
  3. Wählen Sie die Option, die Passform, Finish und Verfügbarkeit am besten ausbalanciert.
• Formulieren Sie prägnant, aber mit ausreichend Kontext, damit jeder Punkt auch beim schnellen Überfliegen verständlich bleibt.

Geordnete Liste mit ungeordneten Hinweisen

1. Stellen Sie den Zweck der Seite mit einem klaren Absatz und einem relevanten Link vor.
2. Unterstützen Sie die Kernaussage mit nützlichen Details:
   • Heben Sie wichtige Begriffe sparsam hervor.
   • Verwenden Sie <code> für wörtliche Bezeichnungen oder Snippets.
   • Setzen Sie Fett oder Betonungen nur ein, wenn sie Lesern helfen.
3. Schließen Sie den Abschnitt mit einem klaren nächsten Gedanken ab, nicht mit einem unvollständigen Fragment.

Zitate und Hinweise

Verwenden Sie Blockzitate für Quellen, Testimonials, redaktionelle Auszüge oder Aussagen, die sich visuell vom übrigen Text abheben sollen.

Die besten Produktinhalte beantworten praktische Fragen und geben der Marke zugleich eine eigene Perspektive.

Align Redaktionsteam

Verwenden Sie class="pullquote", wenn ein Zitat stärker hervorgehoben werden soll als ein normales Blockzitat.

Bilder

Verwenden Sie figures, wenn ein Bild eine Bildunterschrift benötigt. Die folgenden Beispiele verwenden <figure class="embed image"> und <figcaption class="caption"> für Bildunterschriften unterhalb und oberhalb des Bildes.

Gehostetes Video

Verwenden Sie das Standard-Element <video> für gehostete MP4-Inhalte.

YouTube-Iframe

Verwenden Sie das Standard-YouTube-Iframe, wenn ein Video von YouTube eingebettet werden soll.

Tabelle

Tabellen sollten aussagekräftige Überschriften und abwechslungsreiche Zellinhalte enthalten, damit Leser Details schnell vergleichen können.

Definitionsliste

Verwenden Sie <dl> für Begriff-Beschreibung-Paare, Glossareinträge, kompakte Spezifikationen oder gruppierte Metadaten.

Einleitungsabsatz

Verwenden Sie class="intro" für einen stärkeren Einstiegsabsatz.

Bildunterschrift

Verwenden Sie class="caption" für einheitlich formatierte Bildunterschriften.

Pullquote

Verwenden Sie class="pullquote", wenn ein Zitat als stärkerer redaktioneller Moment wirken soll.

Codeblock

Verwenden Sie <pre> zusammen mit <code> für längere Beispiele, bei denen Abstände und Zeilenumbrüche wichtig sind.

<section>
  <h2>Care notes for skincare</h2>
  <p class="intro">Begin with a concise overview that helps readers orient themselves.</p>
  <ul>
    <li><strong>Store carefully.</strong> Keep the item clean, dry, and protected between uses.</li>
    <li><em>Review the details.</em> Link to related products or supporting pages where useful.</li>
  </ul>
  <p class="small">Use small text for secondary reminders, not primary instructions.</p>
</section>

Aufklappbereiche

Verwenden Sie <details> und <summary> für optionale Inhalte, die verfügbar sein sollen, ohne die Hauptseite zu überladen.

Trennlinien und Aufgabenlisten

Verwenden Sie <hr>, wenn eine thematische Trennung klarer ist als eine weitere Überschrift. Checkboxen können in aufgabenähnlichen Inhalten Fortschritt oder Checklisten darstellen.

• Abgeschlossene Aufgabe mit wichtigem Fortschritt.
• Offene Aufgabe mit noch ausstehendem ergänzendem Kontext.

Wenn jeder Abschnitt einen klaren Zweck erfüllt, bleiben umfangreiche Inhalte leicht erfassbar, nützlich und über die gesamte Align-Erfahrung hinweg konsistent.