HTML Text Formatting

HTML has different elements to define text for several purposes.

Bold: The <b> tag is for displaying text in boldface style and is closed with the </b> tag.
Strong: The <strong> tag is for displaying significant text and is closed with </strong> tag.
Italic: The <i> tag is used for showing text in italic style and is closed with the </i> tag.
Underline: The <u> tag is used to underline text and is closed with the </u> tag.
Superscript: The <sup> tag is for displaying text as superscript and is closed with the </sup> tag.
Subscript: The <sub> tag is for displaying text as a subscript and is closed with the </sub> tag.

Example

The following HTML code will display text in different formatting.

<!DOCTYPE html>
<html>
<body>
    <!-- bold -->
    <b>HTML bold text</b>
    <!-- strong -->
    <strong>Strong text</strong>
    <!-- italic -->
    <i>HTML italic text</i>
    <!-- underline -->
    <u>Underlined text</u>
    <!-- superscript -->
    <sup>Superscript</sup>
    <!-- subscript -->
    <sub>Subscript</suub>
</body>
</html>

<big> and <small> Tags

The <big> and <small> tags change the relative size of text with the surrounding text. <big> tag makes the text slightly large, while the <small> tag makes the text small.

However, different browsers display the impact of these tags differently. In Internet Explorer, text formatted with a <big> tag is always one size larger than the surrounding text. The tag has no effect if the size of the surrounding text is 7. The text formatted with <small> tag is one size smaller than the surrounding text. The tag has no effect if the size of the surrounding text is 1.

Example

<!DOCTYPE html>
<html>
<body>
    <big>Larger text</big>
    <small>Smaller text</small>
</body>
</html>

Preformatted Text

This tag is for displaying the text as the user has typed. HTML ignores extra line breaks, and the text appears in a single line. The <pre> and </pre> tags enclose the text.

Example

In the following example  text will occur in a single line. The text appears in a single line as HTML ignores extra line breaks.

<!DOCTYPE html>
<html>
<body>
    <p>learningAxis aims to overcome many
    challenges while focusing on easy learning
    and simplicity.</p>
</body>
</html>

The following example will display the same text as written in the HTML <pre> tag.

<!DOCTYPE html>
<html>
<body>
    <pre>learningAxis    aims to overcome many
    challenges while focusing on easy learning
    and simplicity.</pre>
</body>
</html>

<del> and <mark> Tags

The <del> tag gives the text a strikethrough appearance that draws a horizontal line across all the text in the tag.

The <mark> tag specifies text that should be highlighted.

Scroll to Top