HTML Comments Tag | How to Write It
Comments in HTML are statements within the HTML code that are not displayed on the browser window. They allow us to include notes, explanations, or disable code without removing it.
Comments are not executed by the web browser but are displayed in the code as they are. Therefore, they are not visible to the users when they view a webpage.
With comments, we can express our thoughts related to the code independently. Comments make it easy to understand which code is written for what purpose. Therefore, it is a good practice to write comments related to the code.
Comments help to enhance code readability and maintainability, making the work smoother and more efficient.
Syntax of HTML Comments
Writing comments in HTML is straightforward. We can add comments in the HTML source code using the following syntax:
<!-- Write your comments here -->
In the above syntax, the comment tag starts with <!– and ends with –>. There is an exclamatory sign (!) followed by (-) in the start tag that denotes comments used in the HTML document.
However, there is no exclamatory sign in the end tag. Any text written between <!– and –> is considered a comment and will not be rendered by the web browser. Let’s take an example in which we will write comments in the HTML code.
<!DOCTYPE html>
<html lang="en">
<html>
<!-- This is the header section -->
<head>
<!-- Writing the title here-->
<title>Comments Example</title>
</head>
<!-- This is the body section -->
<body>
<!-- Heading tag -->
<h2>First WebPage</h2>
<!-- Paragraph tag -->
<p>Write your content here!!!</p>
</body>
</html>
[adinserter block=”5″]
The following output will display on the web browser.
As you can see in the output of the above HTML code in the browser, comments are not displayed on the webpage because they are not executed by browser, but it can be seen in the source code if you want to view it
Examples of HTML Comments
(1) Basic Comment: We can place a comment anywhere within the HTML code. A simple comment in HTML might look like this:
<!-- This is a basic HTML comment --> <p>This is a paragraph.</p>
(2) Multi-line Comments: HTML comments can span multiple lines. For example:
<!-- This is an example of a multi-line comment. Here, you can write as many lines as you want. -->
[adinserter block=”2″]
(3) Section Descriptions: When working on complex web pages, it’s good practice to use comments to describe different sections of your HTML document. For example:
<!-- Header Section Start -->
<header>
<!-- Navigation Bar -->
<nav>
<!-- Logo -->
</nav>
</header>
<!-- Header Section End -->
These comments help depict sections of the code, making it easier for developers to navigate and understand the structure at a glance.
(4) Conditional Comments: They are a feature of HTML that allows us to provide different content to different browsers. They are not officially part of the HTML specification, but many browsers widely used and supported them. For example:
<!--[if IE]> <p>You are using Internet Explorer.</p> <![endif]-->
In this example, the paragraph will only be displayed if the user is using Internet Explorer.
Temporarily Disabling or Hiding Code
In HTML, we can also use comments to temporarily disable or hide a part of HTML code from being rendered by the web browser. This technique is especially useful during debugging, when:
- we want to temporarily disable a part of code without deleting it.
- we want to prevent certain parts of the webpage from rendering during development or testing phases.
For example:
<!-- <p>This paragraph will not display on the web page.</p> -->
In this example, we have enclosed the paragraph element within comment tags. Therefore, it will not appear on the web page.
Let’s take an example in which we will hide more than one line of code. Everything between the <!– and the –> will hide from the being display.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example to hide multiple lines of the code</title>
</head>
<body>
<h1>Welcome to my web page</h1>
<!-- Hiding multiple lines of code start -->
<!--
<p>This paragraph will not be displayed because it is commented out.</p>
<ul>
<li>Hidden list item 1</li>
<li>Hidden list item 2</li>
<li>Hidden list item 3</li>
</ul>
-->
<!-- Hiding multiple lines of code end -->
<p>This paragraph will be displayed because it is not within the comment tags.</p>
</body>
</html>
Output:
Welcome to my web page
This paragraph will be displayed because it is not within the comment tags.
In this example, the block of HTML code between <!– Hiding multiple lines of code start –> and <!– Hiding multiple lines of code end –> is completely hidden from rendering in the web browser. This includes a paragraph and a list of items.
Hide Inline Content
We can use HTML comments to hide parts of the content inline within the HTML code. This technique allows us to temporarily hide specific portions of text or code without affecting the surrounding content. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example to hide inline content</title>
</head>
<body>
<p>This is the first sentence. <!-- This comment hides the second sentence --> This is the third sentence.</p>
</body>
</html>
Output:
This is the first sentence. This is the third sentence.
Best Practices for Commenting
There are the following key points that you should keep in mind before commenting on the HTML code. They are:
- Comments should clearly explain why something is done, not just what is done.
- While being descriptive, comments should also be concise. Avoid over-commenting simple or self-explanatory code.
- Keep comments up to date. Outdated comments can be misleading and more harmful than no comments at all.
- Use comments to break down large sections of HTML code, to explain the purpose of a section, or to highlight work that needs to be revisited.
HTML comments serves as a powerful and useful tool for developers. They can make your code easier to understand and allow you to prevent specific parts of your code from being rendered. However, remember that comments are visible to anyone who views your source code, so never include sensitive information in them. Hope that you will have understood the basic points of comments in HTML and practiced commenting.
Happy coding!!!
