HTML & CSS comments
Comments are simply lines of code that are ignored by browsers. They are useful in that they can let you place notes within the HTML or CSS and are most commonly used for descriptive purposes and reminders, such as where an element closes, separating different sections to make it easier to read through or what a certain bit of code does. Comments can also be used to block out part of the code, which could aid in bug fixing as it mean that code can be removed from being read without having to actually delete it.
HTML Commenting
HTML comments have an opening and a closing tag, and anything that is between the two tags is included within the comment, meaning that it can span as many lines as it needs to.
- <!– Opening Comment
- – > Closing Comment
example of use:
<!-- start of header --> <div id="header"> <img src="logo.gif" alt="an example" class="logo" /> <!-- start of nav --> <ul id="nav"> <li><a href="#" title="nav link - a good link">nav link</a></li> <li><a href="#" title="nav link - a good link">nav link</a></li> <li><a href="#" title="nav link - a good link">nav link</a></li> <li><a href="#" title="nav link - a good link">nav link</a></li> </ul> <!-- close of nav --> </div><!-- close of header -->
CSS
There isn’t a difference between how a HTML comment works to how a CSS comment does, really there is only one and that is the syntax that is used.
- /* Opening Comment
- */ Closing Comment
example of use:
/* header info */
#header { width:960px; height:90px; padding:10px 0px;}
#header .logo { width:300px; float:left; }
/* nav info */
ul#nav { width:200px; float:right;}
ul#nav li { padding:5px; background-color:#666666;}
ul#nav li a { color:#FF9900; text-decoration:none; font-weight:bold;}
A few useful ways to use commenting:
If you are developing a site a good way to keep track of colour values is to add them in a comment at the top of your css, this way if you want to match the colour of some text with a colour used for a border, instead of looking through all the css for the value, you have a reference at the top of the page.
If a group of you are working on a project together but are scattered in different locations it can sometimes be hard to manage what everyone is doing, which could result in the same document getting worked on at the same time by two different people, meaning work will get lost. So an easy way to make sure this doesn’t happen is to add a comment to the top of the page you are working on so that other know not to edit it. Something along the lines of , then once you have finished simply remove the comment and others will know it is safe for them to edit the file.
Again if working in a group commenting is a great way to help with bug fixing, adding comments to the top of a document will let others know what has been done. It can also be good for saying if there is an issue with an element, for example it breaks in a certain browser, so others working will be able to quickly target where the problem is and hopefully come up with a solution to fix it.
twitter
forrst
google+
Rss
3
Comments
Great post, one standard I try and get into the brains of the devs at work is commenting with the name of the element, because one should always semantically name elements anyway. For example:
Nice tip Luke
I haven’t thought of commenting like that, it makes it a lot simpler just commenting on the close of the elements and makes a lot of sense to do it that way too.
(Plus you’re right, about giving meaningful names, something I am sometimes guilty of not doing, I have a bad habit of calling things left and right…which is confusing when left becomes right and right becomes left )
Commenting and naming ids and classes meaningfully will help other coders should they ever need to edit what you have done.
Its also a great aid when learning and playing with bits of code, as notation will help in understanding what has been done and how things work.