HTML Text Formatting: Explanation, Tags and Examples

Why and How to Format HTML Text

HTML text formatting tools are similar to those you would find in any text editor (e.g., MS Word). You can define bold text, write in italics, or otherwise change the look of your text. To include more advanced styling, use CSS styling.

To apply basic HTML text formatting, all you need to do is wrap the content you wish to modify in appropriate tags – e.g., this is how you would italicize HTML text:

<h2>Eagles fly <em>above</em> the clouds during rain.</h2>

Text Formatting Tags in HTML with Examples

The <em> tag is used for emphasizing. Most browsers italicize HTML text within these tags – however, this element conveys not only visual but also semantic meaning:

<em>This text is emphasized.</em>

To simply italicize HTML text without any semantic meaning, use the <i> tag:

<i>This text is in italics.<i>

The <strong> tag defines important text. Browsers display it as bold text, but it also carries a semantic meaning:

<p>This is <strong>important</strong> text.</p>

To simply bold text without any semantic meaning, use the <b> tag:

<p>Normal text vs <b>Text in bold</b></p>

Using <u> tags, you can underline text in HTML:

Here is some <u>underlined</u> text.

The <small> tags can be used to make the text smaller without changing the height of the line. It's handy for adding notes or something not as essential as the main information:

<p>Paragraph with <small>smaller text</small> in it.</p>

Note: an opposite tag called <big> has been removed from HTML5.

The <mark> tags highlight HTML text in bright yellow color to resemble using a highlighter pen:

<p>The mark tag is <mark>useful</mark> when you need to highlight important information.</p>

The <del> tags cross out your HTML text to mark it as deleted:

<p>I am not deleted text, but <del>I am.</del></p>

Note: this text is still visible in the final copy so don't use this tag if you want to actually delete it!

The <s> tags create a similar visual effect as <del> but have a different semantic meaning – they define a text that is no longer relevant:

<p><s>This text is not relevant.</s></p>
<p>This is the new accurate text.</p>

Note: the <strike> tags used to cross out text as well, but this element has been deprecated in HTML5.

The <ins> tags mark inserted HTML text:

<ins>This text is inserted</ins>

The <sub> tags create subscript text which is half the size of the usual text and also has a lower line:

<p>This text contains <sub>subscript</sub> text.</p>

The <sup> tag defines an HTML superscript text. It makes the text smaller (just as subscript), but also raises the text line it is written in:

<p>The following is <sup>superscript</sup>.</p>

The <q> tags represent inline quotes. Most browsers automatically insert quotation marks around the text:

<p>Everyone knows that
  <q cite="https://www.bitdegree.org/learn/html-basics">HTML is an acronym for Hypertext Markup Language.</q>
</p>

A quote can also be displayed in a block element – to do that, use <blockquote> tags:

<p>There are many ways to gain knowledge: TV, books, Internet, etc. However, imagination starts to fade after childhood. Do not let your inner child fade!</p>
  <blockquote>Imagination is more important than knowledge.</blockquote>

HTML Text Formatting: Useful Tips

• All HTML text formatting tags are used to modify their content - therefore, they cannot define empty elements. This means you cannot omit the closing tag.
• Keep in mind that most screen readers recognize semantic tags and pronounce their content in a different tone.
• Be careful when you underline text in HTML, as readers might easily confuse it with a hyperlink.