Add Comments to HTML5 Code to Properly Document Functions and Intent
Edited by Grimm, Amanda, Eng, VC
You're watching VisiHow. In this tutorial, we are going to show you how to add comments to your HTML5 code to help people understand what you are doing, or what the intent of a general area is.
To get started, open up Notepad. Ours is pinned to the taskbar.
Left-click and hold a working .html file. Ours is called "visi.html".
Drag the file over the Notepad window.
Release to drop the code into Notepad. Note that we have written and formatted some code. However, there is no commenting here. Today, we're going to show how to add commenting. Let's start directly after the doctype.
Place the cursor at the end of the doctype code. For us, this is line 1.
Add three carriage returns. A carriage return is added by tapping the Enter or Return key.
Click on the second blank line. This is line three, the middle blank line.
Open the comment. We will type, "<!‐‐". That is one opening arrow bracket, one exclamation point, and two en dashes.
Hit the space bar once, and type in a comment. We can type anything we want. For example, we can say "Page created by VisiHow".
Close the comment. This is done by adding one space and then typing, "‐‐>". That is two en dashes followed by a closing arrow bracket. Let's add another comment.
Place the cursor between the head section and the body section. Add three carriage returns.
Place the cursor on the second blank line after the head section. We could add a reminder for anyone else who might want to later look at our code.
Open the comment. Again, we type, "<!‐‐".
Add one space and then the comment text. We will type, "Make sure to be helpful".
Close the comment. As before, we hit the space bar once and then type, "‐‐>". Now we have two comments in our code. They will tell people something about our page. They usually stand out, because they all start with the exclamation point, and very little in an HTML5 page does that.
Double-click the file from the desktop.
View the contents of the page. Notice that we cannot see any of the comments we added. It is hidden code. It's just there for people who are editing or looking at the code of the page. That's not something that people visiting the website see. When we visit a website, such as VisiHow.com, we aren't looking at the code, we're looking at the end result of that code. However, there will be comments in code, and there are comments in our own code. They help explain things.
Close the browser and Notepad.
This concludes our tutorial on how to add comments to your HTML5 code to make it easier for someone else to understand what you were trying to do. If you have questions, comments, or suggestions, let us know in the section below. Otherwise, thanks for watching VisiHow, and have a great day.
Video: Add Comments to HTML5 Code to Properly Document Functions and Intent
Recent edits by: Eng, Amanda, Grimm