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 syntaxYou 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. |
Build HTML CSS projects
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.
