The Complete WebDeveloper (38 Blogs) Become a Certified Professional

All you Need to Know about Comments In HTML

Published on Aug 20,2019 19 Views

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

By the formal definition, a comment is that part of code which is ignored by any web browser, interpreter or compiler. You might be thinking, then why we need to add comments. Let us explore this topic of comments in HTML in the following order:

 

What are Comments in HTML?

Comments are a very crucial part of any program, especially when the code is complex & lengthy. Comments are like text notes or annotations added to source code for providing explanation & information about the code. This helps others in understanding the code in-case of maintenance, changing functionality & adding features.

Comments-in-HTML

In case of HTML the comments starts with <!– tag & ends with –> tag. So, in HTML file if you are placing any content between <!– … –> tags, it is going to be ignored by the browser completely.

Sample Code:

<!DOCTYPE html>
<html>
   <head> 
      <title>Edureka</title>
   </head>
   <body>
      <p>Body of the Document</p>
      <p><!-- This is a code & it is not going to be displayed by the browser.--></p>
   </body>
</html>

Body-Comments-in-HTML

 

NOTE: There are some important points that you need to keep in mind while adding comments. I’ll list some of the important ones:

  • We do not have nested comments in case of HTML.

  • There should not be space between any character at the start of comment string (i.e.<!–). It will not be treated as a comment by the browser.

  • Same goes with the end of the comment string. There should not be space between any characters at the end of the comment string (i.e. –>).

 

Invalid Comments in HTML

 


<!DOCTYPE html>
<html>
   <head> 
      <title>Edureka</title>
   </head>
   <body>
      <p>Body of the document</p>
      <p>< !-- This is an invalid comment as there is a space between < & ! at the start of the comment string--></p>
   </body>
</html>

Invalid-Comments

 

 

Multiline Comments

As compared to different languages where we have single line & multiline comments, HTML also supports both single & multiline comments. You can comment multiple lines using the same tags i.e. <!– … –>.

<!DOCTYPE html>
<html>

<head>
<title>Edureka</title>
</head>

<body>
<!--
There are multiple lines in this section.
Line1
Line2
Line3
We have commented all the line
-->

<p>Document Body</p>
</body>
</html>

Body

 

 

Commenting JavaScript Code

You can comment a JavaScript code as well using HTML comment tags. You need to the start & end comment tag outside the script tag. The script tag is where the JavaScript code resides. Refer to the below code.

<!DOCTYPE html>
<html>

<head>
<title>HTML Comments</title>
<!--
<script>
document.write("Javascript Comments")
</script>
-->
</head>

<body>
<p>Document Body</p>
</body>

</html>

If you put the HTML start comment tag inside script tag then it won’t work. Refer to the below example.

<!DOCTYPE html>
<html>

<head>
<title>HTML Comments</title>

<script>
<!--
document.write("Javascript Comments")
-->
</script>
</head>

<body>
<p>Document Body</p>
</body>

</html>

 

Final

 

With this, we come to an end of this article. Now after executing the above snippets you would have understood how to add comments in HTML which will increase your code readability & help others in understanding your code. I hope this blog is informative and added value to you.

Check out our Full Stack Web Developer Masters Program which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.

Got a question for us? Please mention it in the comments section of this blog and we will get back to you.

Comments
0 Comments

Browse Categories

Subscribe to our Newsletter, and get personalized recommendations.