6 minutes read
CHEAT SHEET: How To Comment In HTML

CHEAT SHEET: How To Comment In HTML

How to Comment in HTML

By properly employing HTML comments, you can explain the choices you made to a colleague reviewing your code and make necessary adjustments or bugs that need fixing easier for others to see. This is an essential “best practice” among experienced HTML programmers, and one that you’ll need to master to work as part of a team or bring people on board your own projects. So how do you do it? Let’s walk through the basics and essential steps you will need.

Comments are explanatory statements that you can include in the code to explain what the code is doing.

The browser does not display comments, but they help document the HTML and add descriptions, reminders, and other notes.

Comments in HTML start with <!-- and end with --> 

<!-- Your comment goes here -->

HTML comments are visible to anyone that views the page source code, but are not rendered when the HTML document is rendered by a browser.

For Example:

<html>

    <head>

        <title>first page</title>

    </head>

    <body>

        <p>This is a paragraph </p>

        <hr />

        <p>This is a paragraph </p>

        <!-- This is a comment →

    </body>

</html> 

Try It Yourself 

CHEAT SHEET How To Comment In HTML by SoloLearn

Result:

As you can see, the comment is not displayed in the browser.

There is an exclamation point (!) in the opening tag, but not in the closing tag.

Comments can be written anywhere, and can be repeated any number of times throughout the code. 

Adding comments to your code is a good practice. It facilitates a clear understanding of the code for you and for others who read it.

Let’s look at a real-life use case of HTML comments!

Throughout our HTML Tutorial we build a HTML Blog page, featuring many HTML tags and elements that you learn in the course. 

Check out the code for the header and About Me sections:

<!DOCTYPE html>

<html>

    <head>

        <title>My Blog</title>

        <link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">

    </head>

    <body>

        <!-- header start -->

        <div id="header" class="section">

            <img alt="" class="img-circle" src="https://code.sololearn.com/Icons/Avatars/0.jpg">

            <p>Alex Simpson</p>

        </div>

        <!-- header end -->

       

        <!-- About Me section start -->

        <div class="section">

 

Try It Yourself 

As you can see, there are comments marking the start and end of the header section, making it easier to navigate through the code and find the section/part we are interested in.

Click on the Try It Yourself link to play around with the whole code and see the resulting output of the Blog page. 

Now that you know how to leave clear and easily understood comments in HTML, you’ll have a much easier time working as part of a coding team on projects. Or, if you are hiring programmers to work on your own idea, it will be easier to get them up to speed quickly! If you want to learn more about HTML and how to build web pages, including your own blog page, check out the SoloLearn HTML Tutorial, which includes a series of entertaining exercises, along with plenty of hands-on practice in writing actual HTML code.