Comments

Comments are a great asset to new developers and a great way to place little notes to yourself reminding yourself what pieces of code are doing what. Comments are also great ways to troubleshoot bugs and code errors, as they give you the ability to comment out lines of code one at a time to search for the exact line causing problems.

As a sprouting young web developer, HTML code comments are your friends! A comment is a way to control which lines of code are to be ignored by the web browser and which lines of code to incorporate into your web page. There are three main reasons why you may want your code to be commented out or ignored.

• Comment out elements temporarily rather than removing them, especially if they've been left unfinished.
• Write notes or reminders to yourself inside your actual HTML documents.
• Create notes for other scripting languages like JavaScript which requires them.

Comment Tags:

<!-- Opening Comment Tag
-- > Closing Comment Tag

As you can see, comments are also comprised of an opening and closing tag, (<!-- -->). Like other HTML elements, these tags can span across multiple lines of code, allowing you to comment out large blocks of HTML code. Any HTML elements that are encapsulated inside of the comment tags will be ignored by the web browser. This makes comment tags quite useful for debugging, as they allow the developer to temporarily comment out pieces of an HTML document without having to immediately delete the code from the HTML document.

HTML Comment Code:

<!--Note to self: This is my banner image! Don't forget -->
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju3UykUjBXYIMGEdZ0jwVBiJLE0JA5RfZIpenqa_qBmjE2j8oTx23SqpymInA5OtpD9mJkwo90RdJtKpNHEMTrS8SGkIstMbdvCXZrxD8a2RJnnUC05gqbPJLJy9KooAZSdnIxeKUHxT0/s1600/cb.gif" height="100" width="400" />

Comment to self:

Placing notes and reminders to yourself is a great way to remember your thoughts and to keep track of elements embedded inside the web page. Also, your code may exist for many, many years, and these notes to yourself are a great way to remember what was going on, since you may not remember five or more years down the road.

All combinations of text placed within the comment tags will be ignored by the web browser. This includes any HTML tags, scripting language(s), etc.

html - <!-- commenting existing code -->

As a web designer, you may sometimes have different websites in progress at once, and it might be easy to leave some HTML elements unfinished. In this case, you may comment out an element until it is 100% ready for the site. Below, we have commented out an input form element, since we are not quite ready to receive input from our users.

HTML Code:

<!-- <input type="text" size="12" /> -- Input Field -->

Now when we are ready to show that element, we can simply remove the comment tags, and our browser will readily display the element!

HTML Code:

<input type="text" size="12" />

Input Field:

Comment out elements and bits of code that you may want to recall and use at a later date. Nothing is more frustrating than deleting bits of code only to turn around moments later and realize that you now need to recode them.