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

Inline Styles

Text formatting starts with meaning: strong and em express importance or emphasis, while mark, del, ins, sub, and sup carry distinct semantics. CSS controls appearance.

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.

Inline Styles - HTML Example

<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.

Formatting Tags

<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, carries more meaning than just bold styling, while indicates emphasis, not just italic text.

Tag	Renders As	Meaning
<strong>	Bold	Important text (semantic)
<b>	Bold	Bold (visual only, no semantic meaning)
<em>	Italic	Emphasized text (semantic)
<i>	Italic	Italic (visual only - used for icons, terms)
<u>	Underline	Underlined text
<s>	Strike	No longer accurate/relevant
<mark>	Highlight	Highlighted/relevant text
<small>	Small	Fine print, side comments
<sub>	H2O	Subscript
<sup>	m2	Superscript
<del>	Deleted	Deleted/removed content
<ins>	Inserted	Inserted/added content
<abbr>	Abbreviation	Abbreviation with full form in title

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 when text is important, not just when you want it bold.
Use when you want emphasis, not just italics.
Use or 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, is useful for search highlights, and <abbr> helps explain shortened terms without cluttering the visible text.

Practical formatting

<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 . This keeps HTML semantic and CSS presentational.

Best Practices

Prefer semantic tags like and 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.