Text

Paragraph

A block element containing one or more sentences. Typically represented by a p element. To create one, use the class paragraph.

This is a paragraph.

This is a second paragraph. Notice how all paragraphs get their own line.

You can nest the other elements below inside of a paragraph, as well as other inline, text-based components like the link or highlight.

<p class="paragraph">This is a paragraph.</p>
<p class="paragraph">
  This is a second paragraph. Notice how all paragraphs get
  their own line.
</p>
<p class="paragraph">
  You can nest the other elements below inside of a
  paragraph, as well as other inline, text-based components
  like the
  <span class="link">link</span>
  or
  <mark class="highlight">highlight</mark>.
</p>

Abbreviation

An inline element containing abbreviated text. Put the non-abbreviated version in the title attribute. Typically represented by an abbr element. To create one, use the class abbreviation.

It's commonly believed that the first usage of the term OMG was in a letter written to Winston Churchill in 1917.

<p class="paragraph">
  It's commonly believed that the first usage of the term
  <abbr class="abbreviation" title="Oh My God">OMG</abbr>
  was in a letter written to Winston Churchill in 1917.
</p>

Bold

An inline element containing bold text. Typically represented by a strong element. To create one, use the class bold.

The term bold refers to text that's thicker than the text around it.

<p class="paragraph">
  The term <strong class="bold">bold</strong> refers to text
  that's thicker than the text around it.
</p>

Italic

An inline element containing italicized text. Typically represented by an em element. To create one, use the class italic.

The reason the standard HTML element for italic text is called em is because it stands for emphasis.

<p class="paragraph">
  The reason the standard HTML element for italic text is
  called <code class="code">em</code> is because it stands
  for <span class="italic">em</span>phasis.
</p>

Underline

An inline element containing underlined text. To create one, use the class underline.

This text is underlined.

<p class="paragraph">
  This text is <span class="underline">underlined</span>.
</p>

Strikethrough

An inline element containing text with a line through it. Typically represented by an s element. To create one, use the class strikethrough.

This text is ~~strikethroughed~~ ~~striked through~~ crossed out.

<p class="paragraph">
  This text is <s class="strikethrough">strikethroughed</s>

  <s class="strikethrough">striked through</s>

  crossed out.
</p>

Underline and Strikethrough

You can combine the underline and strikethrough classes, even though they both use the same CSS property underneath.

This text is ~~both~~.

<p class="paragraph">
  This text is <s class="strikethrough underline">both</s>.
</p>

Small Text

An inline element containing text that's smaller than the text around it. Typically represented by a small element. To create one, use the class small-text.

I'm just a little confused.

<p class="paragraph">
  I'm just a
  <small class="small-text">little</small> confused.
</p>

Subscript

An inline element for a subscript. Typically represented by a sub element. To create one, use the class subscript.

The formula for water is H₂O.

<p class="paragraph">
  The formula for water is H<sub class="subscript">2</sub>O.
</p>

Superscript

An inline element for a superscript. Typically represented by a sup element. To create one, use the class superscript.

The speed of light is 3.00 x 10⁸ m/s.

<p class="paragraph">
  The speed of light is 3.00 x 10<sup class="superscript"
    >8</sup
  >
  m/s.
</p>

Code

An inline element containing code. Typically represented by a code element. To create one, use the class code.

To print "Hello, World!" in Python, you would write print("Hello, World!").

<p class="paragraph">
  To print "Hello, World!" in Python, you would write
  <code class="code">print("Hello, World!")</code>.
</p>

Key

An inline element representing a key on a keyboard. Typically represented by a kbd element. To create one, use the class key.

To save a file in most applications, you can press Ctrl + S (or ⌘ + S on a Mac).

<p class="paragraph">
  To save a file in most applications, you can press
  <kbd class="key">Ctrl</kbd> + <kbd class="key">S</kbd> (or
  <kbd class="key">⌘</kbd> + <kbd class="key">S</kbd> on a
  Mac).
</p>