Good Comments Make Good HTML.
Commenting makes HTML easier to write.
This is a spin off from another article I wrote entitle Good Comments Make Good Scripts. While the code is different, the concepts for comment are the same.
Enjoy!

Disclaimer!
This tutorial is intended to be used to show the benefites of commenting your HTML in order to write clean, easy to read code. For the purpose of this tutorial, HTML, XML, XHTML validating is not taken into consideration. While I will make an effort to point out non-standardized code, validation has never been my priority and I'll probably miss a few things. Always run your HTML through an HTML validater to check for compatability issues.

Reasons for commenting HTML:
    - Makes your code easier to trouble shoot.
    - Add a friendly reminder of things you wanted to include in your page.
    - Allows you to save information about the page without showing the general public.
    - Provides a way of giving yourself credit for creating a nice page.
    - Used as instructions for JavaScript and other client side script usage.

Getting Started!
-------------------------------------------------------------------
An HTML comment tag is quite simple, everything inside the tag is hidden from the browser and is considered to be the comment.
The HTML comment tag is:


Example with a comment:


Example of a multi-line comment:


Now lets talk about when and where to comment yout HTML.

The first place I like to add a comment in a web page is at the beginning of a table.
Example:


Another really good use for a comment in a table is when a cell spans multiple rows or columns.
Say that you have a table that is 4 rows and 4 columns and you want one really large cell in the middle.
Attachment:
 table.JPG ( 5.56K ) Number of downloads: 94

Comments will help you keep track of where cells used to be.
Example:

I use this frequently as I tend to get confused when I start spanning cells.

Occasionally I have very lengthy forms that I need to comment in order to keep track of what's what.
Example:


Comments are great for saving places for all of our content.
For example, say you have an advertiser with a banner and just below his banner you have room for one more banner, just comment that this is where you can place a new add.
Example:


This works great for code you don't know how to write yet as well.
Example:


Okay here's an example of what didn't work:


Another method I use to help keep track of the flow of HTML is indenting.
Example:


See how easy it is to check if all of your closing tags are present.
This is great if you have tables inside of tables, but will always make reading the code a lot easier.

You may have noticed that all of my tags use uppercase type. I have found that this makes picking the tags out from all of the content text much easier. When I learned HTML, tags were always like this but now validation requires lowercase type as I understand it. You will have to decide for yourself how best to write your code but I suggest that you keep in mind the possibility that someday you may need to convert your HTML to another markup language.

Tells us about your suggestions for commenting.

Happy coding,
vujsa