HTML Comments: Web Development Tutorial Series Part 9

html comments

HTML Comments

I intended for this lesson to be short and sweet, but because html comments are so versatile it quickly turned into a full lesson. Although it may seem unimportant, the html comment is a vital tool for web developers, designers, and programmers. They are ignored by the browser and will not display on the web page. Comments are used for many things besides adding little notes to your code. See the images below for an example of an html comment.

index.html Example 1: Single Line Comment

single line comment html

Displayed Page Example 1: Single Line Comment

html comment single line

Example 1 shows the most basic type of comment, and that is the single line comment. The html comment is opened with <!-- followed by a space, then the comment text, and closed with a space, -->. Notice how the opening tag has an exclamation mark (!), but the closing tag does not. This is what tells the browser where the beginning and ending of the comment is. The space before and after the comment text is also very important. When more strict versions of html read the code, they can get confused, so the spacing is necessary. You should also know that the space between our heading and paragraph elements are not coming from the comment. This is the default margin space added by the browser. A comment will have no effect on the displayed page. A single line comment is typically used for small side notes or reminders. They can also be used to separate sections of code. We’ll use an example of this later. Example 2 is below.

index.html Example 2: Multi-Line Comment

multi line comment

Displayed Page Example 2: Multi-Line Comment

html comments

In example 2, it obvious that multi-line comments use the exact same tags as the single line comment. The important thing to know here is that you don’t have to add the comment tags to every line that you use. You simply open the comment on one line and close it a few lines later. It is considered good coding to have the opening and closing comment tags on their own line when adding a multi-line comment. Notice how when you enter the opening comment tag, the rest of the html document turns green until you add the closing tag. This is the text editor recognizing an html comment and adds green syntax highlighting to it. Multi-line comments can be used to “comment out” parts of code for debugging purposes. See the example below.

index.html Example 3: Mult-Line Comments For Debugging

html comments for debugging

index.html Example 3: Multi-Line Comments For Debugging

multi-line comments for debugging

We have added a few more html elements for this example. The h1 and P ELEMENTS in the “Main Content: Bottom Section” are commented out. We do this by adding an opening comment tag before the H1 ELEMENT and a closing tag after the p element. This is helpful for problem code because you can make the browser ignore specific elements, and then add them back in one at a time until you find the error. All that you would have to do is move the comment tags around to add elements back in, and rerun the code until you can pinpoint the problem. We’ll use html comments one more way in this lesson. See the image below.

index.html Example 4: Organizing Your Code

html comments to organize code

There is no Displayed Page image in the final example because the comments added do not affect the Displayed Page from example 3. And although this is kind of a messy example of how comments can be used to organize your html code, you should be able to get the basic idea of how they can help. Especially in a document that is hundreds or even thousands of lines long. Many times a single web page is created through web developers, web designers, programmers, webmasters, and more. Leaving good comments can really help tremendously when multiple people are working on the same project. Things like the date and time of updates, reminders, and altered code are just a few examples of the usefulness of comments in html. There is also another type of comment called the conditional comment. This type of comment is interpreted by Microsoft Internet Explorer Versions 5 through 9 and is used to show or hide code from Internet Explorer. We won’t get into this type of comment right now as it would most likely confuse you. But just to give you a visual of what one looks like, see the example code below.


<!--[if IE 7]>
.... some HTML here ....
<![endif]-->

We are going to finish on that note. You should have a good understanding of html comments and how to utilize them in your code. Comments are an important part of WEB DEVELOPMENT and COMPUTER PROGRAMMING. To see how comments are written and used in CSS, CLICK HERE. As always, thanks for reading, and I’ll see you next time.

Source Code


<!doctype html>
<html lang="en-US">
<head>
<title>Comments</title>
</head>
<body>

<!-- =================================INTRODUCTION====================================== -->
<h1>HTML Comments</h1>
<!-- This is a single line comment -->
<p>Comments are an important part of web development and computer programming.
When adding a comment, make sure to add a space after the - in the opening
tag, and before the - in the closing tag. This is considered good coding practice.</p>

<!--
A multi-line comment
should be added like
this.
-->

<!-- =================================TOP CONTENT======================================= -->
<h1>Main Content: Top Section</h1>
<p>Comments are an important part of web development and computer programming.
When adding a comment, make sure to add a space after the - in the opening
tag, and before the - in the closing tag. This is considered good coding practice.</p>

<!-- =================================BOTTOM CONTENT==================================== -->
<!--
<h1>Main Content: Bottom Section</h1>
<p>Comments are an important part of web development and computer programming.
When adding a comment, make sure to add a space after the - in the opening
tag, and before the - in the closing tag. This is considered good coding practice.</p>
-->

<!-- ===============================SUB CONTENT: SIDEBAR================================ -->
<h3>Sub-Content: Sidebar</h3>
<p>Comments are an important part of web development and computer programming.
When adding a comment, make sure to add a space after the - in the opening
tag, and before the - in the closing tag. This is considered good coding practice.</p>

</body>
</html>

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: