The HTML Elements You’re (Probably) Misusing – And How to Fix It

Most developers start with <div> and <span> and never look back.

Need a button? Wrap it in a <div> and slap an onclick.

Need a section? Throw in a <div class="section">.

Sound familiar?

The problem? HTML is not just for styling.

It has meaning, and using the right elements improves accessibility, SEO, and maintainability. Plus, it makes your code cleaner.

So let’s fix these common HTML mistakes once and for all.

---

1. <div> and <section> and <article> – Know the Difference

Every HTML guide says: “Use semantic elements.”

But what does that actually mean?

When to use <div>:

Use <div> when there’s no meaningful alternative.

It’s a generic container, nothing more.

<div class="wrapper">
  <div class="card">Card content</div>
</div>

This is fine when grouping things purely for styling. But if you’re marking up content, <section> or <article> is probably what you need.

When to use <section>:

Use <section> for logical groupings of content that share a common theme.

<section>
  <h2>Latest News</h2>
  <p>Some important update...</p>
</section>

If there’s a heading inside, that’s a strong sign you should be using <section> instead of <div>.

When to use <article>:

Use <article> when the content could stand alone (blog posts, news articles, forum posts,...).

<article>
  <h2>How JavaScript Changed My Life</h2>
  <p>Long story...</p>
</article>

TL;DR: Use <div> for styling, <section> for grouping related content, <article> for standalone pieces.

---

2. <button> vs. <div onclick> – Stop Faking Buttons

Using <div> as a button is a crime against accessibility.

Here’s what people do:

<div class="button" onclick="doSomething()">Click me</div>

Looks fine, right? Wrong.

It’s missing:

• Keyboard support (try tabbing to it, you can’t!)
• Proper semantics (screen readers won’t recognize it as a button)
• Built-in features like disabled and form submission

The right way:

<button onclick="doSomething()">Click me</button>

That’s it.

It works out of the box, is accessible, and requires zero extra JavaScript hacks.

---

3. <label> Without <input> – A Useless Tag

A <label> is not just a wrapper.

It connects to an input to improve usability.

Bad:

<label>Username:</label>
<input type="text" name="username">

Good:

<label for="username">Username:</label>
<input type="text" id="username" name="username">

Even better? Wrap the input inside the label.

No for attribute needed:

<label>
  Username:
  <input type="text" name="username">
</label>

Now clicking the label focuses the input, which is how forms are supposed to work.

---

4. <b> vs. <strong> – Not the Same Thing

They both make text bold, but they aren’t interchangeable.

• <b> is just visual bold text. No extra meaning.
• <strong> means important text, which screen readers emphasize.

Example:

<p>This is a <b>bold word</b>.</p>
<p>This is a <strong>very important warning</strong>.</p>

If it’s just for looks, use CSS.

If it conveys importance, use <strong>.

---

5. <figure> and <figcaption> – The Forgotten Image Tags

Ever seen an image with a caption? That’s where <figure> comes in.

What most people do:

<img src="cat.jpg" alt="A cute cat">
<p>A cute cat sitting on a laptop.</p>

The better way:

<figure>
  <img src="cat.jpg" alt="A cute cat">
  <figcaption>A cute cat sitting on a laptop.</figcaption>
</figure>

Now the image and caption are linked together, making it clearer for both users and search engines.

---

Final Thoughts

HTML isn’t just about divs and spans.

Using the right elements:

• Makes your code easier to read

• Improves accessibility

• Helps SEO

• Saves you from reinventing the wheel

So next time you reach for a <div>, ask yourself: Is there a better tag for this?

Let me know in the comments—what’s an HTML mistake you see all the time?

---

I share more content on Better Code, Better Web and Digital Minds, check them out!

Comments

[Slobi]

Nice ⭐ figure figcaption 🔖

[crosschainer]

You should make an article on the built-in JS features for browsers like:
confirm("Do you want to proceed?") - which pops up a browser-default confirmation window
and
input("Type in your name") - which pops up a input field in the browser

[Nicholas Coffey]

In React it can be easy to end up with <div>’s everywhere. I agree 100% that we should be using the proper HTML tags no matter the stack. I also didn’t know about the <figure> and <figcaption> tags. Great article!

[david duymelinck]

Not a lot of people know the button tag is very powerful.

<div class="alwaysVisible">
<button 
     type="submit" 
     form="longForm"
     formmethod="post" 
    formaction="/save-long-form" 
    formenctype="multipart/form-data">Save</button>
</div>
<form id="longForm">
<!-- a lot of inputs -->
</form>

[Ankit Yadav]

💡 Stop Searching, Start Connecting – Join MyExpertify Today! 💡

🤝 Are you looking for expert guidance?
🔹 Easily post your project and let experts find you OR browse and hire the best professional yourself.
🔹 Chat, call, and collaborate seamlessly—No complicated bidding or long waiting times!

💼 Are you an expert?
🎯 List your skills, set your rates, and get direct project invitations.
🎯 Secure payments, flexible schedules, and a streamlined experience.

🔒 100% Secure | Instant Connections | Hassle-Free Collaboration

🌐 Start Now: MyExpertify.com

[Madhurima Rawat]

Thanks, great article 👍 All this are very useful for web development projects.

[MeL]

Very valid points and promotes good coding practices.