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

<span class="pln">
</span><span class="tag">&lt;b&gt;</span><span class="pln">This text is bold</span><span class="tag">&lt;/b&gt;</span><span class="pln">
</span>

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

<span class="pln">
</span><span class="tag">&lt;strong&gt;</span><span class="pln">This text is strong</span><span class="tag">&lt;/strong&gt;</span><span class="pln">
</span><span class="tag">&lt;p&gt;</span><span class="pln">This text is inside paragraph</span><span class="tag">&lt;/p&gt;</span><span class="pln">
</span>

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

<span class="pln">
</span><span class="typ">The</span><span class="pln"> following word uses an </span><span class="str">&lt;i&gt;</span><span class="pln"> italic</span><span class="pun">&lt;/</span><span class="pln">i</span><span class="pun">&gt;</span><span class="pln"> typeface</span><span class="pun">.</span><span class="pln">
</span>

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

<span class="pln">
</span><span class="tag">&lt;em&gt;</span><span class="pln">This text is emphasized</span><span class="tag">&lt;/em&gt;</span><span class="pln">
</span>

Live Preview

The <u> Element

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

Example

<span class="pln">
</span><span class="typ">The</span><span class="pln"> following word would be </span><span class="str">&lt;u&gt;</span><span class="pln"> underlined </span><span class="pun">&lt;/</span><span class="pln">u</span><span class="pun">&gt;</span><span class="pln">
</span>

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

<span class="pln">
</span><span class="typ">The</span><span class="pln"> following word would have a </span><span class="str">&lt;s&gt;</span><span class="pln"> strikethrough </span><span class="pun">&lt;/</span><span class="pln">s</span><span class="pun">&gt;</span><span class="pln"> 
</span>

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

<span class="pln">
</span><span class="typ">The</span><span class="pln"> following word will appear </span><span class="kwd">in</span><span class="pln"> a </span><span class="str">&lt;tt&gt;</span><span class="pln"> monospaced </span><span class="pun">&lt;/</span><span class="pln">tt</span><span class="pun">&gt;</span><span class="pln"> font
</span>

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

<span class="pln">
</span><span class="tag">&lt;p&gt;</span><span class="pln">This is </span><span class="tag">&lt;sup&gt;</span><span class="pln">superscripted</span><span class="tag">&lt;/sup&gt;</span><span class="pln"> text.</span><span class="tag">&lt;/p&gt;</span><span class="pln">
</span>

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

<span class="pln">
</span><span class="tag">&lt;p&gt;</span><span class="pln">This is </span><span class="tag">&lt;sub&gt;</span><span class="pln">subscripted</span><span class="tag">&lt;/sub&gt;</span><span class="pln"> text.</span><span class="tag">&lt;/p&gt;</span><span class="pln">
</span>

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

<span class="pln">
</span><span class="typ">The</span><span class="pln"> following word should be </span><span class="str">&lt;big&gt;</span><span class="pln"> bigger </span><span class="pun">&lt;/</span><span class="pln">big</span><span class="pun">&gt;</span><span class="pln"> than those around it</span><span class="pun">.</span><span class="pln"> 
</span>

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

<span class="pln">
</span><span class="tag">&lt;h2</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"small"</span><span class="tag">&gt;</span><span class="pln">HTML </span><span class="tag">&lt;small&gt;</span><span class="pln">Small</span><span class="tag">&lt;/small&gt;</span><span class="pln"> Formatting</span><span class="tag">&lt;/h2&gt;</span><span class="pln">

The following word should be </span><span class="tag">&lt;small&gt;</span><span class="pln"> smaller </span><span class="tag">&lt;/small&gt;</span><span class="pln"> than those around it
</span>

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

<span class="pln">
</span><span class="tag">&lt;hr&gt;</span><span class="pln"> 
</span>

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

<span class="pln">
</span><span class="tag">&lt;h2</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"mark"</span><span class="tag">&gt;</span><span class="pln">HTML </span><span class="tag">&lt;mark&gt;</span><span class="pln">Marked</span><span class="tag">&lt;/mark&gt;</span><span class="pln"> Formatting</span><span class="tag">&lt;/h2&gt;</span><span class="pln">
</span>

Live Preview

---

HTML <del> Element

The HTML element defines deleted (removed) text.

Example

<span class="pln">
</span><span class="tag">&lt;p&gt;</span><span class="pln">My favorite food is </span><span class="tag">&lt;del&gt;</span><span class="pln">pizza</span><span class="tag">&lt;/del&gt;</span><span class="pln">.</span><span class="tag">&lt;/p&gt;</span><span class="pln">
</span>

Live Preview

---

HTML <ins> Element

The HTML element defines inserted (added) text.

Example

<span class="pln">
</span><span class="tag">&lt;p&gt;</span><span class="pln">My favorite food is </span><span class="tag">&lt;ins&gt;</span><span class="pln">pizza</span><span class="tag">&lt;/ins&gt;</span><span class="pln">.</span><span class="tag">&lt;/p&gt;</span><span class="pln">
</span>

Live Preview

---