8 HTML Elements You Might Not Know About

Introduction

Hey there, web wizards and keyboard kung fu masters! 🧙‍♂️🥋 Ever felt like you've got your HTML game down pat? You know your <div>s from your <span>s and your <p>s from your <h1>s. But let me tell you, there are some HTML elements out there that are so underground, they make the mole look like a tourist. So grab your pickaxes 🪓, let's dig into the HTML mines and unearth 8 HTML elements that nobody uses, but everybody should!

1. The Mysterious <kbd> - A Keyboard in Disguise

Ever tried to explain to your non-techie friends how to press "Ctrl+Alt+Delete"? It's like teaching a cat how to fetch—nearly impossible! 🐱 That's where <kbd> comes in. This bad boy lets your text appear like a keyboard input, so there's no room for confusion.

Example:

Press <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Delete</kbd> to restart.

Output:

Press Ctrl+Alt+Delete to restart.

2. The Legendary <samp> - It’s Sample-tastic!

Folks, this one's so underused, even Google had to Google it. <samp> is used to define sample output from a computer program. "But why would I ever need that?" you might ask. To show off how awesome your code is, duh!

Example:

The computer says: <samp>Error 404</samp>.

Output:

The computer says: Error 404.

Do you write Python code that cracks jokes? Or JavaScript that orders pizza 🍕? Use <samp> to showcase the output. It's like the drumroll 🥁 before the punchline!

3. The Enigmatic <cite> - More Mysterious Than Bigfoot

You’ve probably heard of citations in academia, but did you know HTML has its own citation tag? Introducing the <cite> tag! 🎉

Example:

My favorite quote is "To be or not to be" from <cite>Hamlet</cite>.

Output:

My favorite quote is "To be or not to be" from Hamlet.

Who uses it? Not many, probably the same people who read the terms and conditions. 📃 But <cite> is perfect for highlighting the title of a work you're quoting. So, the next time you quote Shakespeare, give ol' Billy some <cite> love.

4. The Exotic <abbr> - The Text Version of Salsa Dancing 💃

Imagine you're writing about the "United Nations" and you're sick of typing it out. Enter <abbr>, the tag that lets you abbreviate text and also give a tooltip!

Example:

The <abbr title="World Health Organization">WHO</abbr> recommends it.

Output:

The WHO (hover to see full form) recommends it.

Your readers can hover over "UN" and get the full scoop. It's like reading the Cliff's Notes 📚 while reading the book.

5. The Epic <dfn> - Because We All Love Jargon

Let's talk <dfn>, or definition element. This sizzlin' hot tag is the text version of a dictionary.

Example:

The term <dfn>API</dfn> stands for Application Programming Interface.

Output:

The term API stands for Application Programming Interface.

6. The Invisible <ins> and <del> - The Ghostbusters of HTML

Meet the <ins> and <del> tags, the undercover agents of HTML. <ins> highlights text that's been inserted, while <del> strikes through deleted text.

Example:

My favorite color is <del>blue</del> <ins>green</ins>.

Output:

My favorite color is blue green.

Kinda like seeing the before and after pictures of someone who got a haircut. 💇‍♂️ One moment it's Fabio, the next it's Mr. Clean.

7. The Eccentric <wbr> - The Social Distancer of Words

Ever had a word so long it just refuses to break, messing up your layout? Here comes <wbr>, the line-break opportunist.

Example:

Super<wbr>cali<wbr>fragi<wbr>listic<wbr>expiali<wbr>docious

Output:

Super-

cali-

fragi-

listic-

expiali-

docious

It's like that friend who knows exactly when to show up with snacks 🍪 during a Netflix binge.

8. The Dynamic Pair <meter> & <progress> - The "How Close Are You To Losing It?" Bars

Example for <meter>:

Your battery: <meter min="0" max="100" value="40"></meter>

Output for <meter>:

Your battery: 🟩🟩🟨🟨🟨🟥🟥🟥🟥🟥 (40%)

Example for <progress>:

Progress: <progress value="70" max="100"></progress>

Output for <progress>:

Progress: ████████░░░░ (70%)

Meter? I barely know 'er! 🤣 But seriously, the <meter> tag is used for scalar measurements within a known range. Think battery life or exam stress level. 📊 Then there's its sibling <progress> which represents the completion of a task. Imagine it as your Monday survival bar. ☕

Conclusion

There you have it, folks—8 HTML elements that are cooler than a cucumber 🥒 in a snowstorm. Now it’s your turn! Have you ever used any of these tags? Or do you have other favorites that are sitting at the cool kids' table of HTML? Let's get chatty in the comments! 🗨️ And remember, in the world of HTML, you're only as obscure as the tags you use.