Sololearn blogHow To Add Comments In HTML?
time to read 4 min read

How To Add Comments In HTML?

Imagine that you’re writing a lengthy paragraph in HTML. That can be up to hundreds of lines of code. How do you keep track of specific functions or lines of code? Here is where the comments come into play. A comment is a piece of text or a section of text that is not part of the document itself. It provides additional information.

Have you ever wondered how to comment in HTML, or have you been wondering if you should even do it at all? If you’re new to HTML, rest assured, it’s not that hard! Comments are one of the few ways you can communicate with other developers who may be working on the same code. 

Comments…

  • Let you write short notes describing essential concepts, events, or additional information that can’t be put into words.
  • Help improve the readability of your code. They explain and clarify the code’s purpose.
  • Help other developers by communicating what they are doing while working on your project.

Learn How to Comment with Sololearn HTML Tutorial

Using comments is another way to “speak” to other programmers. You can leave notes encouraging you to revisit a part or give it a priority during your next redesign. You can provide explanatory notes for other contributors to a web project. 

To better understand these features, let’s first talk about HTML comments. What even are HTML code comments? After that, we’ll talk about how to comment in HTML code.

What is a Comment in HTML Code?

A comment in HTML is a block of text that explains the code. The HTML processor ignores this block. 

These comments are helpful for:

  • Other HTML programmers. 
  • Yourself! You can set notes for yourself in the code for future use. 

HTML allows comments without following any particular format

Comment Tag HTML

The source code can contain comments by using the comment tag in HTML. The browsers do not display comments. You can use comments to clarify your code, which will be useful when you change the source code. This is especially helpful if your code is complex.

 Comments in HTML start with <!– and end with –>.

 For example, <!– Your comment goes here –>

How Do You Insert a Comment in HTML?

To insert a comment in HTML, place the “<!╌ ╌>” tags around the code you want to hide. Using these tags, browsers will not render this code on the front end.

How to Comment a Line in HTML?

A single-line comment is a comment that spans one line.

It’s a very common feature in HTML. It’s a helpful way to organize your thoughts about a particular section of code. Single-line comments are valuable for identifying where a tag stops. This is helpful if you’re trying to locate a closing tag in a critical, complicated HTML document with a lot going on.

You can add single line comment in your code as:

<!DOCTYPE html>
<html>
  <body>
    <!-- Start -->
    <h1>Hello World</h1>
    <!-- Single line comment -->
    <h2>Single line comment </h2>
  </body>
</html>

How to Add Inline Comments?

Adding comments to a sentence or line of code is also possible.

The rest of the content inside the tag won’t be affected; only the text inside the!— –> will be commented out.

<!DOCTYPE html>
<html>
  <body>
    <p>I am
      <!--going to be--> a web developer
    </p>
  </body>
</html>

How to Add Multiple Line Comments in HTML

The syntax for adding multiple-line comments (!- ->)\ is essentially the same as what we use for single-line comments. As the second half of the comment (“->”) is appended where the intended comment lines in HTML end.

<!DOCTYPE html>
<html>
  <body>
    <!-- This is the heading tag -->
    <h1>Hello World</h1>
    <!-- This is multi-line comment -->
    <h2>This is multi-line comment</h2>
  </body>
</html>

Adding HTML Content Out Block

Using the comment tags in HTML, you can also comment out a complex or a long piece of HTML code to disable it:

<div>
  <p>This text is visible. Check the source code for multi-line comments.</p>
  <!--
HTML Content Out Block
-->
</div>

How to Comment in Style Tag?

A document can use the style tag to define style information. You specify how HTML elements are rendered in a browser with the <style> element.

Comments in CSS can be added using the /* tag, which is then closed off using */. 

Keyboard Shortcut for Adding HTML Comments

The shortcut is “Command /” for Mac users or “Control / “for Windows and Linux users.

Keep pressing the keys in the code editor to make a single-line comment. Afterward, you’ll see that your line is commented out. This will only work for single-line comments, as everything will be commented on that line. Commenting inline requires manual entry.

As you select and highlight all text or tags you want to remark, hold down the two keys to add multiple lines of comments. There will now be comments for each line you choose.

Tips for Writing HTML Comments

Although helpful, HTML comments should only be used when they would benefit the program. It’s not necessary to include comments to describe every function or to go into their detail. You should have the following tips in mind when composing HTML comments:

  • Don’t Restate Existing Code

Newbies’ most common mistake is writing a comment that says, “This is what I did.” Instead, tell people exactly what you did and why you did it. If you have a lot of code, don’t just restate it in your comment. Explain how each line of code works together. 

  • Don’t Explain Everything

Don’t include any extraneous information in your HTML comments. The more information you put in the comment, the less likely people will read it and understand what you are trying to say.

  • Don’t Write Complex Comments

HTML comments should be concise. They should not include any complex information. You should use easy and straightforward language that everyone can easily understand at a glance.

Now you should know how to comment in HTML! 

Use HTML comments to make your scripts easier to read…whether it’s future you or any other potential code readers. It’ll be easier for people to grasp the purpose of your code if you include comments throughout it.

Check out the Sololearn HTML Tutorial to learn more about HTML and how to create web pages, including your blog page. It includes many engaging activities and opportunities to practice writing actual HTML code.

Related blogposts