Whitespace in HTML

Intro

One thing to keep in mind when writing HTML is that the browser will ignore extra whitespace in your code.

Whitespace in this case means blank lines or extra spaces in your text.

Steps

Extra blank lines

As an example, try adding extra blank lines between these paragraph elements by pressing Enter.

<p>This is a paragraph.</p>



<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et aliquid veritatis voluptates exercitationem fugit. Distinctio dolores impedit magni corporis blanditiis dignissimos quas iusto vero, facere vitae voluptatibus nemo dolor earum?</p>

If you save and look at the preview, everything still looks the same. This is a good thing, because you can use blank lines to separate sections of code without worrying about them changing the way the web page looks.

Extra spaces

You can also add extra spaces between words without affecting how the web page looks.

Try adding some extra space between words in the first paragraph element.

<p>This   is   a   paragraph.</p>

The paragraph should still look the same in the preview. Now this second feature isn’t really something you’ll take advantage of, it’s just something to be aware of.

So that’s how you can use whitespace in HTML.

Final code

If you’ve followed all of the steps so far, this is the code that should be in between the body tags.

<!-- This is a comment -->
<p>This   is   a   paragraph.</p> <!-- This is also a comment -->



<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et aliquid veritatis voluptates exercitationem fugit. Distinctio dolores impedit magni corporis blanditiis dignissimos quas iusto vero, facere vitae voluptatibus nemo dolor earum?</p>