Styleguide

Dieser Beispiel-Styleguide zeigt die vollständige Auswahl an WYSIWYG-Elementen, die Sie für ausführliche redaktionelle Inhalte auf Ihren Seiten oder in Ihren Artikeln verwenden können. Die Liste ist nicht vollständig, zeigt aber die meisten gängigen Elemente, die Sie benötigen könnten!

Verwenden Sie class="intro" für einleitende Texte, die stärker hervorgehoben wirken sollen als ein Standardabsatz, aber weiterhin als Seiteninhalt gelesen werden.

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

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

Redaktioneller Text

Redaktionelle Seiten können starke Hervorhebungen, Betonungen, entfernte Formulierungen, markierte Begriffe und Inline-code-style labels kombinieren, ohne den Lesefluss zu unterbrechen.

Verwenden Sie <mark>, um auf eine Formulierung aufmerksam zu machen, <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 einen Absatz mit kurzen Hinweisen, Anmerkungen zum Launch, Kaufkontext oder wichtigen Richtlinieninformationen.

Überschriftenhierarchie

Überschriften sollten eine klare Gliederung bilden. Reservieren Sie <h1> für den primären Seitentitel, wenn das Template keinen Titel bereitstellt, und verwenden Sie anschließend <h2> und <h3> zur Strukturierung der Seitenabschnitte.

Überschrift Ebene eins für Shirts

Ü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 strukturierter Inhalt.

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

Zu den Inline-Beispielen gehören außerdem Fettdruck, Kursivschrift, Unterstreichung, Durchstreichung, _Index, ^Exponent und ein Produktlink.

Adresse

Verwenden Sie <address> für Kontakt- oder Standortangaben, nicht für die allgemeine Formatierung postalischer Adressen.

Flagship store
123 Example Avenue
New York, NY 10001
Standorte anzeigen

Listen

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

Ungeordnete Liste mit geordneten Schritten

• Vergleichen Sie Produkte sorgfältig. Beginnen Sie mit einem weiteren ausgewählten Shirt und prüfen Sie anschließend die für den vorgesehenen Einsatz wichtigsten Details.
• Planen Sie den Kaufprozess. Ein Listenelement kann verschachtelte geordnete Schritte enthalten:
  1. Bestätigen Sie Anforderungen an Größe, Material oder Stil.
  2. Prüfen Sie ergänzende Inhalte, darunter FAQs und Richtlinienseiten.
  3. Wählen Sie die Option, die Passform, Verarbeitung und Verfügbarkeit am besten ausbalanciert.
• Formulieren Sie prägnant, geben Sie aber genügend Kontext, damit jedes Element 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. Untermauern Sie die Kernaussage mit hilfreichen Details:
   • Heben Sie wichtige Begriffe sparsam hervor.
   • Verwenden Sie <code> für wörtliche Bezeichnungen oder Snippets.
   • Setzen Sie fetten oder hervorgehobenen Text nur dort ein, wo er den Lesern hilft.
3. Schließen Sie den Abschnitt mit einem klaren nächsten Gedanken ab, nicht mit einem unvollständigen Fragment.

Zitate und Infoboxen

Verwenden Sie Blockzitate für Quellenangaben, Testimonials, redaktionelle Auszüge oder Aussagen, die visuell vom umgebenden Text getrennt werden sollen.

Die nützlichsten Produktinhalte beantworten praktische Fragen und geben der Marke zugleich eine eigene Perspektive.

Redaktionsteam von Reset

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

Bilder

Verwenden Sie figure-Elemente, wenn ein Bild eine Beschriftung benötigt. Die folgenden Beispiele verwenden <figure class="embed image"> und <figcaption class="caption">, um die Platzierung von Beschriftungen unterhalb und oberhalb zu zeigen.

Gehostetes Video

Verwenden Sie das standardmäßige <video>-Element für gehostete MP4-Inhalte. Halten Sie das Markup einfach, sofern das umgebende Layout keine zusätzliche Struktur erfordert.

YouTube-Iframe

Verwenden Sie das standardmäßige 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.

Beispielhafter Shirtvergleich

Merkmal	Standardoption	Ausgewählte Option	Hinweise
Primärer Link	Produkt eins	Produkt zwei	Links in Tabellenzellen sollten leicht erkennbar und antippbar bleiben.
Redaktionelle Passform	Kurze Beschreibung mit dezentem Akzent.	Eine längere Beschreibung, die sich über mehrere Zeilen erstreckt und fetten Text für die wichtigste Aussage enthält.	Verwenden Sie unterschiedlich lange Zellinhalte, um Ausrichtung und Abstände zu prüfen.
Pflegedetail	Spot clean	Professional care recommended	Inline-Code kann wörtliche Bezeichnungen, Pflegeetiketten oder kompakte Spezifikationen kennzeichnen.
Verfügbarkeit	Begrenzt	Online und im Flagship store verfügbar.	Tabellenzellen können Hervorhebungen, Links und Hinweise in Satzlänge enthalten.

Definitionsliste

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

Einleitungsabsatz

Verwenden Sie class="intro", um einen stärkeren einleitenden Absatz zu erstellen.

Beschriftung

Verwenden Sie class="caption" für figure-Beschriftungen, die einheitlich gestaltet werden sollen.

Hervorgehobenes Zitat

Verwenden Sie class="pullquote", wenn ein Zitat als stärkerer redaktioneller Akzent 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 shirts</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.

Beispiel für aufklappbaren Inhalt

Details-Blöcke eignen sich für umfangreiche Richtlinien, Pflegeinformationen, Größenhinweise oder optionale redaktionelle Anmerkungen.

Trennlinien und Aufgabenlisten

Verwenden Sie <hr>, wenn eine thematische Trennung klarer ist als eine weitere Überschrift. Checkbox-Eingaben können in aufgabenartigen Inhalten erscheinen, wenn die Seite einen Fortschritt oder eine Checkliste darstellen soll.

---

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

Wenn jeder Abschnitt einen klaren Zweck hat, bleiben ausführliche Inhalte leicht überfliegbar, nützlich und über das gesamte Reset-Erlebnis hinweg konsistent.