View Categories

HTML Comments

Table of Contents

HTML comments are essential for developers, providing a method to annotate code without affecting how the webpage is displayed. Comments help improve code readability, aid collaboration, and can be used to temporarily disable sections of code. Enclosed within <!-- and -->, HTML comments function as invisible notes within the code.

What are HTML Comments? #

HTML comments are enclosed within <!-- and -->, and are used to provide explanations or notes within the code for developers. These comments are invisible on the rendered webpage but serve to document the code structure, offer reminders, or include instructions that enhance collaboration and make the code more understandable.

Ways to Comment in HTML #

There are two primary ways to create comments in HTML. Both types can be used to insert notes or temporarily hide sections of HTML code.

CommentDescriptionsSyntax
Single-lineA single-line comment is enclosed within the <!-- and --> tags.<!-- comment -->
Multi-lineMulti-line comments use the same syntax as single-line comments, but span multiple lines.<!-- Multi-line comment -->

Note: The shortcut for adding a comment is Ctrl + / on Windows, and Command + / for Mac users.

HTML Comments Examples #

Single-Line Comment in HTML

A single-line comment in HTML is used to comment on a single piece of code or note.

Example 1: This code demonstrates how to write single-line and inline comments in HTML.

<!DOCTYPE html>
<html>
<body>
    <!-- This is a heading tag -->
    <h1>Welcome to HTML Guide</h1>

    <!-- This is a single-line comment -->
    <h2>This is <!--example of--> an inline comment</h2>
</body>
</html>

Output:
None of the comments will be rendered in the browser.

Multi-Line Comment in HTML

Multi-line comments span multiple lines and can be useful for providing more detailed explanations or hiding large sections of code.

Example 2: This example demonstrates how to write multi-line comments in HTML.

<!DOCTYPE html>
<html>
<body>

    <!-- 
    This is a heading tag 
    -->
    <h1>HTML Comment Example</h1>

    <!-- 
    This is a 
    multi-line comment 
    -->
    <h2>This is an example of a multi-line comment</h2>
    
    <!-- 
    <button style="font-family: Sans-serif;">
       Click Me
    </button> 
    -->

</body>
</html>

Output:
None of the comments will be visible on the browser, and the commented-out button code will not be executed.

Want to learn HTML with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!

What are your Feelings

Leave your comment