Single line HTML comments
To comment out a single line of HTML, place the text or code you are commenting between comment tags: <!-- -->.
Here’s how this looks in the code:
<!-- The text in here will be invisible on the website -->
Here's some regular HTML content!
When you load the website, the HTML comment won’t show up on the page itself:
Website showing text content but not the HTML comment
But if you inspect the website code in your browser, you will still be able to see the HTML comment text:
Code inspector in the browser showing the comment
Multiline HTML comments
To create a multiline or block HTML comment, you still use the comment (<!-- -->) tags, but you can have more than one line in your comment. As long as you contain the comment text between the tags, it will be included in the comment.
Here’s an example of a multiline HTML comment:
<!-- The text in here will be invisible on the website! Here's another line of the comment. You can have as many lines as you want! 😁 -->
And here's that regular HTML content again.
Here’s how it will look on the website:
Website text without HTML comment showing
And you can see the whole HTML comment in the inspector:
Browser inspector showing the multiline HTML comment
How to write comments in CSS
Single line CSS comments
To make a single line CSS comment, put the comment text or code between /* */tags.
Here’s an example:
/* This text will be ignored by the browser! */
Multiline CSS comments
To write multiline or block CSS comments, you can use the same /* */ tags, and put the comment content on multiple lines.
Here’s what a multiline CSS comment would look like:
/* This text will be ignored by the browser! And this will also be included in the comment! One last line of comment for good measure 😁 */
Here’s an example of that:
// This text is a comment and will be ignored!
You can also add a single line comment on the same line as some code. As long as the comment is the last content on that line, it will work.
Here’s what that would look like:
console.log('Test code here!'); // This is a console log message
Here’s what that will look like:
/* Function: doSomeAwesomeThing() This does something awesome, but I don't know what! */
console.log('Run awesome function');
It’s also helpful when you’re working on a project in development and need to temporarily comment out some code while testing. But just make sure to not leave comments in production code!