Today we’re coming to you with a simple (yet super) post on how to comment in HTML, CSS, and JavaScript.
Using comments in your code is a great way to organize, notate, and document steps or processes.
Coding comments help you read the code as much as they help other developers who are checking out your work.
This isn’t pretty speech – coding comments really do help.
Recently sister Klea updated a variable in one of her running programs due to a change in the data structure.
I can’t begin to explain her relief in finding a brief line comment she’d left showing just what the data pulled prior to the data changes.
Thanks to that little comment, she spent less than 5 minutes revising! In the blink of an eye, the program was up and running like magma 🔥
She hasn’t exhibited such excitement since her 55lbs dumbbells (which she can’t lift 🙄) got delivered.
Lesson: Leave comments when you code to make your life easier.
Comment in HTML
In HTML you have a single commenting syntax that applies to both single-line and multi-line comments.
You can also use the HTML commenting syntax when wanting to hide something inline.
Syntax: <!-- YOUR COMMENTED/HIDDEN CODE -->
Notice that the structure of the opening tag is different from that of the closing tag. It’s a minor, one-character difference, but a significant one!
The opening tag contains an exclamation mark ( ! ) between the less-than sign and the two dashes. You omit this exclamation mark on the closing tag.
Single line: <!-- Hello there mate! -->
Multi-line:
<!--
<p>Hello there mate!</p>
<strong>This is THT</strong>
-->Inline: <p>Hello there <!-- you stranger --> mate!</p>
Tip
You don’t need trailing spaces! So
<!--SOMETHING--> will work just as well as<!-- SOMETHING -->.
Adding comments in CSS
Much like in HTML, CSS uses a single commenting syntax for all types of comments – single-line, multi-line, or inline.
The CSS commenting syntax, however, is different from that of HTML.
And, in my esteemed opinion, easier to remember (though DM begs to differ).
See, for CSS we use a forward slash ( / ) and an asterisk ( * ) to open a comment and do the reverse to close it (hence DM’s complaints).
Syntax: /* YOUR COMMENTED OUT CSS */
It can be a little confusing at first, but just remember the asterisks always go inside the slashes.
Single-line:
#example {
background: pink;
/* color: purple; */
font-family: sans-serif;
}Multi-line:
/* #example {
background: pink;
color: purple;
font-family: sans-serif;
} */Inline:
#example {
background: pink;
color: purple; /* Maybe remove this color */
font-family: sans-serif;
}Commenting in JavaScript
Now, if you master the CSS commenting syntax you’re one step ahead because it’s recycled in JavaScript for multi-line comments.
Unlike CSS and HTML, JavaScript gives you two options when it comes to commenting.
The JavaScript commenting syntax for single-line, and inline, items is composed of two forward slashes ( // ).
Single-line & Inline: // I'm a single-line comment.
You can fake multi-lines by starting every line that needs commenting with two slashes, however, it’s not considered best practice. Plus, it’s tedious 😒
Example:
// You probably should
// avoid doing this
// especially when it's
// a long AF comment.Instead, for multi-line comments, you can follow the CSS syntax of wrapping your code in a block starting with a forward slash star ( /* ) and ending with a star forward slash ( */ ).
Multi-line:
/*
This is a multi-line comment. It starts
On the line above and continues until
This line right here.
*/Can you wrap a single-line JavaScript comment in the multi-line commenting syntax?
Basically, can you do this: /* I'm a single-line JS comment. Or am I? */
And that’s a good question!
I’d say it’s not a matter of whether you can do it (because you sure can and nothing seems to break), but of whether you should do it.
Per convention, the two forms of JavaScript commenting are differentiated and clean code should adhere to general practice.
After all, when in Rome you do like the Romans, no?
Hope this helped some of you, we’ll see ya at the next one 🤙