EasyCode365EasyCode365

Comments and whitespace

Welcome to "HTML Foundations"! Today, we are going to explore two "invisible" superheroes of web development: comments and whitespace. These concepts won't change the colorful designs your visitors see on the screen, but they will make your life as a coder incredibly much easier. Let's dive in!

What is an HTML Comment?

A comment is a special piece of text in your code that the web browser completely ignores. To create one, you simply wrap your text in a special set of characters.

You start the comment with <!-- and you finish it with -->.

Here is what a comment looks like when placed between two paragraph tags:

Can edit
<p>Welcome to my website!</p>

<!-- This is a secret comment just for me! -->

<p>Here is my second paragraph.</p>

Why Use Comments?

You might be wondering why you would write code that no one sees. There are two major reasons:

  • Leaving notes: Think of comments like sticky notes for your code. You can leave handy reminders for your future self, or explain how a tricky piece of code works so that your teammates can understand it later.
  • Turning off code: If you are testing your website and trying to track down an error, you can temporarily hide a piece of code by turning it into a comment. Developers call this "commenting out" code. Once you fix the error, you can simply delete the comment characters to turn the code back on!

The Browser's Secret

Here is a fun secret: when a normal visitor looks at your website, the browser perfectly hides all of your comments. They will never show up on the actual webpage.

However, your comments are not perfectly secure. Anyone visiting your site can right-click their mouse and use the "View Source" or "Page Source" tool to peek behind the scenes at your raw code. Because anyone can read this hidden file, you should never put passwords or sensitive information inside an HTML comment!

Whitespace Collapse

When you are typing an essay in a normal word processor, pressing the "Spacebar" or "Enter" key moves your text across the screen. HTML does not work this way.

Web browsers use a rule called whitespace collapse. This means the browser essentially ignores extra blank spaces and empty lines. If you hit the "Spacebar" or "Enter" key 50 times between two words in your HTML file, the browser will squash all of that empty space down into just a single, normal space on the screen.

A Quick Analogy: Imagine packing a fluffy winter coat into a vacuum seal bag. No matter how much puffy air (extra spaces) is inside the coat, the vacuum (the web browser) will suck it all out until only the solid coat (your text) remains.

Why do browsers do this? It allows you to use as many spaces and empty lines as you want to organize your code file and make it easy to read, without accidentally messing up the layout of your final webpage.

Summary

You are doing a great job! Let's quickly review what we learned:

  • Comments (<!-- -->) are invisible sticky notes for you and your fellow developers.
  • You can use comments to safely and temporarily turn off code while testing.
  • Visitors cannot see comments on the page, but they can still find them using the "View Source" tool.
  • Browsers squash extra spaces and blank lines into a single space, a helpful rule known as whitespace collapse.