HTML Formatting

HTML formatting makes text look better and easier to read.  Different formatting tags are available that make text bold, italic, underlined, supercased, and otherwise.

HTML Tutorial

Example

Text formatted with <strong>, <mark>, <i>, and <u> tags.

The time in Arles, France became one of Van Gogh's more prolific periods: he completed 200 paintings and more than 100 drawings and watercolors. He was enchanted by the local countryside and light; his works from this period are rich in yellow, ultramarine, and mauve.

<p style="max-width:600px;">
  The time in <strong>Arles, France</strong> became one 
  of <mark>Van Gogh</mark>'s more prolific periods: 
  he completed <i>200 paintings and more 
  than 100 drawings and watercolors</i>. He was
  enchanted by the local countryside and light;
  his works from this period are rich in <u>yellow,
  ultramarine, and mauve</u>.
</p>


Text Formatting tags

Here we only review text formatting with HTML -- not CSS.

Below is a list of HTML text formatting tags that you can use.

Tag Description
<b> Specifies bold text
<i> Specifies italic text
<u> Specifies underlined text
<em> Specifies emphasized text
<strong> Specifies important text
<mark> Specifies marked text
<ins> Specifies inserted text
<del> Specifies deleted text
<sub> Specifies subscript text
<sup> Specifies superscript text
<small> Specifies small text

Note:   Some text formatting tags are browser dependent.  For example, <em> or <mark> text may look different in Chrome than it does in Edge or Safari.  If you need text that looks the same on all browsers, consider using CSS styling, rather than HTML formatting.


HTML <b> and <strong> elements

Text inside a <b> tag, is displayed in bold.

Text inside a <strong> tag is marked as important.

Generally <b> and <strong> tags are displayed the same (i.e. bold).

Two formatting examples: one bold the other strong.

This text is bold
This text is strong

<p>
  <b>This text is bold</b><br />
  <strong>This text is strong</strong>
</p>


HTML <i> and <em> elements

Text inside an <i> tag, is displayed in italic.

Text inside an <em> tag is meant to be emphasized.

Generally <i> and <em> tags are displayed the same (i.e. italic).

Two formatting examples: one italic, the other emphasized.

This text is italic
This text is emphasized

<p>
  <i>This text is italic</i><br />
  <em>This text is emphasized</em> 
</p>

HTML <small> element

The <small> tag decreases the font size by one unit from the base font.

This is small text.

<p>
  This is <small>small text</small>.
</p>

Did you know?

Did you know?

The <ruby> tag is used to add annotations

The <ruby> tag creates a ruby annotation. A ruby is a small piece of text attached to the main text to specify its meaning. They are mostly used in Japanese publications, but it can also be used to indicate pronunciations for English and other languages. The <ruby> tag has two sub-elements: <rb> for the base text, and <rt> for annotation itself.

A <ruby> tag that adds phonetic symbols to the word 'archive'.

Older documents are stored in our archiveaar·kaiv.

<p>
  Older documents are stored in our
  <ruby><rb>archive</rb><rt>aar·kaiv</rt></ruby>.
</p>

HTML <mark> element

The <mark> tag marks or highlights text.

Marked text will be highlighted.

<p>
  <mark>Marked text</mark> will be highlighted.
</p>

HTML <del> element

Text inside a <del> tag is marked as deleted, usually with a strikethrough.

This text is deleted.

<p>
  <del>This text</del> is deleted.
</p>

HTML <ins> element

Text inside a <ins> tag is marked as inserted, usually with an underline.

This text is inserted.

<p>
  <ins>This text</ins> is inserted.
</p>

Tip:  The <del> and <ins> tags are used together to markup content that has been edited.


HTML <sub> element

The <sub> tag creates subscripted text which makes the text smaller and it displays half a character's height below the other characters.

A <sub> tag with subscripted text.

The formula for water is H2O.

<p>
  The formula for water is H<sub>2</sub>O.
</p>

Tip:  Subscripts are useful for mathematical formulas and scientific notations, such as, C2H6O.


HTML <sup> element

The <sup> tag creates superscripted text which makes the text smaller and displays it half a character's height above the other characters.

A <sup> tag with superscripted text.

42 is 16.

<p>
  4<sup>2</sup> is 16.
</p>

Tip:  Superscripts are useful for mathematical formulas and scientific notations, such as, x2 + y2 = z2.


Did you know?

Did you know?

The <dfn> tag defines a term in HTML

Text inside a <dfn> tag displays in italic, indicating a definition (dfn) or terminology item:

401{k) is a self-directed pension plan in the US.

<p>
  <dfn>401{k)</dfn> is a self-directed pension plan in the US.
</p>

You may also like

Guides