HTML Comments
Use comments to organize your code.
HTML Comments is a free HTML for Kids lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML for Kids learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
1
HTML Comments
Welcome to the next lesson! Today, we’ll learn about HTML comments. Comments are notes in your code that are not visible on the web page but help you and others understand the code.
2
What Are Comments?
Comments in HTML are special lines of text that the browser ignores when displaying the page. They are used to:
- Explain the purpose of your code.
- Temporarily disable code during debugging.
- Add reminders or notes for yourself or other developers.
Comments make your code more readable and maintainable.
3
How to Write a Comment
To create a comment in HTML, wrap your text inside <!-- and -->.
Example:
<!-- This is a comment -->
<p>This is visible content.</p>
4
Using Comments to Explain Code
Use comments to explain what a section of your code does. This is especially helpful for large or complex projects.
Example:
<!-- This section contains the navigation menu -->
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
5
Disabling Code with Comments
You can use comments to temporarily disable parts of your code without deleting it. This is useful for testing or debugging.
Example:
<!-- <p>This paragraph is currently disabled.</p> -->
<p>This paragraph is visible.</p>
6
Best Practices for Comments
Follow these tips to use comments effectively:
- Write clear and concise comments.
- Avoid commenting on obvious code.
- Update comments if the related code changes.
Example of helpful comments:
<!-- Main content starts here -->
<main>
<h1>Welcome to My Blog</h1>
<p>This is a blog post about HTML comments.</p>
</main>
7
Comments for Collaboration
When working in a team, comments help others understand your thought process and make collaboration easier.
Example:
<!-- TODO: Add a button to submit the form -->
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
</form>
8
Try It Yourself
Task: Create a simple web page with comments explaining each section.
<!DOCTYPE html>
<html>
<head>
<title>HTML Comments</title>
</head>
<body>
<!-- Page header -->
<header>
<h1>Welcome to My Website</h1>
</header>
<!-- Main content -->
<main>
<p>This is a paragraph about HTML comments.</p>
</main>
<!-- Page footer -->
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
9
10
Great Job!
Congratulations! You’ve learned how to use HTML comments effectively. Comments are a simple but powerful tool for writing clear and organized code. In the next lesson, we’ll move on to more advanced topics to enhance your web development skills. Keep learning and experimenting!
Frequently asked questions
Is the “HTML Comments” lesson free?
Yes — the full text of “HTML Comments” is free to read here on the web, and the HTML for Kids course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML for Kids course, upgrade to CoddyKit PRO.
What will I learn in “HTML Comments”?
Use comments to organize your code. You practise HTML for Kids with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML for Kids?
No prior experience is required. HTML for Kids on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “HTML Comments” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML for Kids lesson?
Yes. Every HTML for Kids lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.