Opgemaakte tekst

Opgemaakte tekst

Toont tekst uit een gegevensveld mét opmaak — vetgedrukt, links en koppen — in plaats van als platte tekst.

Opgemaakte tekst

Toont tekst uit een gegevensveld mét de opmaak die erin zit: vetgedrukt, cursief, links, koppen en lijsten. Zonder dit block zou de opmaak als letterlijke tekst op de pagina komen. Alle artikelpagina's op deze site tonen hun inhoud via dit block. De technische naam is RichText.

Gebruik dit block overal waar redacteuren tekst met opmaak invoeren via een tekstveld: een artikelbody, een paginabeschrijving of een nieuwsbericht. Zonder RichText verschijnen de opmaaktags letterlijk op de pagina in plaats van als vetgedrukte tekst of een link.

Deze kennisbank gebruikt het block zelf voor elke artikelpagina, inclusief de tekst die je nu leest. Zo kan een redacteur in een gewoon tekstveld werken, terwijl de site de opmaak automatisch correct weergeeft.

Toepassingen per site-type

Op een webshop toont RichText de productbeschrijving zoals een redacteur die heeft ingevoerd, inclusief vetgedrukte specificaties of een opsomming van kenmerken. Een portfolio-site gebruikt dit block voor de toelichting bij een project, waarin de maker bijvoorbeeld een woord cursief zet voor nadruk of een link naar een gerelateerd project opneemt. Bij een zakelijke dienstverlener draait vrijwel elke tekstpagina hierop: een dienstenbeschrijving, een over-ons-pagina of een uitgebreid artikel met koppen en subkoppen.

Een veelgemaakte fout is een tekstveld tonen zonder RichText, waardoor HTML-tags letterlijk als tekst op de pagina verschijnen in plaats van als opmaak — dat oogt direct onprofessioneel. Controleer bij een nieuw datatype met een tekstveld dus altijd of de weergave via dit block loopt. Een tweede valkuil is te veel opmaakvariatie binnen één tekstveld, zoals afwisselend vet, cursief én onderstreept door elkaar: dat maakt een tekst juist onrustig in plaats van beter leesbaar.

Bij lange teksten combineer je RichText goed met TableOfContents, die automatisch de koppen binnen de tekst oppikt. Zie content en JSX in Obelisk voor de achtergrond bij wanneer je RichText gebruikt en wanneer je zelf vaste JSX schrijft.

Voor SEO is het belangrijk dat koppen binnen RichText een logische hiërarchie volgen (bijvoorbeeld geen h4 direct na een h2 zonder h3 ertussen), en voor toegankelijkheid dat links in de tekst een duidelijke linktekst hebben in plaats van 'klik hier' — een schermlezer leest linkteksten vaak los van de omliggende zin voor.

Voorbeeld

Vetgedrukt, cursief en een link — allemaal uit één tekstveld.

De prompt voor dit voorbeeld

prompt
Toon de opgemaakte inhoud van het tekstveld op de pagina, met vetgedrukt, cursief en links intact.