UI UX Design (36 Blogs) Become a Certified Professional

All you Need to Know about Comments In HTML

Last updated on May 24,2023 491 Views


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. –>).

Enhance your design skills with our top-rated UX Design Course.

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.

Check out the Angular Online Course by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities.

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

Join the discussion

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.

image not found!
image not found!

All you Need to Know about Comments In HTML

edureka.co