HTML - Comments
What are Comments?
A comment is a particular piece of code that isn't displayed by any web browser. It is often an excellent practice to place comments in your HTML document code, especially when handling complex HTML documents, mostly to indicate the various sections of an HTML document, and also any other information about the code for anyone looking at the code. Comments also help yourself, and other people understand your code quickly and increase your code readability.
HTML comments are kept in between the <!-- ... --> tags. Therefore, any piece of code or note placed within the <!-- ... --> tags will be automatically treated as a comment and will be completely ignored and not displayed by the browser.
Example
<!DOCTYPE html> <html> <head> <!-- Document Header Starts --> <title>This is document title</title> </head> <!-- Document Header Ends --> <body> <p>Document content goes here.....</p> </body> </html>
The above code will be displayed as:
If you have noticed in the code we placed the certain text in between the comment tag and when you check the output, it doesn't get displayed in the document. The browser did not display it because it read it as a comment so it ignored it when it was displaying the rest of the content.
Types and styles of HTML Comments
There are various types and styles of HTML comments available; they include:
1. Multiline Comments
2. Conditional Comments
3. Using Comment tag
4. Commenting Script Code
5. Commenting Style Sheets
Valid and Invalid Comments
Comments do not nest, this literally means that a comment cannot be placed inside another comment. Secondly the double-dash "--" don't have to appear inside a comment except it is a part of the closing --> tag. You have to also make sure that no spaces are in the start of comment string.
Example
<!DOCTYPE html> <html> <head> <title>Valid Comment Example</title> </head> <body> <!-- This is valid comment --> <p>Document content goes here.....</p> </body> </html
The above code will be displayed as
Although, the following line isn't a valid comment and therefore it will be displayed by the browser. Due to the fact that there is no space between the exclamation mark and the left angle bracket.
<html> <head> <title>Invalid Comment Example</title> </head> <body> < !-- This is not a valid comment --> <p>Document content goes here.....</p> </body> </html>
The above code will be displayed as:
Multiline Comments
Until now we have talked about single line comment, but HTML supports writing multi-line comments too.
You can actually comment multiple lines by using the special start tag <!-- and end tag --> kept before the first line and end of the last line, An example is shown below.
Example
<!DOCTYPE html> <html> <head> <title>Multiline Comments</title> </head> <body> <!-- This is a multiline comment and it can span through as many as lines you like. --> <p>Document content goes here.....</p> </body> </html>
The above code will be displayed as:
Jobs Vacancy
The Jobs portal provides you with real time Jobs Opening and Vacancy Updates curated globally. Start applying for your dream job with ease in any location you choose.
Learn More >>
CV Builder
The CV Builder provides you with comprehensive guide and proven steps to take in writing a professional CV including top CV templates to get you started quickly.
Learn More >>
