Learn HTML Comments Code

Tips (Total 6)

1. What is HTML Comments

2. How to create HTML Comment Tag

3. How to add HTML Comments

4. How to Hide HTML Content

5. How to Hide HTML Content Part 2

6. How to hide Inline Content

# Tips-1) What is HTML Comments

HTML comments are not displayed in the browser, but they can help document your HTML source code.

Comments are some text or code written in your code to give an explanation about the code, and not visible to the user. Comments which are used for HTML file are known as HTML comments. Anything written between these tags will be ignored by the browser, so comments will not be visible on the webpage.

Comments of any code make code easy to understand and increase readability of code.

Example of HTML Comments

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->

</body>
</html>

Output should be:

# Tips-2) How to create HTML Comment Tag

You can add comments to your HTML source by using the following syntax:

Example of HTML Comments Tag

You can add comments to your HTML source by using the following syntax: Notice that there is an exclamation point (!) in the start tag, but not in the end tag. Note: Comments are not displayed by the browser, but they can help document your HTML source code.

index.html

Example: HTML

<!-- Write your comments here -->

# Tips-3) How to add HTML Comments

With comments you can place notifications and reminders in your HTML code:

Example of adding HTML Comments

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->

</body>
</html>

Output should be:

# Tips-4) How to Hide HTML Content

Comments can be used to hide content.

This can be helpful if you hide content temporarily:

Example of Hidding HTML Content

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>

<!-- <p>This is another paragraph </p> -->

<p>This is a paragraph too.</p>

</body>
</html>

Output should be:

# Tips-5) How to Hide HTML Content Part 2

You can also hide more than one line. Everything between the  will be hidden from the display.

Example of Hidding HTML Content Part 2

Hide a section of HTML code:

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<!--
<p>Look at this cool image:</p>
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
<p>This is a paragraph too.</p>

</body>
</html>

# Tips-6) How to hide Inline Content

Comments can be used to hide parts in the middle of the HTML code.

Example of Hidding Inline Content

Hide a part of a paragraph:

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<p>This <!-- great text --> is a paragraph.</p>

</body>
</html>

Output should be:

Share on:

Horje © 2011 to 2024