I know, I know – the picture above is a fraud. It does not show comments in HTML but comments in JavaScript. While comments are such a vital way to document code in various different languages, especially with HTML developers tend to disregard them almost as much as the latest Cats movie. So let’s do something about that ?

Comment out your h1 element and your p element, but not your h2 element.

freeCodeCamp

Well, that’s an oddly specific task. And while it is important to know that you can hide elements including its content from the user by commenting out HTML, it is equally – if not more – important to understand, that comments can be used for all kinds of useful things. Georgie Luhur formulated five different reasons why comments are so important:

  • Comments can help maintain consistency
  • Comments facilitate understanding
  • Commenting can also assist with hotfixes or quick fixes
  • Comments help speed up the development process
  • Comments facilitate more efficient collaboration
  • Comments help a lot of people

Read his post on sitepoint.com, it’s a good read!

But let’s rise to the challenge and finish this daunting task ? The following is given:

<!--
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
-->

As indicated in the description, we need to let the <h1> headline element as well as the <p> paragraph element commented out while making the <h2> headline element visible to the user. The following should do the trick:

<!--
<h1>Hello World</h1>
-->
<h2>CatPhotoApp</h2>
<!--
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
-->

Summa summarum: this task is about removing the HTML commenting tags of one element, while retaining the comments for the other two elements. Therefore, we need to add the ending tag of HTML comments –> after the <h1> headline as well as add the beginning tag <!– after the <h2> headline element. And that’s it 🙂

Photo by Luca Bravo on Unsplash