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.


Steps

  1. 1
    To get started, open up Notepad
    .
    Ours is pinned to the taskbar.
    Advertisement
    Was this step helpful? Yes | No| I need help
  2. 2
    Left-click and hold a working .html file
    .
    Ours is called "visi.html".
    Advertisement
    Was this step helpful? Yes | No| I need help
  3. 3
    Drag the file over the Notepad window
    .
    Was this step helpful? Yes | No| I need help
  4. 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. 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. 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. 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. 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. 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. 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. 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. 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. 13
    Open the comment
    .
    Again, we type, "<!‐‐".
    Was this step helpful? Yes | No| I need help
  14. 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. 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. 16
    Click "File"
    .
    Was this step helpful? Yes | No| I need help
  17. 17
    Click "Save"
    .
    Was this step helpful? Yes | No| I need help
  18. 18
    Double-click the file from the desktop
    .
    Was this step helpful? Yes | No| I need help
  19. 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. 20
    Close the browser and Notepad
    .
    Was this step helpful? Yes | No| I need help
  21. 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

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

If you have problems with any of the steps in this article, please ask a question for more help, or post in the comments section below.

Comments

VisiHow welcomes all comments. If you do not want to be anonymous, register or log in. It is free.

Article Info

Categories : Software

Recent edits by: Eng, Amanda, Grimm

Share this Article:

Thanks to all authors for creating a page that has been read 606 times.

x

Thank Our Volunteer Authors.

Would you like to give back to the community by fixing a spelling mistake? Yes | No