How to write HTML CSS comment

In this post, I will show you how to write comments in your HTML document & CSS file. You’ll also learn keyboard shortcuts for them. This will be a fairly very quick & short post.

Let’s get started.

How to write HTML comments?

No matter if you write a single line or many lines of comment, the syntax is the same in HTML. This statement is also true about CSS comments.

HTML comment

<!-- Write HTML comment here in HTML file -->

The above is an example of an HTML comment. You can also break the comment into multiple lines. See the example below.

Multiline HTML comment

<!-- You can break 
the comment 
into multiple lines. -->

HTML comment syntax

Whatever you write in between <!-- and --> will be treated as a comment.

Web browsers will understand & ignore it. And it has no impact on your HTML documents.

How to write CSS comments?

/* Write your comment here in CSS file */

No matter if you write a single line or many lines of comment, the syntax is the same in CSS. Whatever you write in between the two slashes & two asterisks, the web browsers will ignore it.

Above is an example of a CSS comment.

Wrong syntax in CSS comments

//this is an incorrect syntax

You may see this double slashes (//) syntax in some places but it’s not a valid comment in CSS. This type of syntax works on SASS and SCSS but it does not work in CSS.

Examples of valid comments in CSS

/*======== Whatever you style it, there is no problem ========*/

/**
* Make notes for yourself
* There is no problem with it.
* ******/

/*
John and marry worked for footer.
But John only has access to our
GitHub repo.
*/

The keyboard shortcut for HTML CSS comment

On Mac, it’s (Cmd + /)

On Windows, it’s (Ctrl + /)

That means if you’re on a CSS file and if you hit these two buttons Ctrl + / (macOS: Cmd + /), the line(s) will be commented out.

Learn & practice CSS with real-world examples
Learn basic CSS from the ground up.
Build real projects in HTML CSS.
Make your hands dirty

Build HTML CSS projects

About us templatePreview
Team pagePreview
Testimonial pagePreview
Testimonial sliderPreview
Contact pagePreview
Multipage websitePreview
Portfolio websitePreview
Animated portfolioPreview
Computer science portfolioPreview
Navigation bar (without JS)N/A
Create a hamburger menuPreview
Create a navigation menu in two waysN/A
Footer templatesPreview
Hero bannerPreview
Background sliderPreview
Card templates (HTML, CSS)Preview
Animated cardsPreview
Three-column layout templatePreview
Two column layoutPreview
Breadcrumb navigationN/A
Progress bar templatePreview
Thank you pagePreview
Resume templatePreview
Coming soon templatePreview
Landing page templatePreview
Roofing website templatePreview

Conclusion

This is one of the short posts on this blog. Now you know how to write comments in HTML & CSS. And you also learned keyboard shortcuts.

These comments are used for self-notes and ignored by web browsers. Comments also help other developers & collaborate with you.