Premium HTML Course

14. HTML Text Formatting

HTML provides several tags for formatting text. These tags allow you to apply styles like bold, italic, underline, strikethrough, and more, to make the text stand out or follow certain design principles.

Common HTML Text Formatting Tags

Here are some of the most commonly used HTML text formatting tags:

Bold Text (<b> and <strong>)

The <b> tag is used to make text bold, while the <strong> tag also makes text bold but with added importance, which can help with accessibility and SEO.

Example: Bold Text

<b>This is bold text</b>
<strong>This is strong text</strong>
        

The text within the <b> tag will appear bold, while the <strong> tag adds extra emphasis to the text.

Italic Text (<i> and <em>)

The <i> tag is used to italicize text, while the <em> tag is used to emphasize text, making it italicized and important.

Example: Italic Text

<i>This is italic text</i>
<em>This is emphasized text</em>
        

The <em> tag also provides emphasis, which can help with accessibility and SEO.

Underlined Text (<u>)

The <u> tag is used to underline text. However, it is not commonly used for general styling and should be used when the underlining is part of the semantic meaning (e.g., links).

Example: Underlined Text

<u>This is underlined text</u>
        

Strikethrough Text (<s> and <del>)

The <s> tag is used for strikethrough text, indicating that the text is no longer valid or has been removed. The <del> tag is similar but semantically represents deleted content.

Example: Strikethrough Text

<s>This text is struck through</s>
<del>This text is deleted</del>
        

Subscript and Superscript (<sub> and <sup>)

The <sub> tag is used for subscript text (e.g., H₂O), and the <sup> tag is used for superscript text (e.g., 5²).

Example: Subscript and Superscript

H<sub>2</sub>O
5<sup>2</sup>
        

Code Text (<code>)

The <code> tag is used to display code text. It is often styled to appear in a monospaced font.

Example: Code Text

<code>let x = 10;</code>
        

Preformatted Text (<pre>)

The <pre> tag is used to display preformatted text, preserving white spaces and line breaks.

Example: Preformatted Text

<pre>
This is preformatted text.
It preserves line breaks and spaces.
</pre>
        

HTML Text Formatting Best Practices

• Use semantic tags like <strong> and <em> to convey meaning, rather than using purely visual formatting tags like <b> and <i>.
• Avoid overuse of text formatting tags—too much bold or italic text can make your content harder to read.
• Ensure that any text that needs emphasis (such as key information) is properly marked up with <strong> or <em>.

Conclusion

Text formatting in HTML is a powerful way to enhance content, but it's important to use the right tags for the right purpose. In this lesson, we covered various HTML text formatting tags, including bold, italic, underline, and more. In the next lesson, we will explore HTML Div and Span elements and their role in structuring content.