Skip to content

Comments

Jump to bottom
PotatoScript edited this page Apr 2, 2025 · 1 revision

What Are HTML Comments?

HTML comments are like notes or annotations in your code. They are used to explain parts of your HTML code, making it easier for people (including you!) to understand what's going on. 🧠

The browser ignores these comments, so they don’t affect the appearance or function of the webpage. Comments are simply there for developers to read and understand the code better.

How Do You Write an HTML Comment?

To write a comment in HTML, you use the following syntax:

<!-- This is a comment -->
  • Opening tag: <!--
  • Closing tag: -->
  • Content: The text inside is the comment, which can be anything you'd like to say!

Example 1: Basic HTML Comment

<!-- This is a simple comment. -->
<p>Hello, world!</p>

✅ What happens?

  • The comment (<!-- This is a simple comment. -->) will not be visible on the webpage, but anyone reading the HTML code can see it!

Example 2: Using Comments to Explain Code

Imagine you're building a webpage and want to explain what each part of the code does. Here's how you can use comments:

<!-- Start of Header Section -->
<header>
    <h1>Welcome to My Website!</h1>
</header>

<!-- Start of Main Content Section -->
<main>
    <p>This is where the main content goes.</p>
</main>

<!-- End of Page -->

✅ What happens?

  • The comments make the code easier to understand for other developers (or for you, when you come back to this code later!).

Example 3: Multi-line Comments

You can also use comments across multiple lines if you have a longer explanation:

<!--
This is a comment that goes
over multiple lines. You can write anything here.
It's helpful for explaining big chunks of code.
-->
<p>This paragraph will be displayed normally.</p>

✅ What happens?

  • The multi-line comment will be ignored by the browser, and the paragraph (<p>) will be displayed on the webpage.

Example 4: Using Comments to Temporarily Disable Code

Sometimes, developers use comments to disable parts of the code temporarily while working on the webpage. You can comment out code that you don't want to execute but still want to keep in the file.

<!--
<h1>This heading is temporarily disabled</h1>
-->
<p>This is a normal paragraph.</p>

✅ What happens?

  • The commented-out heading (<h1>) won't show up on the webpage, but it's still in the HTML code in case you want to enable it later.

Tips for Using HTML Comments:

  1. Clarity:
    Always use comments to explain why something is being done, especially for complex code. For example, instead of just commenting <!-- Footer -->, try something like <!-- Footer section where contact info will be added -->.

  2. Keep It Clean:
    While comments are useful, don't overuse them. Too many comments can clutter the code and make it harder to read. Keep them concise and meaningful.

  3. Don't Use Comments for Sensitive Info:
    Never put passwords, API keys, or other sensitive data inside comments, as they are still visible in the code.

Summary:

  • HTML comments are written using <!-- comment -->.
  • They don’t display on the webpage.
  • They're used to explain the code and make the code easier to understand for others.
  • You can use comments to temporarily disable parts of your code.

Final Example:

<!-- Header Section -->
<header>
    <h1>My Awesome Website</h1>
</header>

<!-- Main Content Section -->
<main>
    <p>Here is some really cool content.</p>
</main>

<!-- End of the Page -->
<footer>
    <p>Contact us at: contact@awesome.com</p>
</footer>

Clone this wiki locally