We use HTML Comment for marking or for ignoring while rendering of web browser means if we comment some content in html web-page then that piece of code is not going to appear in browser window at run time of web-page in this condition HTML Comment are very helpful.
We can also define HTML Comment as a piece of code which protects our unwanted piece of content being displayed in web browser.
There can be many purpose of use of HTML Comment so let’s first know the syntax of HTML Comment and a bit latter we will know the scenario where we can use HTML comment.
HTML Comment Syntax
<!-- All commented content here -->
Be careful with points
- Never nest a comment within other comment.
- Properly close comment scope to avoid any kind of unwanted result.
- Don’t use HTML comment for hiding content, you can use for hiding for some time, prefer to use for marking or for remembering section.
- Anyone can see your commented content from page source view by simply press ctr+u
HTML Comment Example
<!--<p> This paragraph is marked as commented </p>-->
<p> Here we are going to check for html comments i.e. this comment is working or not, there is a line above this paragraph which is commented, if it is working you will not able to see any line of content above to this paragraph.</p>
Output
Here we are going to check for html comments i.e. this comment is working or not, there is a line above this paragraph which is commented, if it is working you will not able to see any line of content above to this paragraph.
Where to use HTML Comment
Use for remembering content section
In case of working with large content this technique is very helpful to remember the section of content, we just use comment as a mark which is not going to appear in web-page.
Example Explained
<!--<p> About organization </p>-->
<p>Here we can write all information about organization, which can be a huge content but we needs to write here and we have marked a comment above to this paragraph to identify that here we are going to write for organization.</p>
<!--<p> Our Services </p>-->
<p>Here we are going to discus about what servises we offers in our organization</p>
To hide un-sensitive information for some time
If we are creating a web-page with some information, if there is some information which we want to sow some time latter then we can use comment to hide such information to being displayed on web-page.
Example Explained
<p>The result will be announced within 2 day, the link will be appear just below:</p>
<!--<a href="result.html"> Click to See Result </a>-->
Note : A HTML Comment can be used to commenting a single line or multi-line content it doesn’t matter. However we can use more than one comment in a web-page as per requirement.
Comment CSS Code in HTML Page
There are two things while commenting CSS code in HTML Page. The first thing is that you can comment whole inline style or whole style tag in head section same as HTML content commenting but it becomes a bit different when we comment within style tag for example we can comment some property of CSS then in such case we have to use /* all commented content here */.
Comment Style Tag
<head>
<!--<style type="text/css">
.hello_p{
color:lime;
font-size:24px;
}
</style>-->
</head>
<body>
<p class="hello_p"> All style commented in head section </p>
</body>
Commenting Style Property
<head>
<style type="text/css">
.hellomy_p{
/*color:gray;*/
font-size:27px;
}
</style>
</head>
<body>
<p class="hellomy_p">I'm said because my css color property being commented</p>
</body>
Comment JavaScript code in HTML Page
As like CSS comment in HTML Page JavaScript comment in HTML Page also have 2 scenario the very first one to commenting whole script tag, it is also same as HTML Comment. But in 2nd case while we need to comment some piece of code within <script> tag, then we use // commented code here.
Comment Script Tag
<head>
<!--<script type="text/javascript">
function MyFun(){
alert('How are you!! I'm Js');
}
</style>-->
</head>
Comment Script code
<head>
<script type="text/javascript">
function hello(){
//alert('I'm Commented js code');
}
</style>
</head>