HTML Text Formatting

Introduction

In this chapter, you will learn about HTML text formatting, which allows you to control the appearance and emphasis of text content on your web pages. HTML provides various tags to format text, making it bold, italic, underlined, and more. By understanding these tags, you can enhance the readability and presentation of your content.

Basic Text Formatting Tags

Bold Text

The  tag or the  tag is used to make text bold. The  tag also indicates that the text is of strong importance.

<p>This is a <b>bold</b> text.</p>
<p>This is a <strong>strong</strong> text.</p>

Italic Text

The  tag or the  tag is used to make text italic. The  tag emphasizes the text.

<p>This is an <i>italic</i> text.</p>
<p>This is an <em>emphasized</em> text.</p>

Underlined Text

The  tag is used to underline text.

<p>This is an <u>underlined</u> text.</p>

Strikethrough Text

The <s> tag is used to display text with a strikethrough.

<p>This is a <s>strikethrough</s> text.</p>

Superscript and Subscript

The  tag is used for superscript text, and the  tag is used for subscript text.

<p>This is a <sup>superscript</sup> text.</p>
<p>This is a <sub>subscript</sub> text.</p>

Monospaced Text

The <code> tag or the <pre> tag is used to display monospaced (fixed-width) text. The <pre> tag preserves both spaces and line breaks.

<p>This is a <code>monospaced</code> text.</p>
<pre>
This is preformatted text.
    It preserves both spaces and line breaks.
</pre>

Combining Text Formatting Tags

You can combine multiple formatting tags to apply multiple styles to the text.

<p>This is a <b><i>bold and italic</i></b> text.</p>
<p>This is an <em><u>emphasized and underlined</u></em> text.</p>

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Text Formatting</title>
</head>
<body>
    <h1>HTML Text Formatting</h1>
    <p>This is a <b>bold</b> text.</p>
    <p>This is a <strong>strong</strong> text.</p>
    <p>This is an <i>italic</i> text.</p>
    <p>This is an <em>emphasized</em> text.</p>
    <p>This is an <u>underlined</u> text.</p>
    <p>This is a <s>strikethrough</s> text.</p>
    <p>This is a <sup>superscript</sup> text.</p>
    <p>This is a <sub>subscript</sub> text.</p>
    <p>This is a <code>monospaced</code> text.</p>
    <pre>
This is preformatted text.
    It preserves both spaces and line breaks.
    </pre>
    <p>This is a <b><i>bold and italic</i></b> text.</p>
    <p>This is an <em><u>emphasized and underlined</u></em> text.</p>
</body>
</html>

Conclusion

HTML text formatting tags are powerful tools that allow you to control the appearance and emphasis of text on your web pages. By using these tags effectively, you can enhance the readability and presentation of your content, making your web pages more engaging and user-friendly. Understanding and utilizing these tags is essential for anyone involved in web development.