React.js Training Course With Certification
- 18k Enrolled Learners
- Weekend
- Live Class
(7000)
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.
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>
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>
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>
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>
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.
