Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Whitespace is a term that describes a class of characters that do not typically display on a screen or a page. This includes spaces, tabs, new lines, and a few other more obscure characters. Let's take look at how HTML handles whitespace. We'll start by making a working copy of whitespace.html. And I'm going to name this whitespace-working.html, and I am going to open it in my text editor. I'm also going to open in a browser so we'll just go ahead right now and open this in the browser.
And you see it just has a couple of lines of text and the title text example up at the top. And if we look in the HTML file we see there is our title tag on line 7 and these two paragraphs on line 13 and line 16. Now you'll notice that there is actually two lines of blank space between the paragraphs, on lines 14 and 15, and yet when you look at it in the browser there is really just one line of space between them. In fact, I can come in here and I can do that and put in a bunch of lines of space, I'll save that and reload in the browser, and you see it doesn't change at all.
So this is a hint of how HTML handles whitespace. You'll notice whitespace throughout this document. You see there is a blank space here. There is a blank line here. There is blank spaces in front of a lot of these tags so that they are indented, so that we have some structure in our document. And in fact I can just insert a whole bunch of spaces right here, when I save this and reload it, you'll notice nothing changes in the document. So HTML treats whitespace in a very special way. For the most part it takes as many sequential items of whitespace as you can throw at it, be they spaces or new lines or tabs, and it folds them all into one space just as if I had just done that.
It makes no distinction between vertical space and horizontal space, in other
words, new lines, spaces, tabs, are all treated exactly the same.
It also does a couple of other interesting things.
I am going to go ahead and close up some of the space here, and you'll notice
this space here between the opening tag and the first letter of the
tag and the first letter of theparagraph. In fact, I could put that on a different line and I could indent it and I can do the same over here, and it'll treat it exactly the same. In this case, at the beginning of a line of text, it actually removes all of that space as if there were there no space there whatsoever.
You'll notice in our document here, I am going to hit Reload, you'll notice that there is absolutely no space at all at the beginning of that paragraph, just the indent that's the normal default for the browser. You'll also notice that comments are treated as whitespace. I can come in here in the middle of this paragraph and I can put in a bunch of blank lines and I can put in a comment, and I save that in reload it and you'll notice that nothing changes in our document. Now there may be cases where you actually want the whitespace to display and let's just put in a bunch of whitespace here.
We'll save this, and I'm going to change this tag to say pre, P-R-E, so tag.
tag to say pre, P-R-E, sowe're pre instead of p. So pre stands for Pre-Formatted Text, and if I save this and reload it in the browser you'll notice that now our text is exactly as we formatted at there. All of those blank spaces are being displayed, and you'll also notice that the text is displayed in a fixed space font as opposed to the default proportional space font that you'll get with a
So if you actually want to be able to display the whitespace you have a way to do that. So HTML handles whitespace differently than you might be used to with a word processor or layout tools. Sequential whitespace is typically all folded into one space, and a special element called pre is provided to display whitespace if you need it.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98509 Viewers
61 Video lessons · 85804 Viewers
71 Video lessons · 69708 Viewers
56 Video lessons · 102013 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.