In this article, we are going to discuss, how you can hide HTML tags from inspect element. It prevents the HTML tags from rendering in the browser so they won’t be visible in “View page source” or “inspect element”.
When developing a web application, sometimes you write a code to do something. But after some time, you find a better algorithm for that solution, and your comment on the previous code, and apply the new algorithm.
We comment on the code because we feared that we might need that code somewhere else in the project and we do not want to waste our time and effort we put into writing that code.
The only problem with commenting on the code is that the HTML tags created with that code are still visible from inspect element. They might not be sensitive but sometimes you just do not want it to show to the user. Someone with good coding knowledge can see your commented HTML codes.
Demonstration
I am going to create a loop from 1 to 10 and create a paragraph in each iteration. You might be displaying data from the database using foreach or while loop and might be displaying in tables, cards, or any other layout. After that, I am going to comment on the paragraph inside the loop.
<?php for ($a = 1; $a <= 10; $a++) { ?>
<!-- <p>I am commented <?php echo $a; ?></p> -->
<?php } ?>
<p>I am normal.</p>
Right now, you will only see the “I am normal” text, but if you right-click on the empty area of your screen and click “View page source”, you will see the commented paragraphs.
To prevent those commented paragraphs to appear in “page source” or “inspect element”, simply wrap the code you don’t want to display in the if condition. And set the condition to never be true.
<?php for ($a = 1; $a <= 10; $a++) { ?>
<?php if (false) { ?>
<p>I am commented <?php echo $a; ?></p>
<?php } ?>
<?php } ?>
<p>I am normal.</p>
If you open the page source now, you will no longer see the commented paragraphs. That is how you can hide HTML from inspect element.
