![[The AI Show Episode 142]: ChatGPT’s New Image Generator, Studio Ghibli Craze and Backlash, Gemini 2.5, OpenAI Academy, 4o Updates, Vibe Marketing & xAI Acquires X](https://www.marketingaiinstitute.com/hubfs/ep%20142%20cover.png)
![[FREE EBOOKS] The Kubernetes Bible, The Ultimate Linux Shell Scripting Guide & Four More Best Selling Titles](https://www.javacodegeeks.com/wp-content/uploads/2012/12/jcg-logo.jpg){kind=logo}
![From drop-out to software architect with Jason Lengstorf [Podcast #167]](https://cdn.hashnode.com/res/hashnode/image/upload/v1743796461357/f3d19cd7-e6f5-4d7c-8bfc-eb974bc8da68.png?#)
.png?#)
.jpg?#)
_Christophe_Coat_Alamy.jpg?#)
![Rapidus in Talks With Apple as It Accelerates Toward 2nm Chip Production [Report]](https://www.iclarified.com/images/news/96937/96937/96937-640.jpg)
The HTML Elements You’re (Probably) Misusing – And How to Fix It
Most developers start with and and never look back. Need a button? Wrap it in a and slap an onclick. Need a section? Throw in a . 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. and and – Know the Difference Every HTML guide says: “Use semantic elements.” But what does that actually mean? When to use : Use when there’s no meaningful alternative. It’s a generic container, nothing more. Card content This is fine when grouping things purely for styling. But if you’re marking up content, or is probably what you need. When to use : Use for logical groupings of content that share a common theme. Latest News Some important update... If there’s a heading inside, that’s a strong sign you should be using instead of . When to use : Use when the content could stand alone (blog posts, news articles, forum posts,...). How JavaScript Changed My Life Long story... TL;DR: Use for styling, for grouping related content, for standalone pieces. 2. vs. – Stop Faking Buttons Using as a button is a crime against accessibility. Here’s what people do: Click me 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: Click me That’s it. It works out of the box, is accessible, and requires zero extra JavaScript hacks. 3. Without – A Useless Tag A is not just a wrapper. It connects to an input to improve usability. Bad: Username: Good: Username: Even better? Wrap the input inside the label. No for attribute needed: Username: Now clicking the label focuses the input, which is how forms are supposed to work. 4. vs. – Not the Same Thing They both make text bold, but they aren’t interchangeable. is just visual bold text. No extra meaning. means important text, which screen readers emphasize. Example: This is a bold word. This is a very important warning. If it’s just for looks, use CSS. If it conveys importance, use . 5. and – The Forgotten Image Tags Ever seen an image with a caption? That’s where comes in. What most people do: A cute cat sitting on a laptop. The better way: A cute cat sitting on a laptop. 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 , 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!
Most developers start with Need a button? Wrap it in a Need a section? Throw in a 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.
Every HTML guide says: “Use semantic elements.”
But what does that actually mean?
Use It’s a generic container, nothing more. This is fine when grouping things purely for styling. But if you’re marking up content, Use If there’s a heading inside, that’s a strong sign you should be using Use TL;DR: Use Using Here’s what people do: Looks fine, right? Wrong.
It’s missing:
That’s it.
It works out of the box, is accessible, and requires zero extra JavaScript hacks.
A It connects to an input to improve usability.
Bad: Good: Even better? Wrap the input inside the label.
No Now clicking the label focuses the input, which is how forms are supposed to work.
They both make text bold, but they aren’t interchangeable.
Example: If it’s just for looks, use CSS.
If it conveys importance, use Ever seen an image with a caption? That’s where Now the image and caption are linked together, making it clearer for both users and search engines.
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 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! and never look back.
onclick.
1.
and – Know the Difference
When to use
or is probably what you need.
When to use
:
for logical groupings of content that share a common theme.
Latest News
Some important update...
instead of
When to use
:
when the content could stand alone (blog posts, news articles, forum posts,...).
How JavaScript Changed My Life
Long story...
for grouping related content, for standalone pieces.
2.
vs.
disabled and form submission
The right way:
3.
Without – A Useless Tag
is not just a wrapper.
Username:
for attribute needed:
Username:
4.
vs. – Not the Same Thing
is just visual bold text. No extra meaning. means important text, which screen readers emphasize.
This is a bold word.
This is a very important warning.
.
5.
What most people do:
The better way:
Final Thoughts
