Making Words Dance: How <strong>, <em> & Friends Bring Your Text to Life
Remember that teacher who made boring grammar rules actually… fun? Let’s channel that energy today. We’re playing with text formatting tags – but not like a textbook. Like a jazz musician improvising. 🎷
In this post, we will explore various aspects of html formatting to enhance your text styling.
(Flashback to my rookie mistake: Highlighted an entire client proposal with <mark>. Looked like a radioactive banana. They asked if their monitor was dying. We don’t talk anymore. But now, I understand the importance of html formatting.)
1. <strong> – Your Text’s Megaphone
When you need that “LISTEN UP” energy:
<p>Eating Pete's pizza <strong>before</strong> midnight prevents existential dread.</p> Why I’m obsessed:
- Visually: Shoves words in bold (usually)
- Behind scenes: Pokes screen readers like “HEY ANNOUNCE THIS LOUDER!”
- Perfect for: Deadline warnings, life-saving tips, snack alerts
Real talk: Used 37 <strong> tags once. My article looked like it was screaming. Don’t be me.
2. <em> – The Side-Eye Specialist
For that “oh really?” vibe when words need attitude:
<p>My code <em>never</em> has bugs. *cough*</p> What happens backstage:
- Browsers lean words forward (fancy italics)
- Screen readers do that sassy upward inflection
- Secret weapon: Sarcasm, dramatic pauses, whispered threats
Try it: Say “This is fine” while your code burns. That’s <em> magic.
3. <small> – The Whisper Font
Your go-to for stuff lawyers make you say:
<p>Win a yacht! <small>(Yacht = 3 inch rubber duck)</small></p> When it shines:
- Legal mumbo-jumbo
- “Terms apply” escapes
- Sneaky footnotes
4. <mark> – The Digital Highlighter
For that “I smeared Cheeto dust on my screen” look:
<p>Party at <mark>Jake's</mark>! *Not* Blake's. <mark>JAKE'S.</mark></p> Pro moves:
- Highlight critical deets (gate numbers, passwords)
- Never highlight entire paragraphs (unless trolling)
- Combo with
<strong>for emergencies:
<p><mark><strong>CODE RED:</strong> Donuts in breakroom!</mark></p>5. The Revision Twins: <del> & <ins>
For showing your glorious mistakes:
<p>
Deadline: <del>Yesterday</del>
<ins>Next "someday"</ins>
</p> How browsers translate:
<del>: ~~Strikethrough shame~~<ins>: <ins>Underlined redemption</ins>- Golden uses: Price changes, edit histories, relationship status updates
6. <sub> & <sup> – Nerdy Text Acrobats
For when regular text just won’t cut it:
<p>
Need more caffeine: C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>
<br>
Excitement level: 10<sup>∞</sup>
</p> Where they slay:
- Science stuff (H₂O feels fancy)
- Math headaches (E=mc²)
- Footnotes<sup>1</sup>
- Making TM<sup>™</sup> look pro
Why Raw CSS Can’t Replace These
“Can’t I just style everything with CSS?” Sure, but you’ll miss:
- Screen reader drama:
<strong>= ANGRY CAPS,<em>= sassy whisper - Google bonus points: Algorithms notice semantic emphasis
- Code readability:
<mark>beats<span class="panic-yellow"> - Future-proofing: Meaning survives redesigns
Mixing Tags Like a Mad Scientist
The good:
<p>
<strong><em>URGENT:</em></strong>
<mark>Free pizza</mark>
<small>(Limit: 1 crumb per customer)</small>
</p> The ugly:
- Using
<b>instead of<strong>(like fake muscles) - Making footnotes with
<small>(lawyers cry) - Highlighting with manual CSS (so… much… typing…)
Your Turn: Create a “Crisis Alert”
Mission: Write an absurd warning mixing 5+ tags:
<p>
<strong class="panic">ALERT:</strong>
<em>Taco shortage</em> predicted <mark>today at noon</mark>.
Guacamole status: <del>stable</del> <ins>CRITICAL</ins>.
Survival probability: 78<sup>±2</sup>%.
<small>Not liable for salsa-related injuries.</small>
</p> Extra credit: Add class="panic" to <strong> – we’ll make it blink later!
Why This Actually Matters
In our TL;DR world, smart formatting:
→ Helps skimmers grab key info
→ Lets blind users “hear” your sarcasm
→ Makes Google notice your priorities
→ Prevents your content from reading like robot manuals
“Formatting is charisma for text.”
-My editor while fixing my emotional void of a draft
Tinker dare: Nest <sub> inside <sub>. Try H<sub><sub>2</sub></sub>O. Does water become H₂? Or just… broken? 🧪 (Spoiler: Browsers are chill but chemists might fight you.)
Get Build Breakdowns & Tips — Straight to Your Inbox🔧
Join now and get bite‑sized coding hacks, pro tips, and exclusive tutorials delivered weekly—level up your skills without lifting a finger!
