HTML Comments – Types and Examples
Free Web development courses with real-time projects Start Now!!
Comments are used to add other related additional information in an HTML document. HTML Comments are displayed only when the source code of a web-page is opened and are not rendered by the browsers on to the web-pages. They are of utmost importance to developers, as they help them to know what actually a piece of code is doing.
Suppose there is a community of developers working on the same project. In this scenario, the work done by one developer needs to be understood by the others. This is actually where the role of comments come into play in order to facilitate communication.
Importance of HTML Comments
- Improves the readability of the code, especially when a single HTML document is accessed by multiple developers.
- Ensures quick and efficient understanding of complex codes.
- Makes debugging of source code easier and ensures easier maintainability.
In this article, we’ll look at commenting single lines, multiple lines, and use of comment tags.
Comments can be utilized to temporarily disable parts of the code during development and testing. This helps in isolating issues without removing the code. The comments serve as a tool for documentation, allowing developers to explain specific choices made in the code.
Syntax:
HTML comments start with <!– and end with –>. For example:
<!DOCTYPE html> <html lang="en-US"> <head> </head> <body> <!--following is a paragraph--> <p><i>Welcome to DataFlair!</i></p> <p><bdo dir="rtl">Welcome to DataFlair</bdo></p> </html>
Output:
Note- There is an exclamation mark in the opening tag and the ending tag is devoid of it. If there is any space between any of these symbols, it will be an invalid comment in HTML.
Types of HTML Comments
1. Single line Comments in HTML
A single line can be commented. Refer to the example above.
2. Multi-line Comments in HTML
Multiple lines can be commented using comments. For example,
Code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
p{
border:1px solid #4a7d49;
}
</style>
</head>
<body>
<!--Comments can be used to
add multiple line
on to the HTML Document.-->
<!--following is a paragraph-->
<p>Welcome to DataFlair</p>
</html>
Output:
As we can see, multiple lines are not displayed.
3. <comment> tag in HTML
The <comment> tag can also be used to add comments but it is supported by Internet Explorer solely. For example,
Code:
<!DOCTYPE html>
<html>
<head>
<title>
DataFlair
</title>
</head>
<body>
<p>
This is <comment>not</comment>
Internet Explorer.
</p>
</body>
</html>
Output on google chrome:
Output on Internet Explorer:
4. Conditional Comments in HTML
As seen from the name, conditional comments are used to execute a particular code(containing HTML tags) only if a certain condition is met. Conditional Comments are supported only by Internet Explorer, version 5 to version 9.
Code:
<!DOCTYPE html>
<html>
<body>
<!--[if IE 9]>
<h1>DataFlair</h1>
<p>E-Learning</p>
<![endif]-->
</body>
</html>
It is important to note that while conditional comments are a powerful tool for dealing with browser-specific issues, their usage is largely obsolete with the decline of Internet Explorer.
Summary
In this article, we’ve discussed commenting in an HTML Document. There are three types of HTML comments – single line, multi-line, and the using <comment> tag. However, the use of the <comment> tag has been deprecated in HTML 5. We can also comment pieces of code of JavaScript and CSS styles using these comments.
Your opinion matters
Please write your valuable feedback about DataFlair on Google
very informative and helpful website keep grooming and run to your future