Mastering HTML Text Formatting with Examples (2024)

HTML offers a variety of tags to format text on your webpage, enhancing readability, visual appeal, and conveying meaning. These tags fall into two primary categories:

1. Physical Formatting Tags: These tags control the visual appearance of the text without necessarily specifying its semantic meaning.

Examples include:

• <b> (bold) and </b>: Make text bold, often used for emphasis or highlighting key points.

HTML

This is some **bold** text.

• <i> (italic) and </i>: Slant text, typically for terms in a foreign language, technical terms, or thoughts within a narrative.

HTML

This sentence contains an _italicized_ word.

• <u> (underline) and </u>: Underline text, often used for links (although CSS is preferred for modern styling).

HTML

This text is underlined.  (Use CSS for styling links)

• <sup> (superscript) and </sub>: Display text slightly above the baseline, frequently used for scientific notation or footnotes.

HTML

E=mc<sup>2</sup>

• <sub> (subscript) and </sub>: Display text slightly below the baseline, common for chemical formulas or mathematical equations.

HTML

H<sub>2</sub>O

2. Logical Formatting Tags: These tags convey the meaning or purpose of the text, allowing browsers to interpret and potentially render it differently. Examples include:

• <strong> (strong) and </strong>: Indicate strong importance, similar to bold but often used for more urgent or critical content.

HTML

**Please remember** to save your work frequently.

• <em> (emphasis) and </em>: Denote emphasis similar to italic but focusing on the importance of the text.

HTML

I am feeling _especially_ grateful today.

• <cite>: Mark a title of a creative work (book, film, song).

HTML

The novel <cite>To Kill a Mockingbird</cite> is a classic.

• <code>: Display inline code snippets. HTML

HTML

Use the `<code>for` loop to iterate through an array.

• <pre> (preformatted text): Preserve whitespace and line breaks, ideal for code blocks or poems.

HTML

<pre>
This is a poem
written in preformatted text.
</pre>

Choosing the Right Tag: Semantics over Presentation

Browsers can use this information to adjust the presentation based on the context. For instance, a screen reader might emphasize <strong> content for visually impaired users.

Beyond the Basics: Advanced Text Formatting

HTML offers additional tags for specific formatting needs:

• <abbr>: Abbreviation or acronym (often with a <title> element for explanation).
• <blockquote>: Block quotation, typically indented for distinction.
• <del>: Deleted text, often used for strikethrough effects.
• <ins>: Inserted text, sometimes underlined.

Visit it for next step to learn 2024’s Beginner-Friendly Roadmap.