Article Edit Discuss

Add Comments to HTML5 Code to Properly Document Functions and Intent

Edited by Grimm, Amanda, Eng, VC

3 Parts:

Steps

Video: Add Comments to HTML5 Code to Properly Document Functions and Intent

Comments

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.

Steps

1
To get started, open up Notepad
.
Ours is pinned to the taskbar.

Was this step helpful? Yes | No| I need help
2
Left-click and hold a working .html file
.
Ours is called "visi.html".

Was this step helpful? Yes | No| I need help
3
Drag the file over the Notepad window
.
Was this step helpful? Yes | No| I need help
4
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.

Was this step helpful? Yes | No| I need help
5
Place the cursor at the end of the doctype code
.
For us, this is line 1.
Was this step helpful? Yes | No| I need help
6
Add three carriage returns
.
A carriage return is added by tapping the Enter or Return key.

Was this step helpful? Yes | No| I need help
7
Click on the second blank line
.
This is line three, the middle blank line.
Was this step helpful? Yes | No| I need help
8
Open the comment
.
We will type, "<!‐‐". That is one opening arrow bracket, one exclamation point, and two en dashes.

Was this step helpful? Yes | No| I need help
9
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".
Was this step helpful? Yes | No| I need help
10
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.
Was this step helpful? Yes | No| I need help
11
Place the cursor between the head section and the body section
.
Add three carriage returns.
Was this step helpful? Yes | No| I need help
12
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.
Was this step helpful? Yes | No| I need help
13
Open the comment
.
Again, we type, "<!‐‐".
Was this step helpful? Yes | No| I need help
14
Add one space and then the comment text
.
We will type, "Make sure to be helpful".
Was this step helpful? Yes | No| I need help
15
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.
Was this step helpful? Yes | No| I need help
16
Click "File"
.
Was this step helpful? Yes | No| I need help
17
Click "Save"
.
Was this step helpful? Yes | No| I need help
18
Double-click the file from the desktop
.
Was this step helpful? Yes | No| I need help
19
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.
Was this step helpful? Yes | No| I need help
20
Close the browser and Notepad
.
Was this step helpful? Yes | No| I need help
21
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.
Was this step helpful? Yes | No| I need help