How To Create A Blog Layout In Html

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

You can add comments to explain your code, which will make it easier to edit in the future or to work with other developers. You can also use comments to simplify your debugging efforts.

Let's look more closely at what a comment is in HTML and then define what "commenting out" means in HTML.

Download Now: Free Intro Guide to HTML & CSS

What's a comment in HTML?

In HTML, a comment is text enclosed within < !╌ ╌> tags. This syntax tells the browser that they are comments and should not be rendered on the front end.

Thanks to the comments tag, 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 at an example.

HTML Comment 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 HTML might look like, as well as the result on the front end:

See the Pen xxgWwoa by Christina Perricone (@hubspot) on CodePen.

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.

How to Comment Out in HTML

To "comment out" in HTML, simply place the < !╌ ╌> tags around the code you want to hide. These tags will tell browsers not to render this code on the front end.

Commenting out has two main purposes. One is debugging your code. Upon discovering an error, 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 navbar, heading, paragraph, and button.

Here's the HTML and how the page looks on the front end:

See the Pen Bootstrap page with navbar and button by Christina Perricone (@hubspot) on CodePen.

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.

Commented Out Code

To "comment out" a button — or any HTML element— simply wrap the element in the< !╌ ╌> tags. Everything between those tags will not be shown on the front end.

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

The rest of the code will remain the same. Everything on the front end will also look the same, except for the button. You can see for yourself below.

See the Pen yLgKeYz by Christina Perricone (@hubspot) on CodePen.

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