HTML might seem straightforward, but there’s a whole world of lesser-used tags that can level up your markup game in surprising ways. In this edition of dev tips, we’re spotlighting a few sneaky-useful HTML tags that are often overlooked but definitely worth keeping in your back pocket.
Let’s get tagging.
1. <abbr>: The Abbreviation Tag That Pulls Double Duty
Stop using <span> for everything—it’s time the <abbr> tag got some love. This tag is perfect for adding context to shortened terms. Hover over it, and boom—a tooltip appears with the full phrase. It’s clean, semantic, and great for accessibility.
Why it rocks:
- Adds clarity without clutter.
- Improves user experience and screen reader support.
- Quick way to deliver extra info without disrupting your layout.
Example:
<h1>
The most amazing
<abbr title="Go to BitsKingdom site to get in touch with us!">kingdom</abbr>
you could ever imagine
</h1>2. <optgroup>: Because Dropdowns Deserve Better Organization
Dropdowns getting chaotic? The <optgroup> tag helps group related options inside a <select> element, making your form UX way more intuitive. Bonus: You can use attributes like disabled or label to fine-tune behavior and style.
Why it rocks:
- Keeps forms organized.
- Groups are easy to scan for users.
- You can disable entire option categories if needed.
Example:
<label for="bitsKingdom">Bits Kingdom:</label>
<select id="bitsKingdom" name="bitsKingdom">
<optgroup label="Happy Place">
<option value="kingdom">Kingdom</option>
<option value="developer">Developer</option>
<option value="designer">Designer</option>
</optgroup>
<optgroup label="Party" disabled>
<option value="dj">DJ</option>
<option value="host">Host</option>
</optgroup>
</select>Result:
3. <acronym>: For When You Want Smart, Stylish Shortcuts
Like <abbr>, the <acronym> tag gives you a tooltip and styling options, but specifically for acronyms. Although this tag has fallen out of favor and isn’t always supported (MDN notes it’s obsolete in HTML5), it still works in many browsers and might be a nifty trick in certain projects.
Why it used to rock:
- Makes your markup more readable.
- Offers tooltips for extra context.
- Easily stylable for acronym flair.
Example:
<p>
The website design of <acronym title="Bits Kingdom">BK</acronym> will blow your mind!
</p>If you didn’t use these tags and found them helpful, you’ll probably want to keep improving! Check out this article and speed up your coding skills even more!
📝 Pro tip: If you’re going for modern standards, it’s best to stick with
<abbr>—it does the job of<acronym>and then some.
Final Tagline
Learning to use the right tag for the job makes your HTML cleaner, your UX smoother, and your future self way happier. So, if these tags were new to you, congrats—you’ve just unlocked some extra power in your coding arsenal.
Want more shortcuts like these? Check out this article and keep sharpening those dev skills. Your next cleaner, smarter project awaits.