HTML Text Formatting

Welcome to The Coding College, where we simplify coding and programming for learners of all levels. In this post, we’ll explore HTML Text Formatting, a key concept to make your content more engaging and visually appealing. Learn how to use various HTML tags to emphasize, style, or structure text effectively.

What Is HTML Text Formatting?

HTML text formatting refers to the use of specific tags to apply styles like bold, italics, underlining, or highlighting to text. These tags help convey meaning, emphasize importance, or enhance readability.

Common HTML Text Formatting Tags

Here’s a table of commonly used text formatting tags:

Tag	Description	Example
`<b>`	Makes text bold	`<b>This text is bold.</b>`
`<strong>`	Indicates strong emphasis (semantic)	`<strong>Important text.</strong>`
`<i>`	Italicizes text	`<i>This text is italic.</i>`
`<em>`	Emphasizes text (semantic)	`<em>This text is emphasized.</em>`
`<u>`	Underlines text	`<u>This text is underlined.</u>`
`<mark>`	Highlights text	`<mark>This text is highlighted.</mark>`
`<small>`	Displays smaller text	`<small>This text is smaller.</small>`
`<del>`	Strikes through text	`<del>This text is deleted.</del>`
`<ins>`	Shows inserted text (underlined)	`<ins>This text is inserted.</ins>`
`<sub>`	Displays subscript text	`H<sub>2</sub>O` (H₂O)
`<sup>`	Displays superscript text	`X<sup>2</sup>` (X²)
`<code>`	Styles text as code	`<code>print("Hello World")</code>`
`<blockquote>`	Quotes a section	`<blockquote>This is a blockquote.</blockquote>`

Examples of Text Formatting

Bold and Italics

<p>This is a <b>bold</b> word and this is an <i>italic</i> word.</p>

Strong and Emphasis

<p><strong>Important:</strong> Emphasized text looks like this: <em>Example.</em></p>

Highlighting with Mark

<p>This is a <mark>highlighted text</mark> to draw attention.</p>

Subscript and Superscript

<p>The chemical formula for water is H<sub>2</sub>O.</p>
<p>Area of a square = X<sup>2</sup>.</p>

Styling Text Formatting Tags with CSS

HTML formatting tags can be further customized using CSS for unique designs.

Example:

<style>
    b {
        color: blue;
    }
    em {
        font-style: italic;
        color: green;
    }
    mark {
        background-color: yellow;
        padding: 2px;
    }
</style>

<p>This is <b>bold blue text</b> and <em>italic green text</em>.</p>
<p><mark>Highlighted text</mark> stands out!</p>

Use Cases for Text Formatting

Emphasizing Keywords:
Use <strong> or <em> to highlight important points.
Indicating Changes:
Show deletions with <del> and insertions with <ins>.
Citing Sources:
Use <blockquote> for long quotes.
Displaying Code:
Format code snippets with <code> for clarity.

Accessibility Tips for Text Formatting

Use semantic tags like <strong> and <em> for better accessibility.
Avoid excessive use of bold or italic tags to prevent visual clutter.
Combine text formatting with appropriate CSS for better design consistency.

Example: Combining Multiple Tags

<h1>HTML Text Formatting</h1>
<p><strong>Bold:</strong> Use <b>this tag</b> to make text bold.</p>
<p><em>Italic:</em> Use <i>this tag</i> to italicize text.</p>
<p>Highlight text with <mark>this tag</mark> for emphasis.</p>
<p>Use <sub>subscript</sub> and <sup>superscript</sup> for scientific or mathematical notations.</p>
<p>Code Example: <code><h1>Hello</h1></code></p>

Learn More at The Coding College

At The Coding College, we aim to empower aspiring developers with practical, easy-to-understand tutorials. Mastering HTML Text Formatting is an essential step in your journey to becoming a web developer.