The Comment Tag in HTML
A typical way to structure an HTML comment is as follows:
I am a remark! <!-- .->
HTML comments begin with <!-- and finish with -->.
Make sure to start the tag with an exclamation point! It is not necessary to include it at the end.
The tag is used to comment out any text or HTML tag.
When to Use Comments in HTML
- The browser does not show HTML comments. This implies that when the page is produced in a web browser, any comments you make to your HTML source code will not be shown.
- Remember that virtually any website put online may have its source code viewed by anybody by going to View -> Developer -> View Source; this even applies to comments! Therefore, their comments will be available if you want to publicize the HTML content and someone else decides to look at the source code.
- Following best practices and writing comments is a good idea when developing source code. By using comments, you may better document and communicate to yourself (and others) about your code and thought process. Returning to a project after months of non-working reminds you of your thoughts and actions.
In addition, comments play a crucial role in enhancing communication among developers collaborating on a project. They provide clarity on the purpose behind certain lines of code, enabling other developers to grasp your intentions more easily.
How to Write HTML Single-Line Comments
A single-line comment must not exceed one line in length. As mentioned before, the content of this single-line comment will not be rendered by the browser.
To provide self-reminders or explanations for subsequent code, utilize single-line comments such as this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Doc</title>
</head>
<body>
<!-- Add the navbar here -->
<h2>About you</h2>
<p>I am learning to code with us.</p>
<p>I am going through every topic in Example.</p>
<p>I am heading to becoming a full-stack web developer! using jtp</p>
<h3>Work Experience</h3>
</body>
</html>
Single-line comments can also be utilized to signal the conclusion of a tag, especially beneficial when dealing with extensive and complex HTML content that contains abundant information, and you are uncertain about the appropriate placement for the closing tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Doc</title>
</head>
<body>
<section class="cont">
</section> <!--closing tag of cont section is here-->
</body>
</html>
How to Write HTML Inline Comments
In programming, it is possible to insert comments within a line of code or a statement.
The content enclosed within the tag will remain unaltered; only the text in <!-- --> will be remarked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Doc</title>
</head>
<body>
<p>I am <!--going to be--> a content writer</p>
</body>
</html>
How to Write Multi-Line Comments in HTML
In a similar manner as previously shown, comments are capable of extending over multiple lines.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Doc</title>
</head>
<body>
<p>I am a content writer</p>
<!--This is going to be my portfolio.
It will highlight the accomplishments of which I am most proud. Because I am Posting a multi-line remark here, I could go on and on about what I want to contribute.
</body>
</html>
How to In HTML Comment Out a Tag
How can you eliminate a tag from an HTML file?
The selected tag within <!-- --> is enclosed in a circle like this:
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Doc</title>
</head>
<body>
<h2>My portfolio page</h2>
<h3>my projects</h3>
<!-- <section class="h">
</section> -->
<h2>Me</h2>
</body>
</html>
Removing tags from comments can help with debugging purposes.
To troubleshoot any issues with the functionality of your code or if it is not behaving as anticipated, consider commenting out individual tags one by one. This approach allows you to isolate and test each tag to pinpoint any problematic ones.
Shortcut on the Keyboard for Adding HTML Comments
Shortcuts are a common way to save time while working. Mac users can use Command /, while Windows and Linux users can utilize Control /.
<ul class="1">
<li class="nt">A</li>
<li>B</li>
<li class="nt">C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li class="nt">G</li>
<li>H</li>
<li>I</li>
<li class="nt">J</li>
</ul>
<ul class="2">
<li class="nt">A</li>
<li>B</li>
<li class="nt">C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li class="nt">G</li>
<li>H</li>
<li>I</li>
ul.one > li:nth-child(-n + 3 of .noted) {
background-color: tomato;
border-bottom-color: seagreen;
}
ul.two > li.noted:nth-child(-n + 3) {
background-color: tomato;
border-bottom-color: seagreen;
}
You can use this for single line comments:
<!-- This is a single line comment -->
<section class="a" id="a">
<h3>cric</h3>
<p>
Our primary objective is to bring live cricket matches to fans all around
the world
</p>
<h3> It's not About winning! Its about country</h3>
<p>
We also air documentaries specially made for the greats, lifestyle of boxers, news, and more.
</p>
</sec>
You can also use it for multi-line comments:
<section class="a" id="a">
<h3>cric</h3>
<p>
Our primary objective is to bring live cricket matches to fans all around
the world
</p>
<!-- This is a
multi-line
comment -->
<h3> It's not About winning. It's about the country!</h3>
<p>
We also air documentaries specially made for the greats, the lifestyle of
cricketers, news, and more.
</p>
</section>
You have the flexibility to place the comment anywhere in the code as long as it is not enclosed within a tag.
<section class="a" id="a">
<h3>Watch the show</h3>
<p>
Our primary objective is to bring live shows to fans all around
the world
</p>
<h3>Its not About the magical shows</h3>
<p>
We also air
<!-- This is a comment within some text -->
documentaries specially made for the greats, lifestyle of magicians, news,
and more.
</p>
</section>
// And there you have it ? now you can comment your HTML code correctly and safely.