WhiteSpace in HTML

Transcript

In the last lesson, we used the insert tag and delete tag to show the edits were made to the page. In this lesson, we are going to learn how to have perfect spacing between lines of text on a page.  I want to introduce you to the concept of “Whitespace Collapse”. I’ll show you how this work between words on a line of text, and then I’ll show you how this works between lines of text.

Do you ever notice if you put more than one space between two words in your editor, that space does NOT show up in your display on your browser.  This is called Whitespace collapse. Just to be clear, “Whitespace Collapse” is not a tag, it’s just something all browsers do with code.

Your browser looks for any extra spaces in your code and removes them. This happens between words of code on a line and between lines. No matter how many spaces you put after a line, the browser will still collapse whitespace between words and lines. But there are many times when you want to put a text in a new line on your website. This is also known as a “Line Break”. 

This needs a <br> or break tag right after the text where you want the new line to appear.  In the code cat’s poem. The new lines show up just like you wanted.

So just to review Line Break tag – BR – helps you get around Whitespace Collapse between lines on your website, and give you full control of your whitespace.

This was a quick lesson. Lets push on to the next where we learn about how browsers render elements on a page.