One of the first challenges that a Web designer has when building a Web page is that Web pages don't handle white space characters the same way that word processors do. But once you understand how white space works on the Web, things will be much easier.
White space refers to the empty spaces in a design. In HTML there are three characters that act as white space:
- space
- tab
- carriage return (line feed)
White Space in HTML Collapses
When you write your HTML, you can add any number of these white space characters into your HTML. But when you view that HTML in a Web page - all but one disappear! This is very different from a word processor.
In a word processor if you hit your space bar 10 times, the pointer moves over 10 spaces, and text begins 10 spaces from the preceding text. But if you paste that same text into an HTML document, and view it in a Web browser, only 1 space appears. Try it for yourself, type the following into your HTML document, be sure to include all the spaces, and then view it in your Web browser:
<p>There are two spaces here, four spaces here, and 10 spaces here!</p>
Try it with carriage returns too:
<p>Two carriage returns
Three carriage returns
And so on...</p>
How to Get Whitespace to Display
In order for those spaces to display in your Web browsers you have to use special codes and HTML tags.
To get a single space, use the non-breaking space. Type where ever you want an extra space.
To get a carriage return, use the <br /> HTML element.
