Add Comments to HTML5 Code to Properly Document Functions and Intent

Edited by Grimm, Amanda, Eng, vc and 1 other

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.

Add comments to HTML5 code to properly document functions and intent.mp4-canvas137 010667.jpg

Ad

Steps

  1. 1
    To get started, open up Notepad.
    Ours is pinned to the taskbar.
    Add comments to HTML5 code to properly document functions and intent.mp4-canvas20 436895.jpg
    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".
    Add comments to HTML5 code to properly document functions and intent.mp4-canvas25 927861.jpg
    Advertisement
    Was this step helpful? Yes | No | I need help

  3. 3
    Drag the file over the Notepad window.
    Add comments to HTML5 code to properly document functions and intent.mp4-canvas27 385874.jpg
    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.
    Add comments to HTML5 code to properly document functions and intent.mp4-canvas29 178843.jpg
    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.
    Add comments to HTML5 code to properly document functions and intent.mp4-canvas42 565784.jpg
    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.
    Add comments to HTML5 code to properly document functions and intent.mp4-canvas46 138744.jpg
    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.
    Add comments to HTML5 code to properly document functions and intent.mp4-canvas47 199735.jpg
    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.
    Add comments to HTML5 code to properly document functions and intent.mp4-canvas53 260697.jpg
    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".
    Add comments to HTML5 code to properly document functions and intent.mp4-canvas65 230621.jpg
    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.
    Add comments to HTML5 code to properly document functions and intent.mp4-canvas66 416615.jpg
    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.
    Add comments to HTML5 code to properly document functions and intent.mp4-canvas70 383538.jpg
    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.
    Add comments to HTML5 code to properly document functions and intent.mp4-canvas71 512531.jpg
    Was this step helpful? Yes | No | I need help

  13. 13
    Open the comment.
    Again, we type, "<!‐‐".
    Add comments to HTML5 code to properly document functions and intent.mp4-canvas76 55052.jpg
    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".
    Add comments to HTML5 code to properly document functions and intent.mp4-canvas82 000488.jpg
    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.
    Add comments to HTML5 code to properly document functions and intent.mp4-canvas85 05147.jpg
    Was this step helpful? Yes | No | I need help

  16. 16
    Click "File".
    Add comments to HTML5 code to properly document functions and intent.mp4-canvas104 805372.jpg
    Was this step helpful? Yes | No | I need help

  17. 17
    Click "Save".
    Add comments to HTML5 code to properly document functions and intent.mp4-canvas105 404389.jpg
    Was this step helpful? Yes | No | I need help

  18. 18
    Double-click the file from the desktop.
    Add comments to HTML5 code to properly document functions and intent.mp4-canvas106 91136.jpg
    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.
    Add comments to HTML5 code to properly document functions and intent.mp4-canvas110 764357.jpg
    Was this step helpful? Yes | No | I need help

  20. 20
    Close the browser and Notepad.
    Add comments to HTML5 code to properly document functions and intent.mp4-canvas146 420139.jpg
    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

    Advertisement

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

Comments

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




Grimm
Featured Author
811 Articles Started
3,555 Article Edits
154,415 Points
Grimm is a featured author with VisiHow. Grimm has achieved the level of "Colonel" with 154,415 points. Grimm has started 811 articles (including this one) and has also made 3,555 article edits. 2,059,000 people have read Grimm's article contributions.
Grimm's Message Board
Grimm: Hi, my name is Grimm.
Grimm: Can I help you with your problem about "Add Comments to HTML5 Code to Properly Document Functions and Intent"?
 

Article Info

Categories : Software

Recent edits by: vc, Eng, Amanda

Share this Article:

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

Do you have a question not answered in this article?
Click here to ask one of the writers of this article
x

Thank Our Volunteer Authors.

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