ComponentsLayout and structure
Element
Renders any HTML tag chosen at run time, with attributes, classes and content passed through. Use it when the right tag depends on data, such as a heading level or a link that is sometimes a span.
Choosing the tag
HtmlTag names the element to render. Change it and inspect the preview: the content and classes stay, only the tag changes.
<address>
Harbour Lights Bookshop, 12 Quay Street
Rendered as <address>.
Heading levels from data
An outline whose depth comes from data. Each entry picks its tag from its level, so the headings are real h3 to h6 elements and nest correctly for screen readers.
Field guide to the estuary
Birds
Waders
Curlew
Plants
A link only when there is an address
The same markup renders an anchor when an address exists and a plain span when it does not, so readers never meet a link that goes nowhere. Extra attributes such as href pass straight through.