HTML and CSS Comments

corybolles
by corybolles
HTML and CSS Comments

By now our HTML and CSS documents are getting pretty big. Let's talk about commenting in code and understanding how to use these comments effectively.

Comments are bits of code that we can use to write something to ourselves or other developers to help understand what a section of code does. In HTML, we might separate sections of our <head> or <body> to explain what they are on the page. In CSS, we might separate groups of rules that style specific elements. They are not run by the renderer and are ignored by the browser.

Commenting in HTML

Comments in HTML almost look like an element. All HTML comments begin with <!-- and end with -->

<!-- This is a comment -->
<div>
  <p>Paragraph text.</p>
</div>

We might use HTML comments to separate out elements in the head of a document, like so:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Document Title</title>

    <!-- SEO Information -->
    <meta name="description" content="">
    <link rel="canonical" content="">

    <!-- Stylesheets -->
    <link rel="stylesheet" type="text/css" href="">
    <link rel="stylesheet" type="text/css" href="">
    <link rel="stylesheet" type="text/css" href="">

    <!-- Scripts -->
    <script></script>
    <script src=""></script>
  </head>
</html>

As you can see, these help make our markup more readable for us!

Comments in CSS

CSS Comments  stat with /* and end with */

Comments done in CSS with this method can span multiple lines, and generally serve one of two purposes:

  1. Separate blocks of rules into different sections
  2. Temporarily disable a property for debugging.

In the former, some people like to create designs for their css headings, like so:

/* ================================
*            Header CSS           *
================================ */
header {

}

header #logo {

}

header #menu {

}

Doing this is not required of course, but many developers use it to help them quickly find sections of code in large documents.

We also regularly use CSS Comments to temporarily disable rules so that we can determine what is causing an issue:

#logo {
  height: 40px;
  /* width: 120px; */
  padding: 20px;
}

In the above code example, the width property would not be applied, as it is inside a comment.

We also have the ability to create a "single line comment" in CSS, however the rules surrounding these are strict, so we would advise against using them unless absolutely necessary. These are created by adding two forward slashes to the beginning of a line, and their exact use is to comment out the next construction. This means that if you have only text next to a single line comment, the following block will also be commented out.

/* This is Okay to do: */
div.class {
  // height: 30px;
}

/* Doing this would comment out the div#id block
// This is a comment
div#id {
  width: 30px;
}

 

 

Thanks for reading! I hope you've learned something about CSS and HTML comments today!

Previous Lesson Next Lesson

Leave a Reply

Your email address will not be published. Required fields are marked *

crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram