Spaces and Empty Paragraph Tags

Here are some basic rules about how browsers interpret the text in the code:

1.) Blank spaces in the code don't show up in the browser. No matter how many blank spaces you put in your code's text, the browser will read only the first one. Look at the HTML code right here: You will see a lot of spaces but they won't show up in the browser.

2.)One way to add more than one blank space after a word is to use what's called a non-breaking space. Have a look in the code right here:            and you will see several of them. It's a special sequence of six characters that the browser interprets as one additional blank space. The space after each one of them is also displayed because the non-breaking space is considered to be a character by the browser.

3.) In HTML the way to start a new paragraph is with a paragraph tag. Have a look in the code at the start of this paragraph and other paragraphs and you should see it. In HTML, a closing paragraph tag is optional (however, in XHTML it is not optional). Paragraph tags always create a blank line at the end of the paragraph. To avoid the blank line, use the BR (line break) tag instead.

4.) It doesn't matter if you don't have line breaks in the code. If you have paragraph tags in the code,

then a

new paragraph

is started.

5.) You can also start a new line with a break tag, which you will see three of in the code here:


In the code it's just the letters: BR (enclosed in angle brackets, of course). Unlike most tags, there is NO closing tag for the break tag.

An alternate way of writing the break tag in the code, which conforms with the the newer XHTML standards (which are almost identical to standard HTML) is to have a slash at the end of the tag such as you will see in the code here and is equally acceptable:



That is one of the more obvious ways that XHTML differs from standard HTML: if a tag has no closing tag, then it has a space and a slash at the end of its single tag. The other tags that we will be learning about that have no closing tags are for horizontal lines and images.

NOTE: The difference between a paragraph tag and a break tag is this: a paragraph tag puts a completely blank row after it that cannot be removed. The break tag doesn't. The break tag is therefore much more like the result of using the return key on your keyboard when using a word processing program.

An important thing to remember is to NOT use the BR (break) tag to control the lengths of your lines of text. This is because people sometimes have their browsers set to display text larger or smaller than what you want and then very often they have their browser window at various widths. This can result in your lines of text ending very abruptly when viewed.

6.) If you have line breaks in the code itself, they won't show up in the browser. Have a look at the code here. You will see spaces and line breaks in the code, but do you see any difference in the browser window?

7.) Multiple paragraph tags one right after another won't make a difference either, only one paragraph tag will work at a time. The rest are ignored. Look at the code here to see:

8.) One technique that is used to add extra blank lines on your page is to use the line break tag (br). Or else add a non-breaking space after a paragraph tag. Here are examples of both; see how they look in the code:

Here's what I want you to do:

1. Using the instructions for how to save an html file (see: A04_saveFiles1.html), save this file in the folder you created to contain exercises. Name the file: A07_yourlastname.html
2. Immediately BEFORE the word SPACE below, I want you to put in 5 pairs of opening/closing paragraph tags. Even though this won't show any visible results in the browser, you are doing it to reinforce the fact that extra paragraph tags make no difference in the page's appearance.
   • TIP: In all of the following exercises I suggest that you make plenty of use of the Copy, Cut, and Paste capability of Notepad. When feasible, it's a much easier way of creating code than typing it all in manually. Using right-clicking for the contextual shortcut menu or keyboard shortcuts (CTRL-X, C, V) makes it even easier.
3. Next, immediately AFTER the word SPACE, put in 5 more paragraph tags, but this time include a non-breaking space with each one. Follow the example in the code above, after the words: "We could all use a break now and then!" That ought to provide some blank rows.
4. Next, put a BR (line break) tag, between each letter of the word STACK, below. You should end up seeing the letters stacked one on top of the other in the browser.
5. Save the file. Look at it in your browser.
6. UCLA Blackboard Online students:
   • Save your file and send it to me as an attached file as per instructions in the Syllabus, which is in the Course Information section.
   • Also, name the file as per instructions in File Naming Rules, also in the Course Information section.

SPACE

STACK

© 2008 Dan Vaughan
Reviewed Jan 8 2008