HTML Text Formatting

HTML contains several elements for defining text with a special meaning. Like how bold makes text important, or how italics makes you sound sophisticated at coffee shops.

8 min read Beginner HTML
Part 1

HTML Formatting Elements: Making Text Fancy Since 1993

Formatting elements were designed to display special types of text. These can be used according to your need—they can make your webpage either look professional or like my first second attempt at cooking (which was still terrible).

<strong> - Important Text

This text is so important it should be read in a dramatic movie trailer voice. Use it for things like "WARNING: Coffee is hot" or "PLEASE feed the developer."

<i> - Italicized Wisdom

Use italics when you want to sound thoughtful, like you're sharing ancient web development secrets. Also great for pretend Latin: Lorem ipsum dolor sit amet.

<mark> - Highlight Party

This text has been marked, probably because it said something important. Or maybe it's just the HTML version of using a highlighter while pretending to study.

<small> - Whisper Text

This text is smaller, like the fine print that says "not responsible for broken keyboards from coding frustration." Perfect for secrets and legal disclaimers nobody reads.

<del> & <ins> - Mistakes & Corrections

I totally didn't forget to save my code. I definitely saved my code. Use these when you change your mind, like deciding pizza isn't is breakfast.

<sup> & <sub> - Math & Science

Superscript for footnotes1 and Subscript for chemistry. Perfect for when you need to pretend you paid attention in science class while actually just making memes.

<b> - Bold Statements

This text is bold but not necessarily important—like when you confidently type code you know will probably break. It's visual emphasis without the semantic weight.

<em> - Emphasis Drama

This is emphasized text, which screen readers will read with extra feeling. Use it when you want to sound very serious about your taco preferences.

Combo Meal - Mix & Match

You can combine these! Like this weird highlighting. Just don't make your page look like a WordArt modern design explosion.

Remember This

Use semantic tags like <strong> and <em> for meaning, not just style. Tags like <b> and <i> only change appearance.


Part 2

Deeper Dive on Tags: Because We're Not Scared of HTML

Let's look at each tag with real examples. This is where the magic happens—or at least where text gets fancier.

1

Bold vs Strong: The Sibling Rivalry

<b> and <strong> look the same but have different personalities. One's for show, one's for meaning.


HTML 
<p>
    This is <b>visually bold</b> text. 
    This is <strong>semantically important</strong> text.
</p>

Accessibility Tip

Screen readers don't care about <b> but will emphasize <strong>. Use <strong> for actual important stuff like warnings. Use <b> for making your mediocre CSS look confident.

2

Italic vs Emphasis: The Drama Continues

<i> for style, <em> for drama. One slants, the other means it.


HTML 
<p>
    <i>This text is slanted</i> for no particular reason.
    <em>This text is emphasized</em> because I mean it!
</p>

When to Use Which

Use <i> for technical terms, foreign words, or when you want to sound fancy. Use <em> when you want screen readers to change their tone. Also use <em> when you're really annoyed about centering divs.

3

Del & Ins: The "I Changed My Mind" Duo

Show your mistakes (<del>) and corrections (<ins>) like a responsible adult.


HTML 
<p>
    I will <del>procrastinate</del> <ins>definitely start coding</ins> tomorrow.
    My code is <del>buggy</del> <ins>feature-rich</ins>.
</p>

Practical Use

These tags are perfect for showing document edits, tracking changes, or documenting your journey from "I know what I'm doing" to "Google, please help me." Browsers automatically style <del> with strikethrough and <ins> with underline because they're helpful like that.

4

Mark: The Highlighter Hero

<mark> highlights text like you're studying for a test you'll definitely fail.


HTML 
<p>
    Remember to <mark>save your work</mark> before screaming at the computer.
    This is <mark>important text</mark> that you'll ignore anyway.
</p>

Don't Overdo It

<mark> is like highlighter: great in moderation, terrible when you highlight everything. Use it to draw attention to key terms or search results. Don't make your page look like a banana threw up on it.

5

Sub & Sup: The Math Wizards

Make text go up (<sup>) or down (<sub>) for that scientific feel.


HTML 
<p>
    Water is H<sub>2</sub>O, unless you're me, then it's H<sub>2</sub>O<sup>with coffee</sup>.
    2<sup>10</sup> is how many times you'll refresh Stack Overflow today.
</p>

Common Uses

<sub>: Chemical formulas (H2O), mathematical indices. <sup>: Exponents (x2), footnotes[1], trademark symbols™. Also perfect for pretending you paid attention in chemistry while actually just making water look fancy.

6

Small: The Whisper Tag

<small> makes text smaller for when you want to say something but not really commit.


HTML 
<p>
    This is regular text.
    <small>This is fine print that says "we're not responsible for your CSS nightmares."</small>
    <small><small>This is even smaller, like my will to live after debugging for 5 hours.</small></small>
</p>

Legal Stuff & Side Notes

Perfect for copyright notices, disclaimers, side comments, and terms nobody reads. You can nest <small> tags to make text even smaller, but after two levels, even ants will need reading glasses.

"HTML formatting tags are like spices: a little bold makes it stand out, too much highlight gives everyone heartburn, and nobody really understands why triple small exists."

— A Developer Who Just Wants to Center a Div