HTML Text Formatting: Essential Tags and Examples

If you use a word processor, you will be familiar with the ability to make text bold, italic, or underlined; these are just three of the ten options available to indicate how text can appear in HTML. The full list is bold, italic, monospaced, underlined, strikethrough, teletype, larger, smaller, superscripted, and subscripted text.

The <b> Element

The HTML <b> element defines bold text, without any extra importance.

Anything that appears in a <b> element is displayed in bold, like the word bold here:

Example

<b>This text is bold</b>

Live Preview

The <strong> Element

The contents of a <b> element will be displayed in the same way as the contents of the <strong> element. You will meet the <strong> element later; it is used to indicate that its contents have strong emphasis.

Example

<strong>This text is strong</strong>
<p>This text is inside paragraph</p>

Live Preview

The <i> Element

The HTML <i> element defines italic text, without any extra importance.

The content of an <i> element is displayed in italicized text, like the word italic here:

Example

The following word uses an <i> italic</i> typeface.

Live Preview

The <em> Element

The HTML <em> element defines emphasized text, with added semantic importance.

The contents of an <i> element will be displayed in the same way as the contents of the <em> element. You will meet the <em> element later; it is used to indicate that its contents have emphasis.

Example

<em>This text is emphasized</em>

Live Preview

The <u> Element

The content of a <u> element is underlined with a simple line:

Example

The following word would be <u> underlined </u>

The <u> element is deprecated, although it is still supported by current browsers.

Live Preview

The <s> and <strike> Element

The content of an <s> or <strike> element is displayed with a strikethrough, which is a thin line through the text (<s> is just the abbreviated form of <strike>).

Example

The following word would have a <s> strikethrough </s> 

Both the <s> and <strike> elements are deprecated, although they are still supported by current browsers.

Live Preview

The <tt> Element

The content of a <tt> element is written in monospaced font (like that of a teletype machine)

Example

The following word will appear in a <tt> monospaced </tt> font

Live Preview

Now let's take a look at the <sup>, <sub>, <big> , <small>, and <hr> elements.

The <sup> Element

The content of a <sup> element is written in superscript; it is displayed half a character's height above the other characters and is also often slightly smaller than the text surrounding it.

The HTML ^{element defines superscripted text.}

Example

<p>This is <sup>superscripted</sup> text.</p>

Live Preview

HTML <sub> Element

The content of a <sub> element is written in subscript; it is displayed half a character's height beneath the other characters and is also often slightly smaller than the text surrounding it.

The HTML <sub> element defines _subscripted text.

Example

<p>This is <sub>subscripted</sub> text.</p>

Live Preview

HTML <big> Element

When this element is used, it is possible to nest several <big> elements inside one another, and the content of each will get one size larger for each element.

Example

The following word should be <big> bigger </big> than those around it. 

Live Preview

HTML <small> Element

The HTML element defines smaller text:

The <small> element is the opposite of the <small> element, and its contents are displayed one font size smaller than the rest of the text surrounding it. If the font is already the smallest, it has no effect. You can nest several <small> elements inside one another, and the content of each gets one size smaller for each element.

Example

<h2 id="small">HTML <small>Small</small> Formatting</h2>

The following word should be <small> smaller </small> than those around it

Live Preview

---

HTML <hr> Element

The <hr> element creates a horizontal rule across the page. It is an empty element, rather like the <br> element

Example

<hr> 

This is frequently used to separate distinct sections of a page where a new heading is not appropriate.

Live Preview

---

HTML <mark> Element

The HTML <mark> element defines marked or highlighted text:

Example

<h2 id="mark">HTML <mark>Marked</mark> Formatting</h2>

Live Preview

---

HTML <del> Element

The HTML element defines deleted (removed) text.

Example

<p>My favorite food is <del>pizza</del>.</p>

Live Preview

---

HTML <ins> Element

The HTML element defines inserted (added) text.

Example

<p>My favorite food is <ins>pizza</ins>.</p>

Live Preview

---