HTML elements
Mark up words and phrases inside a block: emphasis, abbreviations, code, time, notes. Pick the element for its meaning; the style follows.
A link to another page, a file, a place on the same page or an email address. LUZ colors it with the brand color, with a visible focus ring.
Read the full reference before you start.
<p>Read the <a href="#">full reference</a> before you start.</p>Styled by elements/inline.css, with no class.
A short form of a word or phrase, such as HTML. Put the full form in title; it gets a dotted underline and a help cursor.
LUZ uses plain CSS.
<p>LUZ uses plain <abbr title="Cascading Style Sheets">CSS</abbr>.</p>Styled by elements/inline.css, with no class.
Not every abbreviation needs it. Spell the term out the first time it appears. Use abbr when the expansion has to sit outside the text, and add title only when you cannot expand it inline. Each abbr needs its own title. Widely available since July 2015.
Screen readers: MDN warns that a difference between what is announced and what is displayed can be jarring. It does not say how each screen reader treats title on abbr.
Source: MDN, checked on 11 October 2026.
Makes a few words stand out in bold without saying they matter more, such as the option names in a how-to. If they do matter more, use strong.
The ET Book typeface is used for headings.
<p>The <b>ET Book</b> typeface is used for headings.</p>Styled by elements/inline.css, with no class.
Keeps text of unknown direction, such as a user name that may be Arabic or Hebrew, from scrambling the text around it.
User إيان scored 90 points.
<p>User <bdi>إيان</bdi> scored 90 points.</p>LUZ adds no style: it changes no look, only the writing direction, and the browser already isolates it.
Use it around text you do not control, such as a user name, so its direction does not scramble the text around it. If a semantic element fits, such as cite, prefer <cite dir="auto">. MDN says not to rely on CSS unicode-bidi: isolate instead: it is not semantic and browsers may ignore it. Widely available since January 2020.
Screen readers: Not tested by LUZ. MDN lists no screen reader issue; a11ysupport.io was not checked.
Source: MDN, checked on 11 October 2026.
Forces its text to run left to right or right to left, as set by dir, whatever the characters are. You rarely need it: bdi covers most cases.
This text runs right to left.
<p><bdo dir="rtl">This text runs right to left.</bdo></p>LUZ adds no style: the browser look is kept.
A line break that is part of the content, as in a postal address or a poem. Do not use it to add space.
Line one
Line two
Line three
<p>Line one<br>Line two<br>Line three</p>LUZ adds no style: the browser look is kept.
The title of a book, film, paper, song or other work you mention. Not for the name of a person.
The Design of Everyday Things is a book by Don Norman.
<p><cite>The Design of Everyday Things</cite> is a book by Don Norman.</p>LUZ adds no style: the browser sets titles of works in italic, which is the usual convention.
A short piece of code, a file name or a command inside a sentence. LUZ sets it in the mono font at a readable size.
Use var(--luz-brand-primary) for links.
<p>Use <code>var(--luz-brand-primary)</code> for links.</p>Styled by elements/inline.css, with no class. For a block of code use pre.luz-code-block; .luz-code-inline adds a chip look to inline code.
Pairs visible text with a value for software, held in the value attribute, such as a product name with its code. For dates and times, use time.
LUZ has three layers.
<p>LUZ has <data value="3">three</data> layers.</p>LUZ adds no style: it is ordinary text with a value for software, so it should look like the text around it.
Use it when the visible text and the value software needs differ, such as a product name and its code. For dates and times use time, which MDN requires. Widely available since October 2017.
Screen readers: Its role is generic, so the value is for software; people hear the visible text. MDN does not say how the value is exposed to assistive technology.
Source: MDN, checked on 11 October 2026.
Marks a term at the place where the text explains what it means.
A design token is a named design decision, stored as a variable.
<p>A <dfn>design token</dfn> is a named design decision, stored as a variable.</p>Styled by elements/inline.css, with no class.
Use it for the term being defined, inside the sentence, the dt and dd pair or the section that holds the definition. For an abbreviation, nest abbr with its title inside it. Widely available since July 2015.
Screen readers: Its implicit role is term. Not tested by LUZ. MDN lists no screen reader issue; a11ysupport.io was not checked.
Source: MDN, checked on 11 October 2026.
Puts stress on a word, the one you would say louder, which can change the meaning of the sentence. Browsers show it in italic.
Load the tokens before the core.
<p>Load the tokens <em>before</em> the core.</p>LUZ adds no style: the browser look is kept.
Italic text with no extra stress, for words read in another voice: a phrase in another language, a character's inner voice. For stress, use em.
The result is ad hoc, not a rule.
<p>The result is <i lang="la">ad hoc</i>, not a rule.</p>LUZ adds no style: the browser look is kept.
A key or other input the user should press or type, such as Ctrl + C. LUZ draws it as a key cap.
Press Ctrl + K to open the command palette.
<p>Press <kbd>Ctrl</kbd> + <kbd>K</kbd> to open the command palette.</p>Styled by elements/inline.css, with no class.
Use it for what the reader types or presses. For a key combination, nest one kbd per key inside an outer one, or leave the outer one out. Widely available since July 2015.
Screen readers: It has no corresponding ARIA role. Not tested by LUZ. MDN lists no screen reader issue; a11ysupport.io was not checked.
Source: MDN, checked on 11 October 2026.
Highlights text because it matters right now, such as the words that matched a search. It does not add importance: use strong for that.
Search results for tokens.
<p>Search results for <mark>tokens</mark>.</p>Styled by elements/inline.css, with no class.
Use it for text that is relevant to what the reader is doing now, such as the words that matched a search. Not for syntax highlighting (use a span) and not for importance (use strong). Widely available since July 2015.
Screen readers: MDN: most screen readers do not announce mark by default. Text added with ::before and ::after can announce it, but only where not knowing about the highlight would harm understanding, because some people turn extra verbosity off.
Source: MDN, checked on 11 October 2026.
A short quotation inside a sentence. The browser adds the quotation marks of the page language, so do not type your own.
As they say, less is more
.
<p>As they say, <q>less is more</q>.</p>LUZ adds no style: the browser already adds the quotation marks of the page language.
Use it for a short quotation inside a sentence, and blockquote for a long one. Browsers add the quotation marks, so do not type them. The cite attribute holds the source URL and is not shown. Widely available since July 2015.
Screen readers: Not tested by LUZ. MDN lists no screen reader issue; a11ysupport.io was not checked.
Source: MDN, checked on 11 October 2026.
Parentheses that appear around a ruby annotation only in browsers that cannot place it above the text.
<ruby>漢<rp>(</rp><rt>kan</rt><rp>)</rp>字<rp>(</rp><rt>ji</rt><rp>)</rp></ruby>LUZ adds no style: the browser look is kept.
The text of a ruby annotation, such as how a character is pronounced. LUZ keeps it above the 12px floor.
<ruby>漢<rp>(</rp><rt>kan</rt><rp>)</rp>字<rp>(</rp><rt>ji</rt><rp>)</rp></ruby>Styled by elements/inline.css, with no class.
Puts small notes above or beside characters, mostly to show how East Asian characters are read. Each note goes in an rt.
<ruby>漢<rp>(</rp><rt>kan</rt><rp>)</rp>字<rp>(</rp><rt>ji</rt><rp>)</rp></ruby>LUZ adds no style: the browser already sets the notes small, next to their characters, and the right size depends on the script and the content.
Text that no longer applies, such as an old price. For a tracked removal, use del. LUZ tones it down to the secondary color.
$20 $15 this week.
<p><s>$20</s> $15 this week.</p>Styled by elements/inline.css, with no class.
Text a program printed, such as an error message or the output of a terminal command.
The console prints Layer "tokens" is missing.
<p>The console prints <samp>Layer "tokens" is missing.</samp></p>Styled by elements/inline.css, with no class.
Use it for sample or quoted output of a program. For output that your own script writes into the page, use output instead. Widely available since July 2015.
Screen readers: Its role is generic, so it adds no meaning for assistive technology. Not tested by LUZ. MDN lists no screen reader issue; a11ysupport.io was not checked.
Source: MDN, checked on 11 October 2026.
Fine print: copyright lines, legal notes, disclaimers. LUZ never sets it under the 12px floor.
Total: $15 Prices include VAT.
<p>Total: $15 <small>Prices include VAT.</small></p>Styled by elements/inline.css, with no class.
A plain inline wrapper that adds no meaning. Use it to hang a class or a lang attribute on a few words.
LUZ is stable.
<p>LUZ is <span class="luz-tag luz-tag--green">stable</span>.</p>LUZ adds no style: the browser look is kept.
<strong>Words the reader must not miss: a warning, a key condition, a deadline. For stress that changes how a sentence reads, use em.
Warning: do not edit the dist folder.
<p><strong>Warning:</strong> do not edit the dist folder.</p>Styled by elements/inline.css, with no class.
Text set lower and smaller, such as the 2 in the formula for water. LUZ keeps it from pushing the lines apart.
Water is H2O.
<p>Water is H<sub>2</sub>O.</p>Styled by elements/inline.css, with no class.
Text set higher and smaller, for powers, footnote numbers and the letters in 1st. LUZ keeps it from pushing the lines apart.
E = mc2
<p>E = mc<sup>2</sup></p>Styled by elements/inline.css, with no class.
A date, a time or a duration. Put a form software can read in the datetime attribute, and write whatever suits the reader inside.
Released on .
<p>Released on <time datetime="2026-10-06">6 October 2026</time>.</p>Styled by elements/inline.css, with no class.
Use it for a date, a time or a duration that software can read, such as an event a browser could add to a calendar. Write the machine form in datetime (2026-10-09, 20:00, PT2H30M). Not for dates before the Gregorian calendar. Widely available since October 2017.
Screen readers: MDN gives no note on how screen readers announce datetime. The visible text is what you can count on.
Source: MDN, checked on 11 October 2026.
An underline for a note that is not a link, such as a flagged spelling mistake. Readers take underlines for links, so use it sparingly.
This word is mispelled.
<p>This word is <u>mispelled</u>.</p>Styled by elements/inline.css, with no class.
The name of a variable in a formula or in code, such as x in an equation.
Solve x + y = 10.
<p>Solve <var>x</var> + <var>y</var> = 10.</p>Styled by elements/inline.css, with no class.
Tells the browser where it may wrap a long word or URL when it runs out of room. Nothing shows when the line does not wrap.
https://
<p style="max-inline-size: 12ch">https://<wbr>example.com/<wbr>very/<wbr>long/<wbr>path</p>LUZ adds no style: it has no box. It only marks a place where the line may break.