Like comments in CSS, adding comments to your HTML can help you write and organize the backend of your webpage.

You can leave notes to remind yourself where you left off in the build process. You can explain the intended functionality of a section of code, whether for the sake of another developer or your future self.  You can also communicate with other developers working simultaneously on the same code. You might leave a warning for them to only run a certain function at night because it takes a long time to execute. Or you might assign them a task or point out an error for them with a comment.

In short, commenting in HTML can help you work smarter and better when building, debugging, or redesigning a website. Let’s look more closely at what a comment is in HTML and then define what “commenting out” means in HTML.

Free Intro Guide to HTML & CSS [Download Now]

Here’s an example. Say you’re building a Bootstrap website with a team of developers. You want to leave a note reminding them that all Bootstrap buttons should use the primary modifier class so that they’re all the same color.

Here’s what your HTM might look likeL:

 

 

  <div class="container">

<h2>Button with modifier class</h2>

 

 <!-- Buttons should always have .btn-primary class -->

<button class="btn btn-primary" type="submit">Button</button>

</div>

Here’s the result on the front-end:

Bootstrap page rendered with heading and button but not HTML comment

Image Source

As you can see above, the comment is successfully hidden on the front end.

Now that we understand how to comment in HTML, let’s look at how to comment out.

Commenting out has two main purposes. One is debugging your code. You might comment out your first few lines of code, check if the error is still occurring, and keep repeating the process until the buggy code is isolated.

The second purpose has to do with version history. Since commenting out means the code will remain visible in the back end, it can be a way of showing different iterations of the code base for new developers who are just joining or have inherited the web project.

Let’s look at an example. Say I’m building out a page in Bootstrap: I have a navigation bar, a heading, two paragraphs, and a button. Maybe I preview my work and discover there’s a bug. In that case, I can comment out each element to isolate which section of the code contains the error.

Or maybe I run some A/B tests and discover that the button isn’t getting any clicks and I want to remove it. In that case, I could comment it out, leaving a note that a CTA button at the bottom page didn’t convert. Then, the next person who comes along and tries to optimize the conversion rate on the page will know to start with another button placement.

Here’s the HTML with no comments:

 

 

    <nav class="navbar navbar-expand-sm navbar-light bg-info">

  <a class="navbar-brand" href="#">Navbar</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarNavDropdown">

    <ul class="navbar-nav">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Features</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Pricing</a>

      </li>

        </div>

      </li>

    </ul>

  </div>

</nav>

    <div class="container">

    <h1>Hello, world!</h1>

     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>

     <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. </p>

    <button class="btn btn-primary" type="submit">Button</button>

     </div>

 

Here’s how it looks on the front end:

Bootstrap page with button and other elements

Image Source

To “comment out” the button,  I’ll simply wrap the button element with the appropriate tags, as shown below. The rest of the code will remain the same.

 

 

    <nav class="navbar navbar-expand-sm navbar-light bg-info">

  <a class="navbar-brand" href="#">Navbar</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarNavDropdown">

    <ul class="navbar-nav">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Features</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Pricing</a>

      </li>

        </div>

      </li>

    </ul>

  </div>

</nav>

    <div class="container">

    <h1>Hello, world!</h1>

     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>

     <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. </p>

   <!-- Button wasn’t converting so I removed in July <button class="btn btn-primary" type="submit">Button</button>-->

 

Everything on the front end will look the same, except for the button. You can see for yourself below.

Bootstrap page with button commented out

Image Source

Leaving Comments in Your HTML

Comments are another way you can “talk” to people in your code. You can add explanatory notes for other collaborators on a web project, or you can leave yourself notes reminding you to come back to a section or prioritize it during your next redesign. The best part? Comments will not appear on the front end of your site and they’re simple to master, even if you’re just getting started learning HTML and CSS.

New Call-to-action

 css introduction

Originally published Jul 23, 2020 7:00:00 AM, updated July 23 2020

Topics:

Bootstrap CSS