HTML Comments – Solved Practice Questions

By /

Introduction

HTML comments are used to add notes inside your HTML code. Comments are ignored by the browser, so they are not displayed on the webpage. They help explain code, organize sections, and make projects easier to understand. In this chapter, you’ll practice writing HTML comments through simple solved questions.

Question 1

Problem Statement

Create a webpage with a heading and add a comment above the heading.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>HTML Comments</title>
</head>
<body>

    <!-- Main Heading -->

    <h1>Welcome to HTML</h1>

</body>
</html>

Output

Welcome to HTML

Step-by-Step Explanation

  • <!-- --> is used to write a comment.
  • The browser ignores comments.
  • Only the <h1> heading is displayed on the webpage.

Question 2

Problem Statement

Create a webpage that displays a paragraph and add a comment describing the paragraph.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Paragraph Comment</title>
</head>
<body>

    <!-- Introduction Paragraph -->

    <p>HTML is the foundation of every website.</p>

</body>
</html>

Output

HTML is the foundation of every website.

Step-by-Step Explanation

  • The comment explains the purpose of the paragraph.
  • Comments are visible only in the HTML source code.
  • The browser displays only the paragraph.

Question 3

Problem Statement

Create a webpage with a heading and a paragraph. Add separate comments for both sections.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Comments</title>
</head>
<body>

    <!-- Website Heading -->

    <h1>Code Learning</h1>

    <!-- Website Description -->

    <p>Practice HTML every day to improve your skills.</p>

</body>
</html>

Output

Code Learning

Practice HTML every day to improve your skills.

Step-by-Step Explanation

  • Multiple comments can be used in one HTML document.
  • Each comment explains a different section.
  • Comments do not appear on the webpage.

Question 4

Problem Statement

Create a webpage and temporarily hide a paragraph using an HTML comment.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Hide Content</title>
</head>
<body>

    <h1>My Website</h1>

    <!--
    <p>This paragraph is hidden because it is inside a comment.</p>
    -->

</body>
</html>

Output

My Website

Step-by-Step Explanation

  • The paragraph is placed inside a comment.
  • The browser ignores everything inside the comment.
  • Only the heading is displayed.

Question 5

Problem Statement

Create a webpage for a restaurant and use comments to separate the heading and menu sections.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Restaurant</title>
</head>
<body>

    <!-- Restaurant Name -->

    <h1>Food Corner</h1>

    <!-- Menu Section -->

    <p>Pizza</p>
    <p>Burger</p>

</body>
</html>

Output

Food Corner

Pizza

Burger

Step-by-Step Explanation

  • The first comment identifies the restaurant name.
  • The second comment identifies the menu section.
  • Comments make HTML code easier to read.

Question 6

Problem Statement

Create a portfolio webpage and use comments to separate the About Me and Skills sections.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>My Portfolio</title>
</head>
<body>

    <!-- About Me Section -->

    <h1>Rahul Sharma</h1>

    <p>I am learning HTML and web development.</p>

    <!-- Skills Section -->

    <h2>Skills</h2>

    <p>HTML, CSS, JavaScript</p>

</body>
</html>

Output

Rahul Sharma

I am learning HTML and web development.

Skills

HTML, CSS, JavaScript

Step-by-Step Explanation

  • The first comment marks the About Me section.
  • The second comment marks the Skills section.
  • Comments help organize larger HTML files.
  • They are visible only in the source code.

Concepts Used: <!-- -->, <h1>, <h2>, <p>

Question 7

Problem Statement

Create a webpage and use a comment to remind yourself to add an image later.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Future Update</title>
</head>
<body>

    <h1>My Travel Blog</h1>

    <!-- Add a travel image here later -->

    <p>Welcome to my travel blog.</p>

</body>
</html>

Output

My Travel Blog

Welcome to my travel blog.

Step-by-Step Explanation

  • Comments can be used as reminders.
  • Reminder comments help during website development.
  • The comment is not displayed on the webpage.

Question 8

Problem Statement

Create a webpage and use comments to separate the header, main content, and footer.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Website Layout</title>
</head>
<body>

    <!-- Header -->

    <h1>My Website</h1>

    <!-- Main Content -->

    <p>Welcome to our official website.</p>

    <!-- Footer -->

    <p>© 2026 My Website</p>

</body>
</html>

Output

My Website

Welcome to our official website.

© 2026 My Website

Step-by-Step Explanation

  • Each comment identifies a webpage section.
  • Comments improve code readability.
  • This is a common practice in real-world projects.

Question 9

Problem Statement

Create a webpage and temporarily disable a heading using an HTML comment.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Disable Heading</title>
</head>
<body>

    <!--
    <h1>Welcome to My Website</h1>
    -->

    <p>The heading is currently hidden.</p>

</body>
</html>

Output

The heading is currently hidden.

Step-by-Step Explanation

  • The heading is inside a comment.
  • The browser ignores the commented code.
  • This technique is useful for testing or debugging.

Question 10

Problem Statement

Create a simple company webpage and use comments to organize the Header, Services, About, and Contact sections.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Company Website</title>
</head>
<body>

    <!-- Header -->

    <h1>ABC Technologies</h1>

    <!-- Services -->

    <h2>Our Services</h2>

    <p>Website Development</p>

    <!-- About -->

    <h2>About Us</h2>

    <p>We provide IT solutions for businesses.</p>

    <!-- Contact -->

    <h2>Contact</h2>

    <p>Email: info@abcteck.com</p>

</body>
</html>

Output

ABC Technologies

Our Services

Website Development

About Us

We provide IT solutions for businesses.

Contact

Email: info@abcteck.com

Step-by-Step Explanation

  • Comments divide the webpage into logical sections.
  • They make the HTML code easier to maintain.
  • The browser ignores all comments.
  • Only headings and paragraphs are displayed.

Key Takeaways

  • HTML comments are written using <!-- -->.
  • Comments are not displayed in the browser.
  • They help explain HTML code.
  • Comments make large projects easier to manage.
  • You can temporarily hide HTML code using comments.
  • Comments are useful for reminders and debugging.

Frequently Asked Questions (FAQs)

1. What is an HTML comment?

An HTML comment is a note written inside the code that is ignored by the browser.

2. Which syntax is used to write an HTML comment?

Use <!-- Comment --> to create an HTML comment.

3. Are HTML comments visible on the webpage?

No. Comments are only visible in the HTML source code.

4. Can I write multiple comments in one HTML file?

Yes. You can add as many comments as needed.

5. Can comments contain HTML code?

Yes. HTML code inside a comment is ignored by the browser.

6. Why do developers use HTML comments?

Developers use comments to explain code, organize sections, add reminders, and temporarily disable code during testing.

7. Do HTML comments affect SEO?

No. Search engines do not display HTML comments as webpage content, so they do not directly improve SEO.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top