This might seem obvious to anyone who regularly writes HTML, but it’s really helpful if you comment your source code to explain which elements you’re closing. If you’re debugging someone else’s source code (or your own code you wrote some time ago), there’s nothing worse than coming across this:
<p>What follows will really make you scratch your head:</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>By commenting which element you’re closing as you write it, it’ll be far easier to work out later on exactly what’s being closed off – and therefore easier to work out which is the offending element for any problem you’ve got. By closing and commenting everything as you write it, there’s also less chance you’ll miss closing something off, and the world of pain that brings with it.
So, commented, the above would look like this:
<p>What follows may make you scratch your head less:</p>
</div> <!-- end: div.article -->
</div> <!-- end: div#content -->
</div> <!-- end: div#main -->
</div> <!-- end: div#wrapper2 -->
</div> <!-- end: div#wrapper1 -->
</body>
</html>There you have it. Next time you’re in the zone and dropping divs in like there’s no tomorrow, spare a second to comment them as you close them off. Quick and simple, and you could save some poor dude a lot of hassle when he/she comes to look at your code in a few years.
Of course, the tag soup above is to illustrate a point. I’d never write such bloated HTML. *Cough*.
Nice post Andy – Brilliantly simple solution to the nightmare of deleting a tag and wondering how to stop the layout has shot all over the screen!
Really must get into the habit of doing this. Great post.
Tom, if it was a choice between being ace at commenting HTML (BMX stuff) or being able to summon the javascript & AJAX angels, I know which I’d rather choose…