2.2.4 base.type.text Text elements

Toggle example guides Toggle HTML markup

The elements in this section give semantics to inline text.

Example

The default font-size and line-height properties are applied to the <body> element and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

The following snippets of text are rendered as bold text. Bold text nested inside italic text should still be bold.

The following snippets of text are rendered as italic text. Italic text nested inside bold text should still be italic

An abbreviation of the word attribute is attr. And HTML is an acroynm.

Mlle Gwendoline wrote the equation f(x, n) = log4xn.

Markup: 01-base/text/text.twig
<p>The default font-size and line-height properties are applied to the <code>&lt;body&gt;</code> element and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin.</p>
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p>The following snippets of text are <strong class="">rendered</strong> as <b class="">bold
    text</b>. Bold text nested inside <i>italic text <b>should</b></i> <em>still be
    <strong>bold</strong></em>.</p>
<p>The following snippets of text are <em class="">rendered</em> as <i class="">italic text</i>.
  Italic text nested inside <b>bold text <i>should</i></b> <strong>still be
    <em>italic</em></strong></p>
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.
  And <abbr title="HyperText Markup Language">HTML</abbr> is an acroynm.</p>
<p><abbr>M<sup>lle</sup></abbr> Gwendoline wrote the equation <code>f(x, n) = log<sub>4</sub>x<sup class="">n</sup></code>.</p>
Source: 01-base/text/_text.scss, line 9