HTML & CSS: common mistakes

Tweet

Today we are going to see something half way between funny and serious: common mistakes we make while using HTML and CSS.

Why is it funny? Because sometimes those mistakes are so basic that when talking about them we usually react saying we don't make such mistakes. But then... when it happens, for any reason - even the most incredible - the only thing we can do is laugh. Mistakes are always just around the corner. The better we know them, the easier we are going to avoid them.

And when it happens... well... just have a laugh!



HTML
The most common mistake when writing HTML code goes under the name of "how could you leave it open?". When I was young, my teacher used to tell me that quotes and parenthesis must always be closed, otherwise the words inside would catch a cold.
Well, think it the same way. Always close HTML tags that need to be closed.

The second mistake is again very common between beginners: "right things in the right place". We really need to keep things tidy and neat and avoid the great pitfall: use proper nesting tags. Just to be clear for those of you that started coding yesterday... the following is incorrect:

<div><span>Hello!</div></span>

The third mistake: "right dress for right weather". I've talked about it and I think it's very important: choose the right DOCTYPE for your work of art!

Another mistake: "what are those tiny upper scratches in my code?"
When the great minds decided to make HTML a standard, they decided to use quotes. As I always remember my old primary school teacher, I usually remember to close quotes... do you?
Thus, if something is not working... check those damn quotes!
Oh! By the way... that's a common mistake in other languages like JavaScript and ASP as well.

We are getting close to CSS... and so, the last HTML mistake is something that stays in between. Can you guess?
"Is it meat or fish?"
Well IDs are not classes and classes are not IDs.
I believe you all already know the difference, but there it is. Do not confuse IDs and classes, because they are different.
Should I explain why? In CSS, jQuery and JavaScript we can manipulate DOM elements by IDs or classes. Well... I think I will write something about it in the future...

Now, just to finish up things a few reminders:
1) do not use uppercase tags (<DIV>);
2) do not use inline styles;
3) use entity codes.

Ok folks, let's move on to CSS!

CSS
CSS common mistakes are quite... hmmm... common and - well -  similar to HTML's.

The old primary school teacher strikes again: "what's opened should always be closed!"
We are talking about curly brackets. Well, well, well, we all hate the person who thought curly brackets are cool for CSS, but that's it! We have to accept it.
So remember to close CSS  brackets!
And, while we are on it... every declaration should end with a semicolon.

As I always say, to keep things tidy we need to be sure that classes and IDs are working properly. As said: "style matters!" and "fish is not meat!". Do not confuse classes with IDs!

The third mistake is not really a mistake. In fact it is more an advice: "short legged people should not jump the ditch!". I do not like shortcuts: shorthands in CSS are really awful, while shortened colour declarations are incredibly horrible. Do not use shortcuts! ... please ...

And that's it!

As always, if you want to share your thoughts about HTML and CSS common mistakes, please do so using the comments section below!
In the meantime... have a glorious day!