DEV Community

Maxime
Maxime

Posted on • Edited on

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

Good:

<label for="username">Username:</label>
<input type="text" id="username" name="username">
Enter fullscreen mode Exit fullscreen mode

Even better? Wrap the input inside the label.

No for attribute needed:

<label>
  Username:
  <input type="text" name="username">
</label>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

The better way:

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

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 Medium, check it out!

Top comments (14)

Collapse
 
xwero profile image
david duymelinck • Edited

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>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
digitalminds profile image
Maxime

Exactly! The <button> tag is powerful and a lot of people don’t realize all the built-in functionality it has. Nice example!

Collapse
 
ishimwe_ningque_26744785 profile image
Ishimwe Ning Que

👍

Collapse
 
crosschainer profile image
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

Collapse
 
digitalminds profile image
Maxime

Thanks for the suggestion! I’ll think about it (There’s no input(), you might be thinking of prompt())

Collapse
 
nickcoffey profile image
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!

Collapse
 
digitalminds profile image
Maxime

Thanks! And I agree, it’s easy to rely on <div> everywhere in React. Glad you found the <figure> and <figcaption> tips helpful!

Collapse
 
melfunc profile image
MeL

Very valid points and promotes good coding practices.

Collapse
 
digitalminds profile image
Maxime

Many thanks!

Collapse
 
slobodan4nista profile image
Slobi

Nice ⭐ figure figcaption 🔖

Collapse
 
madhurima_rawat profile image
Madhurima Rawat • Edited

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

Collapse
 
digitalminds profile image
Maxime

Thanks! Glad you found it useful

Collapse
 
aadswebdesign profile image
Aad Pouw

The 'main' element is somewhere in the middle, right?

Collapse
 
ishimwe_ningque_26744785 profile image
Ishimwe Ning Que

Help me I have problem in JavaScript switch question is (by us a switch case write a program that ask for a number (1-7) and print the corresponding day of the week.

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more