When a web browser displays HTML pages, it pays no attention to line endings or the number of spaces between words. For example, the top version of the poem shown in Figure 2.2 appears with a single space between all words, even though that's not how it's entered in Listing 2.2. This is because extra whitespace in HTML code is automatically reduced down to a single space. Additionally, when the text reaches the edge of the browser window, it automatically wraps down to the next line, no matter where the line breaks were in the original HTML file; in this example, the text all happened to fit on one line. Listing 2.2. HTML for the Page Shown in Figure 2.2<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>The Advertising Agency Song</title> </head> <body> <p> When your client's hopping mad, put his picture in the ad. If he still should prove refractory, add a picture of his factory. </p> <hr /> <p> When your client's hopping mad,<br /> put his picture in the ad. </p> <p> If he still should prove refractory,<br /> add a picture of his factory. </p> </body> </html> Figure 2.2. When the HTML in Listing 2.2 is viewed as a web page, line and paragraph breaks only appear where there are <br /> and <p> tags.You must use HTML tags if you want to control where line and paragraph breaks actually appear. To skip a line between paragraphs, put a <p> tag at the beginning of each paragraph and a </p> tag at the end. In other words, enclose the text of the paragraph within a pair of matching <p> and </p> tags. The <br /> tag forces a line break within a paragraph. Unlike the other tags you've seen so far, <br /> doesn't require a closing </br> tagthis is one of those empty tags I was talking about earlier. This is also an example of where XHTML enters the web page picture, because normal HTML doesn't require the / in empty tags. However, the newer XHTML standard does, so it's important for you to stick to the latest standards and create web pages that are coded properlyalways code empty tags so that they end with />.
The poem in Listing 2.2 and Figure 2.2 shows the <br /> and <p> tags being used to separate the lines and verses of a rhyming advertising agency song. You might have also noticed the <hr /> tag in the listing, which causes a horizontal rule line to appear on the page (see Figure 2.2). Inserting a horizontal rule with the <hr /> tag also causes a line break, even if you don't include a <br /> tag along with it. For a little extra blank space above or below a horizontal rule, you can put a <p> tag before the <hr /> tag and a </p> tag after it, effectively placing the horizontal rule within its own paragraph. Like <br />, the <hr /> horizontal rule tag is an empty tag and therefore never gets a closing </hr> tag. Try It Yourself Take a passage of text and try your hand at formatting it as proper HTML:
|