Comments in HTML, CSS, and JS

Comments are unexecuted lines of code within a program or within a file of code. Unexecuted means they’re ignored by the computer when running the code, or rendering a webpage. Comments can be used to add information to code for other programmers, or other people who may look at code and not understand exactly what is happening or what the code is achieving.

Webpages can be comprised of different programming and scripting languages, such as HTML, JavaScript, or CSS. Programming syntax differs across languages, which means how you write comments can be different per language or scripting. This can result in different comment formats throughout webpages.

Within html comments are contains between ”. Anything written between these two symbols are comments and will be ignored by the computer, and not rendered on the webpage. The below example shows the use of a simple comment within html. The text within the comment will not be shown on the webpage, and the user will not see it.

        This is a comment 

CSS offers two types of comments, single line and multi line comments. Single line comments make one line of code unexecuted, and are prefixed with two slashes. Multi line comments are similar to the html comments above, they can comment out multiple lines of code and are started and ended with two symbols. Multi line comments in CSS start with ‘/‘ and end with ‘/’. The code below shows using both these types of comments within some css code.

    background-color: red;
    // this is a single line comment
    color: black;
        this is a multi-line comment

JavaScript offers the same comment styles as CSS. Within JavaScript you can have multi line or single line comments. JavaScript uses the same comment delimiters and prefixes as CSS. The below example shows using comments within JavaScript. You can see how the comment prefixes and comment style are the same as CSS comments. Even though line 5 contains valid JavaScript code it still will not be executed, as it is wrapped within a mutli line comment.

var a = 2;
// this is a single line comment
var b = a + 3;
var c = a + b;

Comments are entirely optional. They can add more details and explanation to the code you write. There are arguments that comments should not be used within code, as code should be readable and understandable without comments. However, consistency is king. If you use comments or not it doesn’t matter, as long as your code is consistent.

Leave a Reply