Comments In HTML And CSS: Web Design Series CSS: Part 7

Comments In HTML

Comments in HTML and CSS
Get the source code for this lesson at the end of the post!

Today, I thought it was the appropriate time to start talking about comments in HTML and CSS. While this may sound simple and unimportant, it’s really the exact opposite. When you get deep into code for your website, which can be thousands of lines; comments will help you organize your code and allow you to leave reminders for things you need to do later on. They also help other people viewing your code understand why and how you did things.

This is especially important if you are collaborating with one or more other developers, programmers, or designers. Often times for a professional website, there will be a few people working on it. There can be a front end developer, back end, designer, programmer, and a webmaster that monitors the entire website for performance and bugs. Each with their own job; but still working with the same elements as everyone else. You can leave messages for the other coders, or simply leave the time and date for any updates you may have made. So pinpointing problem code would become a lot easier. Another technique that web designers use comments for is storing important site-wide information. This could be things like a list of hex values for the color theme being used throughout the website, font-styles, and so on. They would probably put this information at the top of their CSS style sheet inside of a comment block.

Any comments that you add to your code is ignored by the browser. They are there for the coders eyes only and will not display on the web page. In the examples below, I included a few ways of adding both HTML and CSS comments.

comments in html and css code

comments in html/css display

I’ve highlighted the beginning and ending of all the comments in the example. Also, be aware that this example is an HTML document with a CSS internal style sheet embedded in the HTML head element. What does that mean? Well, since we have this document saved as a “.html”; it is using HTML syntax highlighting. And although the CSS comments are valid code, they will not be highlighted in a different color. For example, in the image above, we have two HTML comments. The text editor, which is Notepad++ recognizes that they are HTML comments. So it uses HTML syntax highlighting to change the color of the HTML comment green. The CSS comment is not colored or highlighted. This is because we are using an internal style sheet that is embedded inside of an HTML document. If we were using an external style sheet; say, one that we named “styles.css”, and linked it to our HTML document; then our “styles.css” would have CSS syntax highlighting that the text editor would recognize are make green. You might get different results from one text editor to another. Especially, a professional text editor, but this is how it works by default in Notepad++, which is the editor that I’m using in this series. And I’m not saying that Notepad++ isn’t a great text editor; it’s the one that I use in my work and I love it.

We’ll start with the three CSS comments in the style sheet. CSS comments start with /*, have your comment inside, and end with */. This is also known as a “block comment” because it can be put on one line or multiple lines. Everything in between the /* and */ is recognized as a comment, will be ignored by the browser, and will not display on your web page. In our first CSS comment block, right after the opening <style> tag, we have an example of how a web designer might store some hex values that he is using in his design. This comment is on multiple lines, but could have been put completely on one like this:
/*HEX COLORS FOR THEME #FF34DE = MAIN HEADINGS #38HE44 = PARAGRAPH TEXT*/.

The second CSS comment block is an example of some update information with the date and a reminder to add more list items. And finally, we have a single line CSS comment right before the closing </style> tag. The extra = symbols are there just to create a line across the page. This is common for coders to do because it’s easily identified as a separation point in the code.

Moving on to our HTML comments, we have two simple examples of how a web designer could make his page easy to navigate with some separation code. An HTML comment consists of <!–The comment–> and I’ve added multiple = symbols to create a line across the page. You can also see that the browser recognized this as an HTML comment in an HTML document because it turned the entire comment green. This system of separating the code into sections is used very often in web development. Therefore, every coding and programming language has its own type of comment code. In programming, adding comments is very similar from one language to the next.

Comment tags are also used for debugging purposes. You can “comment out” bits and pieces of your code to find problems. By telling the browser to ignore certain sections of code, you can narrow down where an issue might be coming from, so that you have way less code to check line by line. In the images below, I have two more examples of how comment tags can be used to make the browser ignore the code in between them.

Comment Out Code

Comment Out Display

Now, these are very basic and useless samples, but it will give you the idea. The first bit of code that we comment out is font-weight: bold; in our ol rule. We used the CSS comment tags to do this because it’s CSS code that we are telling the browser to ignore. We could have blocked out the entire ol rule, but I wanted to show you that it doesn’t matter how much or how little you comment out; it still works. Whatever is inside of the comment tags will be ignored. When our page is run now, the ol list items are no longer bold. And then finally, we use the HTML comment tags to make the browser completely ignore the h4 element. It is no longer displayed on the page.

The last thing that I want to discuss is something that many web developers get wrong. And that is the single line comment in CSS. In many programming languages, the comment system is very similar to CSS. The multi-line or block comment is the same; but for a single line comment, “//” is used before the code that the programmer wants to skip over or ignore. It will only skip one line of code. This actually works a lot of the time in CSS as well. But not as you might expect. What the two forward slashes are doing is skipping the next CSS construct, which is the next declaration or block. It isn’t commenting out a single line like some programming languages do. While this does give the web developer or designer the result that they are looking for most of the time, it shouldn’t be done in CSS. You don’t know how other browsers or new browsers in the future are going to read the code. A common issue that happens to people that use the // is that in some browsers everything after the two forward slashes is commented out all the way to the end of their style sheet. And if the designer didn’t check his website in every single browser out there, it can be completely messed up for many visitors running on one of those browsers that doesn’t accept the code. There is no CSS single line comment code. The only right way to make a comment or comment something out in CSS is by using the /**/ symbols. They can be used for single or multiple lines and are the correct way to comment in CSS. I recommend only using the correct comment code so you don’t run into any problems. And in my opinion, it doesn’t take any extra effort. It’s just a few more keystrokes.

We covered a lot in this post. I hope you fully understand both HTML and CSS comments now. And down the road when you see someone commenting the wrong way in CSS, you will be able to tell them why they shouldn’t be doing it. Thanks for reading, and I’ll see you in the next post.

Source Code From Example 1


<!DOCTYPE html>
<html>
<head>
<title>Bold And Italic Examples</title>
<style>

/*HEX COLOR CODE FOR THEME
#FF34DE - MAIN HEADINGS
#38HE44 - PARAGRAPH TEXT*/

h4{
font-style: oblique;
}

/*Added ol on
05/24/16. Need to
add more li's.*/
ol{
font-weight: bold;
}
/*==============================================END OF CSS STYLE SHEET======================================================*/
</style>
</head>

<body>
<h4>This heading is italicized with CSS code</h4>
<!----------------------------------------BEGINNING OF MAIN CONTENT SECTION-------------------------------------------------->
<p>In this paragraph, we have some examples of <strong>bold text using HTML tags</strong> and <em>emphasized text</em> that
is surrounded with HTML emphasis tags. You could also use the <i>&lt;i&gt; tags to make the text italic.</i> It does the same
job. Just like <b>the &lt;b&gt; tags for bold.</b> The choice is up to you.</p>
<!-----------------------------------------BEGINNING OF SUB CONTENT SECTION-------------------------------------------------->
<ol>
<li>Popcorn</li>
<li>Soda</li>
<li>Chocolate</li>
<li>Chips</li>
</ol>
</body>
</html>

Source Code From Example 2


<!DOCTYPE html>
<html>
<head>
<title>Bold And Italic Examples</title>
<style>
h4{
/*font-style: oblique;*/
}

ol{
font-weight: bold;
}
</style>
</head>

<body>
<!---<h4>This heading is italicized with CSS code</h4>--->

<p>In this paragraph, we have some examples of <strong>bold text using HTML tags</strong> and <em>emphasized text</em> that
is surrounded with HTML emphasis tags. You could also use the <i>&lt;i&gt; tags to make the text italic.</i> It does the same
job. Just like <b>the &lt;b&gt; tags for bold.</b> The choice is up to you.</p>

<ol>
<li>Popcorn</li>
<li>Soda</li>
<li>Chocolate</li>
<li>Chips</li>
</ol>
</body>
</html>

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: