
Anyone who knows anything about my development style knows I’m a huge stickler for clean, semantic code. It kills me when a client asks me to edit an existing site that’s filled with improper tabs, run-on coding, extra blank lines and divs name “div45673435534”.
I’ve been so proud of the development community lately, because I’ve watched the importance of clean code in the past year or so become very, very important. As a matter of fact, clients are now becoming educated in this subject and hire developers based on the quality of their code.
So I’ve noticed several recent articles on structuring code, and since I’m always looking out for new ideas, I’ve perused as many as these articles as possible. However I’ve noticed one alarming tip that most of these articles offer up to developers – that you should comment your HTML extensively.
I disagree that you should comment your HTML extensively – or even at all.
Now, before you flame my comments let me explain why.
What is the purpose of commenting code?
Commenting code is meant to do a few things. One, it tells any future dev who needs to work on your site what something does. Two, it helps you find what you’re looking for.
In languages like PHP, Javascript, ASP and Objective C, commenting is very important because the files can go on for forever and it’s not always obvious as to what something does. HTML, however, is not and should not be built like this.
Semantics comes into play a lot more in HTML than anything else. What your HTML code does should always be obvious, as HTML itself is very simple in nature and structure. Your divs should be named semantically, header for the header, footer for the footer. Your files should never be very long, thanks to the use of includes and repeating areas (like the header and footer).
Properly tabbing and spacing your code also gives it natural breaks that allow your eye to quickly find each section. Comments are not needed for this.
Commenting The Close of Divs
Open any HTML or WordPress template from Themeforest and what do you see? Closed div tags that are commented. Why do you need to label which div is being closed if you properly tab? Commenting this just makes for an annoying longer file. For example, what’s really the purpose of this:
<div class="container">
<div class="header">
</div><!--header--->
</div><!---container--->
Is that really necessary? Also putting comments like this blocks the eye from naturally discerning the short closed div tags.
Still with me?
If you’re a developer who’s worth anything at all your HTML should naturally be readable. I could possible see the need for a comment or two if you’re doing something extra wacky that may not make sense. But really, who’s not going to understand what a header div is for?