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