As you first start authoring HTML you're probably going to notice what seems to
be a really curious behavior among browsers regarding your use of whitespace.
You see, no matter how much whitespace you put in your content,
your browser is going to, for
the most part, ignore everything after that first space of character.
So I've got the whitespace.htm from 0307 I'll put up in my browser and
you can see I have the sentence that says by default browsers will ignore any
white space after the first space.
To add additional white space you must use the non breaking space entities.
So you can see I've got the HTML character entity there for that, so
to kind of experiment around with that a little bit, I've got the same file opened
up in my code editor, and I am going to do just what I suggest,
I'm going to try it right here inside this paragraph between these two sentences.
I'm going to add a lot of white space.
All right.
So you can see there's a lot of white space between the first sentence and
the second sentence, even though they're in the same paragraph.
So if I save this, go back into the browser, nothing happens.
So within your code,
any amount of white space after that first character of y space is ignored.
And that's basically because a lot of code is written by people that know what
they're doing.
Some code is written by people that don't know what they're doin,g and
some code is written by machines.
And when machines are formatting code,
sometimes they'll just put empty space all over the place without really meaning to.
And so to guard against that,
HTML basically says you get one character of whitespace, that's it.
So if you want to add additional whitespace,
we use a character known as a non breaking space.
So again, if I was going back into that paragraph, I could use the character
entity Ampersand NBSP and semi colon.
And just to kind fo show you want this does, I copy this, and
I'm just going to paste it a few times.
Maybe four times.
So we have the initial white space and
then we have one, two, three, four non breaking spaces.
So if I save that.
Go back over to the browser,
now you can see that we're getting a little additional white space.
Now that works, and I know a lot of people that rely on this for
visual formatting, I want to caution you against that.
That is not what the non breaking space is for, so in this day and
age we have cascading style sheets that control all of our visual formatting.
So, if I need a little extra indentation, if I need some space between certain
characters or entities, CSS gives me the capabilities of doing that.
What the non breaking space is for is just that, to create a non breaking space.
Let me get rid of all that stuff.
And if I go back to the browser,
I can see that I have the text Formula One right there.
If I resize the browser.
Notice that the word one breaks as I resize it, as you would imagine.
But if I go in my code, and I scroll down, and between the formula one I
replace the default white space with a non-breaking space character, now,
if I save that and go back into my text, if I resize the browser.
Notice that Formula and One won't break separately anymore.
It breaks as one individual character.
So that's really what a non-breaking space is for.
It's okay to occasionally use it to kick in maybe a little bit of
extra white space.
So be very careful about how you use it and
that you don't use it to create false margins, indents, or tabs.
That type of visual formatting is the responsibility of CSS, not HTML.