Many people regard HTML/CSS as one of the most basic skills required by a web designer or developer. Whether you do front-end design/development or back-end development, sound knowledge in the HTML/CSS department is very important.
Interestingly enough, most people think they have top notch HTML/CSS skills even though they don’t. Let’s take a look at some of the common mistakes when building HTML/CSS pages.
Worshiping the devil
As Internet Explorer’s market sharing keeps declining, this becomes less and less a common problem. However, in certain parts of the world, namely the Asian region, Internet Explorer still is the domanent player. Every now and then I come across with developers who think IE is still the best web browser out there and Firefox and the like are useless because they are incompatible with the Microsoft standards. No I’m not joking, these developers do actually think this way. You can bet that the web pages they build only render properly in IE.
Non-semantic markups
Another funny thing (that happens a lot in the Chinese web development community) is that most people refer to the HTML/CSS building skill as ‘DIV + CSS’. Notice the ‘DIV’ part, they seem to think that DIVs are the single most important aspect in CSS. While the ‘DIV + CSS’ notation only happens in certain regions, the actual problem exists everywhere – people abuse the use of DIVs.
Many moons ago people were very familiar with table designs (as in, use tables for page structures). After CSS became the norm, people started to realise how important it was to structure web pages using the combination of HTML and CSS. So when they found out DIVs, they found light.
Here is an example:
???TODO
The above HTML should have been simply structured this way:
???TODO
Non-semantic markups have many disadvantages:
- Complex HTML structure is more difficult to maintain and potentially triggers more human errors
- The companion CSS file grows bigger too and is even more difficult to maintain
- In some cases, a non-stylised version of the HTML would not render properly, resulting in broken pages in devices such as screen readers
- HTML elements nest too deeply, resulting in slower JavaScript selector performance
