HTML Comments

HTML comments are lines of code that the browser ignores and does not display. They are used to leave notes, explanations, or to temporarily hide content.

---

HTML Comment Syntax

A comment starts with <!-- and ends with -->:

<!-- This is a comment -->
<p>This paragraph is visible.</p>
<!-- This paragraph is hidden -->
<!-- <p>You cannot see me.</p> -->

Browser output:

---

Single-Line Comment

A single-line comment fits on one line:

<!-- This is a heading -->
<h1>Welcome to RedoHub</h1>

<!-- This link goes to the homepage -->
<a href="index.php">Home</a>

---

Multi-Line Comment

A comment can span multiple lines:

<!--
    This is a multi-line comment.
    It can span as many lines as needed.
    The browser will ignore all of this.
-->
<p>This text is visible.</p>

---

Hiding Content with Comments

Comments are commonly used to temporarily hide parts of your HTML without deleting them:

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

<!--
<p>This paragraph is hidden from the browser.</p>
<img src="photo.jpg" alt="Photo">
-->

<p>This paragraph is also shown.</p>

---

Comments for Documentation

Good developers use comments to document sections of their HTML, making it easier for others (and themselves) to read the code later:

<!-- ===== HEADER SECTION ===== -->
<header>
    <nav>...</nav>
</header>

<!-- ===== MAIN CONTENT ===== -->
<main>
    <h1>Welcome</h1>
    <p>Content goes here...</p>
</main>

<!-- ===== FOOTER SECTION ===== -->
<footer>
    <p>Copyright 2025</p>
</footer>

---

Inline Comment (End of Line)

You can also place a comment at the end of a line of HTML:

<p>Hello World</p> <!-- Main greeting -->
<img src="logo.png" alt="Logo"> <!-- Site logo -->

---

Summary

Use Case	Example
Basic comment	<!-- comment -->
Hide an element	<!-- <p>Hidden</p> -->
Multi-line comment	<!-- line1 line2 -->
Section label	<!-- === HEADER === -->
Inline comment	<p>Text</p> <!-- note -->