How to Comment & Comment Out in HTML

Likecomments in CSS，向您的评论添加评论HTMLcan 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.

多亏了评论标签，您可以留下笔记以提醒自己在构建过程中停止的位置。您可以解释一部分代码的预期功能，无论是为了另一个开发人员还是未来的自我。

您还可以与其他代码同时工作的其他开发人员进行通信。您可能会警告他们只能在晚上运行某个功能，因为执行时间需要很长时间。或者，您可以为他们分配任务，或者通过评论指出错误。

In short, commenting in HTML can help you work smarter and better when building, debugging, orredesigning a website. Let's look at an example.

HTML评论示例

说您正在建造一个Bootstrap website与开发人员团队。您想留下一张笔记，提醒他们所有Bootstrap buttonsshould 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 PenxxgWwoaby Christina Perricone (@hubspot) onCodePen.

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. 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.

让我们看看一个例子。说我正在Bootstrap中构建页面：我有一个navbar, heading, paragraph, and button.

这是HTML以及页面在前端的外观：

See the PenBootstrap page with navbar and buttonby Christina Perricone (@hubspot) onCodePen.

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.

也许我run some A/B testsand 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.

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 PenyLgKeYzby Christina Perricone (@hubspot) onCodePen.

Leaving Comments in Your HTML

评论是您可以与代码中的人“交谈”的另一种方式。您可以在Web项目中为其他合作者添加解释性注释，也可以将自己的笔记提醒您在下一个重新设计期间回到部分或优先考虑该注释。最好的部分？评论不会出现在您网站的前端，即使您刚刚开始，它们也很容易掌握学习HTML和CSS.