HTML Text Formatting

HTML provides several elements to format a piece of text on a web page to look different than the normal text.

These are used to display special types of text, with some of them looking different than normal text without any additional CSS.

Here is a list of all such Text Formatting elements and their significance.

HTML Element Description
<b> Bold text
<strong> Important text, which is usually rendered and displayed as bold text and lets the browser know that the text is important in the context it is used.
<i> Italic text
<em> Emphasized text, which is usually rendered and displayed as italic text and let lets the browser know that the text is emphasized or stressed in the context it is used. It is used to markup a technical term, a thought, or an idiomatic phrase from another language, etc.,
<u> Underline text
<strike> Strikethrough text
<small> Small text, which is usually one unit smaller than the normal font on an HTML document.
<big> Big text, is usually one unit bigger than the normal font on an HTML document.
<mark> Marked text, which is usually displayed with a highlighted yellow color background.
<del> Deleted text, which is used to display a text to indicate that it was there before and deleted now.
<ins> Inserted text, which is used to display a text to indicate that it was not there before and inserted now.
<sub> Subscript text, which is displayed half a character below the normal line in smaller font, and used for chemical formulas.
<sup> Superscript text, which is displayed half a character above the normal line in smaller font.
<tt> Monospaced text, is used to display text as seen in early computers and typewriters where all the characters take the same width.

Example

We can check the outcome of the below HTML document to see how it looks.

<!doctype html>
<html lang="en">
<head>
</head>
<body style="font-size: 20px;">
    <h1>Text Formatting Elements</h1>
    <p>These are used to display special types of text for better look and feel without any additional CSS.</p>
    <hr>
    <p>This contains <b>bold</b> text.</p>
    <p>This contains <strong>strong</strong> text, which tells the browser that the text is important, which is typically displayed in bold.</p>
    <p>This contains <i>italic</i> text.</p>
    <p>This contains <em>emphasis</em> text, which tells that browser that the text need special attention, which is displayed in italic.</p>
    <p>This contains <u>underline</u> text.</p>
    <p>This contains <strike>strike through</strike> text, and it is not supported in HTML5.</p>
    <p>This contains <small>small</small> text, which is usually one unit smaller than the base font size.</p>
    <p>This contains <big>big</big> text, which is usually one unit bigger than the base font size.</p>
    <p>This contains <mark>marked</mark> text, which is usually highlighted with yellow background.</p>
    <p>This contains <del>deleted</del> text.</p>
    <p>This contains <ins>inserted</ins> text.</p>
    <p>This contains <sub>subscript</sub> text.</p>
    <p>This contains <sup>superscript</sup> text.</p>
    <p>This contains <tt>monospaced (example im19)</tt> text, where all letters take the same width as seen in early computers and typewriters. It is not supported in HTML5.</p>
</body>
</html>

Overall

We now know how to format text on web pages using HTML elements.