If you already know what "whitespace" is in HTML, how the browser treats it, and how the browser wordwraps, you can skip this lesson.
Lets's talk about whitespace. What the heck is that? No, it's not another name for Wall Street. Technically speaking, it's all the
stuff that's left over from the cartoon bubble when you take away Dilbert's clever quip. ;-)
&
nbsp; Actually, that's not far from the truth. In a text file (like your HTML web page) "whitespace" is whatever is left over after you remove all the printable characters. For example, in computer-ese, spaces, tabs, and sometimes end-of-line actions (carriage returns / line feeds) are considered "whitespace".
The web browser, as it parses (reads and interprets) the received HTML (web page) file, handles whitespace in the following way: wherever it encounters a stretch of it (be it one space, or 14 spaces intermixed with 10 tabs), it inserts ONE space. This may not make sense at first glance, but there's a lot of computer experience behind that decision. Take tabs, for example. Over the years, nobody has been able to agree on whether a tab is 4 spaces, 5 spaces, or 8 spaces. Hey, I know it's obvious to you and I, but we're relatively sane people. Battles have been fought over this issue, and newsgroups have been established to discuss it ad infinitum. If, for example, I build a web page on the premise that a tab equals 6 spaces, and I lay out my page carefully to be just as wide as my title heading, what happens when a browser that considers a tab to be 8 spaces encounters my web page? Exactly, it don'na fit! So the HTML eggheads said, "let's form a peace accord...", and they agreed that they would allow ONE space to be valid - that's all - and everything else has to be done explicitly, by some other means.
Unfortunately, nobody made a concrete decision about what to do with end-of-line actions (carriage returns / line feeds). They agreed to ignore it, and that was a good decision, because it turns out that different computer operating systems interpret it in different ways, and when you're transferring web pages all over the world, you don't know what kind of computer it will end up on. But they forgot to specify whether the "insert one space" rule applies to end-of-line actions. Therefore, some browsers do, and some don't. We'll see what problems this causes later.
Another cool feature of HTML is that you don't have to worry about "word-wrapping". Word-wrapping is an automatic function whereby the software makes sure a word doesn't get split up at the end of a line. In HTML, then, word-wrapping is the browser's responsibility, mainly because when you write your web page, you have no idea if the browser at the other end is going to have a 640 x 480 pixel display, or a 1280 x 1280 pixel display. If you don't know what size the display at the far end is going to be, how could you possibly know where to place an effective end-of-line action? The obvious benefit of all of this, for you the web page composer, is that you are freed of having to worry about it fitting on the page, and where to put line-breaks. You just type what you want to type, and make it look like you want it to look in the editor, just for editing's sake, and it comes out just fine at the other end regardless of where you put your line breaks and whitespace. [well, most of the time].
Let's look at some example source text, and demo at the result:
You never have to worry about word-wrapping in HTML, because the "browser" handles that at the receiving end of the document. However, HTML browsers ignore all carriage returns ("enters") and all spaces beyond one space. Tabs are ignored, also. This can present a problem if you want to use two spaces to begin a new sentence, or indent a line or two. There are tricky ways to do this, but we'll save that for another time. Incidentally, it's a good idea to turn on the "word-wrapping" feature in your text editor as you build your HTML file, even though they'll be ignored by the web browser, because it will make your source code more readable (unlike this example).
You never have to worry about
word-wrapping in HTML, because the "browser" handles that at the receiving end of the document. However, HTML browsers ignore all carriage returns ("enters")
and all spaces beyond one space. Tabs are
ignored, also. This can present a problem
if you want to use two spaces to begin a new sentence,
or indent a line or two. There are tricky ways to do this,
but we'll save that for another time. Incidentally, it's a good idea to turn on the "word-wrapping" feature in your text editor as you build your HTML file, even though they'll be ignored by the web browser, because it will make your source code
more readable (unlike this example).
See how nicely the browser "neatens" things? Cool, huh? Now, look at the first sentence, where it says "You never have to worry about word-wrapping
". In the source code there was an end-of-line action right between "<
CODE>about" and "word-wrapping
" but NO "space" (you can't tell just by looking at it... you'll have to trust me). Then, in the demo, if your browser inserted a space between "about
" and "aboutword-wrapping
".
For this reason, then, it's a good idea while composing HTML code, to make sure that there's an extra space after the last word on a line where you use an explicit "hard" end-of-line action. If you follow that rule, you don't have to worr
y about too many extra spaces showing up on the browser at the other end of the Internet, because (by the HTML rule) no more than ONE space will be inserted. Incidently, if your text editor software is automatically wrapping text for you, y
ou don't have to worry about this, because it will either insert a space automatically, or it won't place an "real" end-of-line action in the text file at all. You only have to deal with this abnormality when you, your-precious-little-self place a
n end-of-line action in the text. Incidentally, if this is too confusing, don't worry about it; an occasional missing space on an occasional web browser is not going to make the world stop turning. Relax...have a chocolate...
Overseer: Monty Northrup ...
... leave e-mail ...