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

Edited by Grimm, Amanda, Eng, Anonymous

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

Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas100 568.jpg

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.
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas19 854864.jpg
    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".
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas22 12987.jpg
    Advertisement
    Was this step helpful? Yes | No | I need help

  3. 3
    Drag the file over Notepad.
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas27 54582.jpg
    Was this step helpful? Yes | No | I need help

  4. 4
    Drop the file and click inside the Notepad window to activate it.
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas30 406804.jpg
    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.
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas34 636763.jpg
    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.
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas50 235576.jpg
    Was this step helpful? Yes | No | I need help

  7. 7
    Enter the standard.
    We will type "<!&dash;&dash;".
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas55 502512.jpg
    Was this step helpful? Yes | No | I need help

  8. 8
    Add the comment.
    We will type, "Remove this line until reviewed".
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas63 124445.jpg
    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".
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas67 285417.jpg
    Was this step helpful? Yes | No | I need help

  10. 10
    Add one carriage return.
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas67 798415.jpg
    Was this step helpful? Yes | No | I need help

  11. 11
    Close the comment.
    Type, "&dash;&dash;>".
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas72 957384.jpg
    Was this step helpful? Yes | No | I need help

  12. 12
    Add another carriage return.
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas74 557376.jpg
    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.
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas101 875214.jpg
    Was this step helpful? Yes | No | I need help

  14. 14
    Click "File".
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas103 986185.jpg
    Was this step helpful? Yes | No | I need help

  15. 15
    Click "Save".
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas104 572183.jpg
    Was this step helpful? Yes | No | I need help

  16. 16
    Double-click the file from the desktop.
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas105 772177.jpg
    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.
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas113 094134.jpg
    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.
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas119 632098.jpg
    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.
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas122 726081.jpg
    Was this step helpful? Yes | No | I need help

  20. 20
    Click "File".
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas128 486047.jpg
    Was this step helpful? Yes | No | I need help

  21. 21
    Click "Save".
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas129 196043.jpg
    Was this step helpful? Yes | No | I need help

  22. 22
    Double-click the file on the desktop.
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas130 949034.jpg
    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.
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas135 17403.jpg
    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.
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas181 530748.jpg
    Was this step helpful? Yes | No | I need help

  25. 25
    Click "File".
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas186 628694.jpg
    Was this step helpful? Yes | No | I need help

  26. 26
    Click "Save".
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas186 914692.jpg
    Was this step helpful? Yes | No | I need help

  27. 27
    Double-click the .html file to open it in a browser.
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas189 917672.jpg
    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.
    Use code comments to temporarily remove elements from an HTML5 webpage.mp4-canvas196 072659.jpg
    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

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,055,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 "Use Code Comments to Temporarily Remove Elements from an HTML5 Web Page"?
 

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 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