Understanding why some text is hidden when viewing website source code

I'm trying to learn a little more about properly securing a website. I know the basics, but I'm taking a course at a college... and it's basically all theory (like: "don't share your passwords kids!" instead of "let me show you how to properly do XYZ")

So, I'm aware that PHP doesn't show up in the Source Code, but you will still see the HTML output. For Example: I won't see: <?= "Hello"; ?> I'll just see Hello

I've recently come across a website where there is a large chunk of data that can't be seen in the Source Code.

If I view the Source Code, I basically something like this: <div class="SuperTopSecretStuff"></div> Instead of:

<div class="SuperTopSecretStuff">
   <div class="Something">ABC</div>
</div>

Note: This isn't an issue of expand/collapse. The inner html is literally not there. However - if I save the website as a local file on my computer and open it up, contents of "SuperTopSecretStuff" is now visible.

So, I'm curious to know the security and the reverse security of this process:

1. What do I need to start doing to make "chunks" of data "invisible" in the source code (as I mentioned, clearly there is still a way for the user to see this data, but they would have to manually save the file to their hard drive and open it up)
2. Or... once I learn this method, is there another way the user could access this data?