Breaking Down HTML Code Smells: How to Spot and Fix Them
HTML – the foundation of every web page on the internet. It’s a language we love, we dread, and sometimes, we just put up with it. The beginners, lovingly referred to as ‘newbies’, often grapple with understanding how to create a decent webpage without creating a hot, stinking mess. But no worries, every coder has been there!
Let’s settle one thing first — what are HTML Code smells?
What are HTML Code Smells (and Why They Aren’t Gross)
A “code smell” isn’t about a physical scent that emerges from your computer (thankfully, because that would be super weird). It’s actually a term in programming which indicates there might be a deeper problem.
Think of it as the burnt toast of the coding world. If you smell something burning in the kitchen, there’s probably something more severe going on. In coding, that could mean an inefficient or inappropriate use of codings, doomed to cause trouble down the line.
Now we’ve got that cleared up, let’s delve into the typical HTML code smells and how to fix them.
Sniffing Out HTML Code Smells
There are a bunch of HTML code smells, but some are more common and problematic than others.
Smell 1: Div-itis
As a newbie, it’s normal to get carried away stacking ‘div’ tags — a lot of them, actually. You might feel as though you’ve stumbled upon a magical wand (‘div’ tags), transforming your dangerously shaky web page into a maintained structure. But that’s a trap! Div-itis, or excessive use of ‘div’ tag peppers your page with unnecessary and complex code that only upsets the smooth functioning.
How to fix it? One word: semantics. HTML5 tags, such as ‘