HTML Comments

HTML comments are a great way to add notes directly in your code, making it easier for others (or yourself) to understand later without affecting what the user sees on the page. While these comments don’t show up in the browser, they can still be viewed in the source code, so never include sensitive information. They're also handy for quickly disabling sections of code while testing or debugging, keeping everything neat and easy to manage.

HTML Comment Syntax Example

HTML comments are written using this format:

<!-- This is a comment -->

In the opening tag, you’ll notice an exclamation mark (!), but the closing tag does not include it.

Here's an example:

<p>This is a visible paragraph.</p>
<!-- <p>This paragraph is hidden.</p> -->

The browser will completely ignore the text inside the comment, so the hidden paragraph won’t be displayed.

What are HTML Comments?

HTML comments are notes in the code that are ignored by browsers, helping developers clarify or explain sections without affecting how the webpage displays. They can also be used to temporarily hide parts of the code during development. While comments won’t appear on the page itself, they are visible in the source code, so it's important not to include sensitive information in them.

Types of HTML Comments

HTML supports Single-line and Multi-line comments, both using the same syntax. The difference lies in how much text you need to comment out—multi-line comments are perfect when you need to leave longer notes or explanations.

Comment Type	Syntax	Example
Single-line	<!-- Comment -->	<h1>Title</h1> <!-- This is a single-line comment -->
Multi-line	<!-- Line 1<br>Line 2 -->	<h1>Title</h1> <!-- This is a multi-line<br>comment -->

Speed up your workflow by using Ctrl + / (Windows) or Command + / (Mac) to quickly comment out code.

Why Use HTML Comments?

HTML comments play a crucial role in web development for several reasons:

1. Documentation. They provide clear explanations or notes within your code, making it easier to understand when you return to it later.
2. Collaboration. When working in teams, comments help clarify logic, provide context, or suggest improvements for other developers.
3. Debugging. Temporarily disable parts of your code during troubleshooting without actually removing them, making it easier to test changes.
4. Readability. Strategic comments can break down complex code sections, improving clarity and helping others navigate the structure more easily.

Remember that HTML comments are visible in the source code, so avoid including sensitive information. For CSS or JavaScript, use /* */ for CSS and // or /* */ for JavaScript comments.

Using Comments to Hide Content

HTML comments are useful for hiding sections of code during development or testing. This allows you to temporarily remove content from the webpage without deleting the code, making it easy to restore later.

Example:

<p>This is a visible paragraph.</p>
<!-- <p>This paragraph is hidden.</p> -->

In this example, the second paragraph won't be displayed in the browser because it's inside an HTML comment.

Hiding Inline Content

HTML comments can be used to hide parts of inline content within an element while keeping the rest visible:

<p>This is <!-- not important --> a heading.</p>

In this example, only "This is a heading." will be displayed, while "not important" will be ignored by the browser. This technique is handy for hiding small bits of content without affecting the overall structure.

Hiding Multiple Lines

You can also hide several lines of code by enclosing them within a comment block:

<!--
<p>This is line 1.</p>
<p>This is line 2.</p>
-->

This technique is useful for debugging or experimenting with different layouts without removing code permanently.

Valid vs Invalid HTML Comments

It's crucial to use the correct syntax for HTML comments to ensure that browsers correctly interpret them. Valid comments are enclosed with proper opening and closing tags, without any extra spaces.

• Valid: <!-- This is a valid comment -->
• Invalid: < !-- This is not valid -- >

In the valid example, notice how there are no spaces between the < and ! or between -- and >. In the invalid example, spaces are added incorrectly, causing the comment to break. Always double-check your comment syntax to avoid issues in your code.

Conditional Comments (For Internet Explorer)

Conditional comments were a workaround used to apply specific styles or content only to older versions of Internet Explorer (IE). These comments helped developers address IE’s unique quirks but are now obsolete since modern browsers no longer support them.

Example:

<!--[if IE 9]>
  <p>This message will only appear in Internet Explorer 9.</p>
<![endif]-->

FAQs

How do I comment on one line in HTML?

To comment on a single line in HTML, you simply need to enclose the text between <!-- and -->. This will allow you to add notes or temporarily disable code without it being displayed or executed by the browser. This is particularly useful for documentation within your HTML files.

<!-- This is a single-line comment -->

How do I create a comment box in HTML?

A comment box in HTML is just a multi-line comment. By wrapping your text or code in <!-- and -->, you can comment out multiple lines at once. This is helpful when you want to temporarily hide blocks of code during debugging or development, without needing to delete them.

<!--
This is a comment box.
It spans multiple lines,
allowing you to hide or document larger sections of code.
-->

What is the input for comments in HTML?

In HTML, the input for comments is enclosed between <!-- and -->. The content inside this will be completely ignored by the browser, meaning it won’t affect the visual layout or functionality of the webpage. Comments are typically used to provide notes for developers or to disable code during development.

<!-- This is an example of a comment in HTML -->

How do you write HTML5 conditional comments?

HTML5 itself no longer supports conditional comments, which were used to target specific versions of Internet Explorer. These were particularly useful when websites needed to render differently in older versions of IE. Although this feature is deprecated in modern web development, here’s how you would have written a conditional comment for IE 9:

<!--[if IE 9]>
  <p>This text is for Internet Explorer 9 users only.</p>
<![endif]-->

Although obsolete, conditional comments can still be useful in legacy projects that require support for older versions of Internet Explorer.