How to comment in HTML, CSS and JavaScript

by

Programming languages (or any markdown languages) offer an option of leaving notes for yourself or others. The comment feature simplifies the production of more readable code. Code or other text that is commented out is ignored by the browser.

Comments in HTML, CSS, JavaScript

Write comments in HTML

  • The <!– –> is a HTML comment tag.
  • To comment out in HTML, insert information between <!– and –> tags.
    • The browser won’t show these comments/ notes.

Single-line HTML comments

To add a single line comment, write the information between <!– –>  tags.

Example

<!-- Comment line-->
<p>single-line comment</p>

Multi-line HTML comments

In a few cases you need to add many information inside the comment tags which will require more lines to deal with, there you’ll need multi-line comments.

Example

<!--
multi
comment line
-->
<p>multi-line comment</p>

Write comments in CSS

  • The /* */ is a comment tag in CSS.

Single-line CSS comments

To add a single line CSS comment put the information between the /* and */ tag.

Example:

h1{
font-size: 2rem /* 1rem =5px */
}

Multi-line CSS comments

To write a multi-line CSS comment or to add more information, write those lines in between the /* and */ tags.

Example

/* 
This font
size will
be used 
*/

h1{ 
font-size: 2rem 
}

Write comments in JavaScript

  • Comments can also be used to prevent some code lines from being executed. This is useful when testing.

Comment out

In javascript comment out means block a single line of code as it will not be executed by the app/browser. This can help you debugging the code without erasing part of your codes.

Example

//document.getElementById('root')

Single-line comments

It is used to write some very specific information or block a line of code for debugging purposes.

Example

//This is a single-line comment
document.getElementById('root')

Multi-line comments

The multi-line comment has the same purpose as the single-line comment. It is used to give much more detailed information about the code. To use a multi-line comment you have to write the information in between the /* and */ tag.

Example

/*
function fun
returns a string value
*/

const fun = () =>{
    return 'string'
}

Conclusion

Comments are really helpful during debugging the code in a testing environment as they will disable some lines of code without actually removing them. But make sure to remove every possible comment line during deployment in the production field.