Web Development - HTML Comments
HTML Comments
Comments are used to add notes, explanations, or reminders inside your HTML code. They are ignored by the browser and do not appear on the web page.
HTML Comment Syntax
To write a comment, use this syntax:
Syntax
<!-- Write your comments here -->
Notice that there is an exclamation mark ! in the start tag, but not in the end tag.
Tip: Use comments to describe your code, especially in longer files. This makes it easier to understand later.
Adding Comments
You can place comments anywhere in your HTML document - before elements, after elements, or even in between.
Example
Adding comments to your code:
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here later -->
Try it Yourself »
Hide Content with Comments
You can use comments to temporarily hide content from being displayed in the browser.
Example
Hiding an element:
<p>This is visible text.</p>
<!-- <p>This text is hidden.</p> -->
<p>This is visible again.</p>
Try it Yourself »
Everything between <!-- and --> will be hidden from the browser.
Hide Multiple Lines
You can also hide several lines of HTML at once by wrapping them inside comment tags.
Example
Hiding a section of code:
<p>This is visible.</p>
<!--
<p>This is hidden.</p>
<img src="avatar.png" alt="Example Image">
-->
<p>This is visible again.</p>
Try it Yourself »
Tip: Comments are great for debugging. You can comment out one line at a time to find what causes an error.
Hide Inline Content
Comments can also be placed inside a line of HTML to hide part of the text.
Example
Hide part of a paragraph:
<p>This <!-- hidden text --> is a paragraph.</p>
Try it Yourself »
Best Practices for Comments
- Use comments to describe sections of your code.
- Hide code temporarily when testing or debugging.
- Do not overuse comments - short and clear is best.
- Remove unnecessary comments before publishing your final page.
Summary
- HTML comments start with
<!--and end with-->. - Comments are ignored by browsers.
- You can use them to hide content or leave notes in your code.
Next, you'll learn how to add HTML Links - the clickable connections between web pages.
