Skip to main content

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 <!-- --> tag 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 /* */ tag 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;
}

How to Comment in JavaScript​

There are two tags for commenting in JavaScript.

  1. //
  2. /* */

We use the /* */ tag 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

Overview​

This article discussed how to comment in HTML, CSS, and JavaScript. We also used examples to see how it works.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Tweet this article