Learn the HTML comment syntax <!-- --> and three ways to use it: leaving internal notes for yourself, temporarily hiding code to test design changes, and embedding hidden branding info that appears in page source but not on the live page.
This video will demonstrate how to use HTML comments. The HTML comments is used and created the same way whether you are using an HTML 4.0 document or an XHTML document or an HTML5 document. Now I'm going to be demonstrating an HTML5 document, but again, it's done the same way as the others. The biggest reason I use comments is as a reminder or a note for me within the HTML code. The comments are not processed by the browser, so no one else sees the comments unless they look at the source code, which is done in the browser by usually just right-clicking on the web page and choosing View Page Source. Let me show you what I'm talking about. Let's head on over to— oh, let's try Chow Chows. Cool dogs. American Kennel Club. Now let's check out their page, and depending upon the browser you're using would depend on actually how you do this. Most of the time you just right-click and you got something that says View Page Source or Page Source or something like that. I think Internet Explorer might be a little bit different. But this is the code that makes that page look the way that it does. And an example of the opening and closing comments tag is just this right here. Everything in here is not being seen by the browser. Of course, everything above the closing head tag is not being seen by the browser either. But just as a demonstration, just bear with me here. The comment tags can be either in the head tag or in the body tag. Either case, they're not going to be seen in the browser window. But this is a demonstration of what a comment looks like. This is the opening comment tag and this is the closing comment tag. Now as an example of a reminder or a note that I would use in my HTML markup would be to let me know that in between the opening and closing comment tag, put this particular code, like an autoresponder, or this is where my sales page begins, or something like that. Let me see, like for example right here, this is commented out but it's used as a note, I would imagine, to the people that made this page that, hey, this is the beginning of where the Quantcast script goes and this is the ending of the Quantcast script. I would do the same thing for autoresponders, but that's an example of using a comment tag for a note or a reminder. Let's come on back to Google here. Now another way that I would use a comment tag is whenever I'm customizing a web page and I want to see what the page would look like if this certain element was not there, like a search box or an image. Instead of simply deleting that element, I would go ahead and comment it out first, and if I like the look without that element, then I would go ahead and delete it. And if I didn't like the look, then I wouldn't have to worry about typing it back in. I just simply remove the opening and closing comment tags. Poof, it's right back to the way it was. Now one more way that the comment tag should be used more often, especially from developers, is you can add your own branding info like name, email, and web address and have it commented out so it would not appear in the browser window. But when the source code is viewed by someone that wanted to see the code, your information would be staring them right in the face and they now know who made this site. And who knows, you might drum up some extra business that way. Let's go ahead and open up our HTML editor, and in this demo I'm using the Komodo editor. And let's throw in a comment here just to demonstrate what it looks like. Now we saw there on the American Kennel Club website what the comment tags look like. Let's go ahead and throw something in the body section here. And now let's go ahead and save this. And that's what it looks like. Now if we were to go ahead and comment that out, that's the opening bracket, the exclamation mark, which is holding the Shift key down hitting your number 1, and then a couple of dashes. And you see after you do that, with the opening tag presented first, it comments out everything else after that on the entire page. So you might want to be a little careful there. Myself, I always put the closing comment tag in first. That way nothing is changed until I put in the opening comment tag. Hopefully that made sense. There you saw how the rest of this came back to life, and this right now is commented out. You can see how it's kind of lighter in color and it's italicized. Let's go ahead and save this and I'll show you how this looks down here. And even though I did not delete this, it went ahead and the browser moved the paragraph tag right up to the very beginning as if this was not even in existence at all. And that's a few examples of how you can use the comment tag. And that's going to bring us to the end of this video on comments. Thanks for watching. You have a great day.
