HTML Text Formatting — bold, italic, mark, del, sup

Inline Styles

The style attribute applies CSS directly to a single HTML element. It is useful for quick experiments, small demos, or very limited one-off styling. However, in real projects, too many inline styles make code harder to maintain because design rules get scattered throughout the markup.

In production websites, developers usually prefer internal or external stylesheets so the same design rules can be reused consistently across many elements and pages. Inline styles are best understood as a quick way to apply CSS, not as the main styling strategy for large websites.

<h1 style="color: #e74c3c; font-size: 32px;">Red Heading</h1>
<p style="background-color: #f0f0f0; padding: 10px;">Styled paragraph</p>
<div style="border: 2px solid blue; border-radius: 8px; padding: 16px;">
    Bordered box
</div>

Text Formatting Tags

HTML includes several text formatting tags that affect the meaning or presentation of content. Some tags are semantic, which means they communicate purpose or emphasis to browsers and assistive technologies. Others are mostly visual and are used when the styling matters more than semantic meaning.

<p><strong>Bold (important)</strong></p>
<p><b>Bold (visual only)</b></p>
<p><em>Italic (emphasis)</em></p>
<p><i>Italic (visual only)</i></p>
<p><u>Underlined text</u></p>
<p><s>Strikethrough text</s></p>
<p><mark>Highlighted text</mark></p>
<p><small>Smaller text</small></p>
<p>H<sub>2</sub>O (subscript)</p>
<p>E=mc<sup>2</sup> (superscript)</p>
<p><abbr title="HyperText Markup Language">HTML</abbr> (abbreviation)</p>
<p><del>Deleted text</del> <ins>Inserted text</ins></p>

Formatting Tags Reference

Choosing the correct formatting tag improves both readability and accessibility. For example, <strong> carries more meaning than just bold styling, while <em> indicates emphasis, not just italic text.

Semantic vs Visual Formatting

One of the most important ideas in HTML formatting is the difference between semantic tags and purely visual tags. Semantic tags describe the role or meaning of the content, while visual tags mostly change its appearance.

• Use <strong> when text is important, not just when you want it bold.
• Use <em> when you want emphasis, not just italics.
• Use <b> or <i> mainly for visual presentation or special text conventions.

Common Formatting Use Cases

Formatting tags appear in many everyday situations. Superscript and subscript are common in formulas, <mark> is useful for search highlights, and <abbr> helps explain shortened terms without cluttering the visible text.

<p>Water formula: H<sub>2</sub>O</p>
<p>Area formula: m<sup>2</sup></p>
<p><mark>Search result match</mark></p>
<p><abbr title="Cascading Style Sheets">CSS</abbr> styles web pages.</p>
<p><del>$99</del> <ins>$79</ins> Offer price</p>

When to Use CSS Instead

If the goal is only to change color, font size, spacing, alignment, or layout, CSS is usually the better choice. HTML formatting tags should be used when the text itself has meaning, not just when you want a different appearance.

For example, making a word red should usually be done with CSS, while marking a word as important should use <strong>. This keeps HTML semantic and CSS presentational.

Best Practices

• Prefer semantic tags like <strong> and <em> when they match the meaning of the content.
• Use CSS for layout and repeated design styling instead of relying heavily on inline styles.
• Do not over-format every word or sentence, because too much emphasis reduces clarity.
• Use <abbr> with a title attribute to explain abbreviations clearly.
• Use formatting tags consistently so your content stays clean and easy to understand.