How to Comment Code in HTML, CSS, and JavaScript

A comment tells browsers to ignore a piece of code.

Developers typically use comments for notes, debugging, and code deactivation.

Let’s see how commenting works in HTML, CSS, and JavaScript.

How to Comment in HTML

We use a <!-- --> pattern to create an HTML comment. Here is the syntax:

<!-- Your text -->

Here’s an example:

<!-- <p>This paragraph is a comment</p> -->

<p>This is not a comment</p>

You can also comment out multiple lines like so:

<!--
<p>This paragraph is a comment</p>
<p>This is another paragraph comment</p>
<p>And another paragraph comment</p>
-->

<p>This is not a comment</p>
<p>This is also not a comment</p>

How to Comment in CSS

We use a /* */ pattern to create a CSS comment. Here is the syntax:

/* Your text */

Here’s an example:

/* This is a one-line CSS comment */

/*
This is a multi-line
CSS comment because
it spans multiple lines
*/

/* We commented the paragraph ruleset below */
/* p {
   color: red;
   font-size: 1.2rem;
  } */

/* Below is an uncommented ruleset */
div {
  background-color: green;
  border-radius: 5px;
}

CodeSweetly ads

How to Comment in JavaScript

There are two patterns for commenting in JavaScript.

1. // (Two slashes)
2. /* */ (Two slashes and asterisks)

We use the /* */ pattern to comment out one or multi-lines. But // works for only single line commenting.

Here’s an example:

// This is a one-line JavaScript comment

/* This is another one-line JavaScript comment */

/*
This is a multi-line
JavaScript comment
because it spans
multiple lines
*/

/* We commented the function statement below */
/*
function sayHello() {
  console.log('Hello there!!!')
}
*/

/* Below is an uncommented JavaScript statement */
function sayHi() {
  console.log("Hi there!!!");
}

How to Use the Keyboard to Comment in HTML, CSS, and JavaScript

The keyboard shortcut to add comments in HTML, CSS, and JavaScript is:

• Ctrl + / for Windows and Linux users
• Cmd + / for Mac users