HTML comments allow developers to add explanatory notes, organize code sections, and temporarily disable HTML elements without deleting them from the source file. Comments are ignored by web browsers during rendering and are not displayed on the web page.
HTML comments start with <!-- and end with -->. Any text or HTML markup between these delimiters is excluded from the browser's visual layout.
<!-- This is a single-line HTML comment -->
<!--
This is a multi-line HTML comment.
Useful for detailed code documentation.
-->
While comments are hidden from the visual viewport, they still exist inside the raw document source downloaded by the user's browser.
flowchart LR
A["HTML Source Code (containing <!-- comments -->)"] --> B["Browser Parser"]
B --> C["Render Tree (Visual Page - Comments Hidden)"]
B --> D["DOM Source View / DevTools (Comments Visible)"]
<!-- Header Section -->, <!-- Sidebar End -->).<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Comments Example</title>
</head>
<body>
<!-- ============================================ -->
<!-- NAVIGATION BAR SECTION -->
<!-- ============================================ -->
<nav>
<a href="#home">Home</a> |
<a href="#docs">Documentation</a>
</nav>
<!-- MAIN ARTICLE CONTENT -->
<main>
<h1>Mastering HTML Comments</h1>
<p>Comments keep large HTML documents readable for developer teams.</p>
<!--
TODO: Replace static warning callout below
with dynamic backend alert component!
-->
<p><strong>Note:</strong> Comments do not affect page loading speed noticeably.</p>
<!--
<div class="deprecated-banner">
<p>This old banner has been disabled for testing.</p>
</div>
-->
</main>
<!-- ============================================ -->
<!-- FOOTER SECTION -->
<!-- ============================================ -->
<footer>
<p>© 2026 KoderSolution Development Portal</p>
</footer>
</body>
</html>
<!-- Outer <!-- Inner --> Outer --> will cause the browser to close the comment prematurely at the first -->, breaking page markup.<!-- This is a paragraph tag --> <p>Text</p>).Open an HTML file, add a section comment header above a <form> element, and use a multi-line comment block to temporarily disable an input field during testing!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.
You've completed this section! Take a quick 5-question quiz to check your understanding.