Referenz

HeroML

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.

AttributWerteWirkung
note (nur footer)Textersetzt 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.

AttributWerteWirkung
altFlagalternativer (abgesetzter) Hintergrund
classTextzusätzliche CSS-Klasse
idTextAnker-ID für Sprungmarken
section alt
  heading level=3
    text: Abschnitt mit alternativem Hintergrund
  paragraph
    text: Das Flag „alt" hebt einen Abschnitt farblich ab.
Ergebnis ↓

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.

AttributWerteWirkung
level1–6 (Standard 2)Überschriften-Ebene (h1–h6)
textTextder Überschriftentext
classTextzusätzliche CSS-Klasse
heading level=2
  text: Geschichten, die bleiben
Ergebnis ↓

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.
Ergebnis ↓

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.

AttributWerteWirkung
src (Pflicht)URLBildquelle
altTextAlternativtext (Barrierefreiheit)
captionTextBildunterschrift (rendert figure)
widthZahlfeste 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."
Ergebnis ↓
Beispielbild
Eine Bildunterschrift beschreibt das Motiv.

quote

Ein hervorgehobenes Zitat.

AttributWerteWirkung
textTextder Zitattext
citeTextQuelle / Urheber
quote cite="Italo Calvino"
  text: Eine Stadt besteht aus den Beziehungen zwischen den Maßen ihres Raums und den Ereignissen ihrer Vergangenheit.
Ergebnis ↓
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
Ergebnis ↓
  1. Erster Schritt
  2. Zweiter Schritt
  3. 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>).