Use Code Comments to Temporarily Remove Elements from an HTML5 Web Page

Edited by Grimm, Amanda, Eng

You are watching VisiHow. In this tutorial, we are going to explain to you how you can use code commenting to remove sections of code from an HTML5 web page so that they are not shown when the page is output.

Was this helpful? Yes | No| I need help


Ad

Steps

  1. 1
    Click on Notepad to launch it
    .
    In this demonstration, we have it pinned to the taskbar, so we will mouse down to the bottom of the screen and click the Notepad icon there.
    Advertisement
    Was this step helpful? Yes | No| I need help
  2. 2
    Left-click and hold a .html or .htm file
    .
    We have one that we have been using for our HTML5 VisiHow tutorials, called "visi.html".
    Advertisement
    Was this step helpful? Yes | No| I need help
  3. 3
    Drag the file over Notepad
    .
    Was this step helpful? Yes | No| I need help
  4. 4
    Drop the file and click inside the Notepad window to activate it
    .
    Was this step helpful? Yes | No| I need help
  5. 5
    Find the code comments
    .
    We have a couple already. They're just comments. Anything within the comment code will not display when the page is opened in a browser. What we're going to do now is show how to add a code comment that will remove a piece of code from the page.
    Was this step helpful? Yes | No| I need help
  6. 6
    Place the cursor before the code for Heading 2 and two carriage returns
    .
    This is done by pressing the Enter or Return key on the keyboard, and it will move the line down. We like to double-space so that it is very clear what we're doing in this step.
    Was this step helpful? Yes | No| I need help
  7. 7
    Enter the standard
    .
    We will type "<!&dash;&dash;".
    Was this step helpful? Yes | No| I need help
  8. 8
    Add the comment
    .
    We will type, "Remove this line until reviewed".
    Was this step helpful? Yes | No| I need help
  9. 9
    Place the cursor at the end of what will be removed
    .
    It can be as much code as we want. we will place ours at the end of the code for "Para 2", which is the paragraph nested under "Heading 2".
    Was this step helpful? Yes | No| I need help
  10. 10
    Add one carriage return
    .
    Was this step helpful? Yes | No| I need help
  11. 11
    Close the comment
    .
    Type, "&dash;&dash;>".
    Was this step helpful? Yes | No| I need help
  12. 12
    Add another carriage return
    .
    Was this step helpful? Yes | No| I need help
  13. 13
    Review the code that has been commented out
    .
    Anyone reading this will note that this should not appear. Each code comment is an indicator to someone reading the code. It tells them what we intended to do, and what we were trying to do, or who we are and what we're doing. There are other ways to say who we are, but we will discuss those in later tutorials. This is the simple way to do it. "Heading 2" will no longer appear on our page. Let's check this in a browser.
    Was this step helpful? Yes | No| I need help
  14. 14
    Click "File"
    .
    Was this step helpful? Yes | No| I need help
  15. 15
    Click "Save"
    .
    Was this step helpful? Yes | No| I need help
  16. 16
    Double-click the file from the desktop
    .
    Was this step helpful? Yes | No| I need help
  17. 17
    View the page
    .
    We have "Heading 1" and we have "Heading 3". There is no more "Heading 2" or "Para 2". It's all gone. Close the browser and let's look back at Notepad.
    Was this step helpful? Yes | No| I need help
  18. 18
    Click on Notepad to make the window active
    .
    We can see that "Heading 2" is still here, it has just been made invisible.
    Was this step helpful? Yes | No| I need help
  19. 19
    Delete the comment code
    .
    Remember to delete both halves, the opening and closing. We will reformat the page in a minute.
    Was this step helpful? Yes | No| I need help
  20. 20
    Click "File"
    .
    Was this step helpful? Yes | No| I need help
  21. 21
    Click "Save"
    .
    Was this step helpful? Yes | No| I need help
  22. 22
    Double-click the file on the desktop
    .
    Was this step helpful? Yes | No| I need help
  23. 23
    View the web page
    .
    Our "Heading 2" and "Para 2" are back, right where they were. Close the browser. This is important because if we're working with other people, or if we are working in the role of designer and are not actually filling in things, people might want to see things one at a time. Someone might want to see the page without images, or with images. It's very easy to go in and temporarily block pieces of code by commenting them out. When done, we won't have to rewrite the code, or copy and paste and save it elsewhere, which can be a big mess on a large website. This makes it nice and easy. We still have our small website. Let's put the formatting back.
    Was this step helpful? Yes | No| I need help
  24. 24
    Remove the extra carriage returns that were added for commenting
    .
    Here we are. The page is exactly back the way it was before.
    Was this step helpful? Yes | No| I need help
  25. 25
    Click "File"
    .
    Was this step helpful? Yes | No| I need help
  26. 26
    Click "Save"
    .
    Was this step helpful? Yes | No| I need help
  27. 27
    Double-click the .html file to open it in a browser
    .
    Was this step helpful? Yes | No| I need help
  28. 28
    View the page when it loads
    .
    Always check code to ensure everything is displaying as intended before ending working on it. If there is an error, it will be easier to catch now, while it is fresh on our minds.
    Was this step helpful? Yes | No| I need help
  29. 29
    Now we're done this tutorial
    .
    It's that easy to comment out sections of a web page. It's a great way to do things. Plus, if you have something that's not working, you can remove it one item at a time until you find the one that isn't working, and then fix it. Add your comments and questions to the comments section. Let us know what else you want to know. This is all about HTML5 and helping you learn how to make your own HTML5 web pages from the ground up. Thanks for choosing VisiHow. Have a great day, and we will see you in our other tutorials.
    Was this step helpful? Yes | No| I need help
    Advertisement

Video: Use Code Comments to Temporarily Remove Elements from an HTML5 Web Page

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: Amanda, Grimm

Share this Article:

Thanks to all authors for creating a page that has been read 115 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