Struktur & Inhalt
Diese Blöcke bilden das Gerüst der Seite und die Textbausteine. Sie sind in jeder Ansicht verfügbar (Scope all).
Struktur-Blöcke
site-header · site-footer
Kopf- und Fußbereich mit Wortmarke bzw. Logo und der jeweiligen Navigation.
| Attribut | Werte | Wirkung |
|---|---|---|
note (nur footer) | Text | ersetzt die Standard-Copyright-Zeile |
outlet
Platzhalter im layout für die aktuelle Ansicht (home, single, …). Ohne Attribute.
section
Ein Abschnitt mit begrenzter Inhaltsbreite, der beliebige Kind-Blöcke einrahmt.
| Attribut | Werte | Wirkung |
|---|---|---|
alt | Flag | alternativer (abgesetzter) Hintergrund |
class | Text | zusätzliche CSS-Klasse |
id | Text | Anker-ID für Sprungmarken |
section alt
heading level=3
text: Abschnitt mit alternativem Hintergrund
paragraph
text: Das Flag „alt" hebt einen Abschnitt farblich ab.
Abschnitt mit alternativem Hintergrund
Das Flag „alt" hebt einen Abschnitt farblich ab.
container · article
Schlichte Wrapper mit begrenzter Breite (container) bzw. semantischer Artikel-Rahmen (article). Beide nehmen class entgegen.
Inhalts-Blöcke
heading
Eine Überschrift.
| Attribut | Werte | Wirkung |
|---|---|---|
level | 1–6 (Standard 2) | Überschriften-Ebene (h1–h6) |
text | Text | der Überschriftentext |
class | Text | zusätzliche CSS-Klasse |
heading level=2
text: Geschichten, die bleiben
Geschichten, die bleiben
paragraph
Ein Absatz aus reinem Text (Attribut text) mit angenehmer Zeilenlänge.
paragraph
text: HeroML erzeugt sauberes, semantisches HTML. Dieser Absatz zeigt den Standard-Fließtext mit angenehmer Zeilenhöhe und Zeilenlänge.
HeroML erzeugt sauberes, semantisches HTML. Dieser Absatz zeigt den Standard-Fließtext mit angenehmer Zeilenhöhe und Zeilenlänge.
image
Ein Bild, optional mit Bildunterschrift.
| Attribut | Werte | Wirkung |
|---|---|---|
src (Pflicht) | URL | Bildquelle |
alt | Text | Alternativtext (Barrierefreiheit) |
caption | Text | Bildunterschrift (rendert figure) |
width | Zahl | feste Breite in Pixeln |
image src=data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%22450%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ea580c%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%239a3412%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2222%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20opacity%3D%220.9%22%3EBild%3C%2Ftext%3E%3C%2Fsvg%3E alt="Beispielbild" caption="Eine Bildunterschrift beschreibt das Motiv."
quote
Ein hervorgehobenes Zitat.
| Attribut | Werte | Wirkung |
|---|---|---|
text | Text | der Zitattext |
cite | Text | Quelle / Urheber |
quote cite="Italo Calvino"
text: Eine Stadt besteht aus den Beziehungen zwischen den Maßen ihres Raums und den Ereignissen ihrer Vergangenheit.
Eine Stadt besteht aus den Beziehungen zwischen den Maßen ihres Raums und den Ereignissen ihrer Vergangenheit.Italo Calvino
list · item
Eine Aufzählung; die Kind-Blöcke item tragen den Text (Attribut text). Das Attribut ordered erzeugt eine nummerierte Liste.
list ordered
item
text: Erster Schritt
item
text: Zweiter Schritt
item
text: Dritter Schritt
- Erster Schritt
- Zweiter Schritt
- Dritter Schritt
richtext · markdown · html · code · divider
Weitere Inhaltsblöcke: richtext (formatiertes HTML aus dem Block-Editor, bereinigt), markdown und html als Roh-Blöcke (siehe Syntax), code für monospaced Codeblöcke und divider für eine Trennlinie (<hr>).