- Getting Started with a Simple Web Page
- HTML Tags Every XHTML Web Page Must Have
- Organizing a Page with Paragraphs and Line Breaks
- Organizing Your Content with Headings
- Validating Your Web Content
- The Scoop on HTML, XML, XHTML, and HTML 5
- Summary
- Q&A
- Workshop
- Exercises
This chapter is from the book
This chapter is from the book
This chapter is from the book
Organizing a Page with Paragraphs and Line Breaks
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 3.2 appears with a single space between all words, even though that's not how it's entered in Listing 3.2. This is because extra whitespace in HTML code is automatically reduced to a single space. Additionally, when the text reaches the edge of the browser window, it automatically wraps to the next line, no matter where the line breaks were in the original HTML file.
Listing 3.2. HTML Containing Paragraph and Line Breaks
<?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"><htmlxmlns="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 3.2 When the HTML in Listing 3.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. When text is enclosed within the <p></p> container tags, a line break will be assumed after the closing tag. In later hours, you will learn to control the height of the line break using CSS. 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> tag—this is one of those empty tags discussed earlier. Although HTML 4 does not require the / in empty tags, XHTML does and future standards will, so it's important for you to stick to the latest standards and create web pages that are coded properly. Always code empty tags so that they end with />.
The poem in Listing 3.2 and Figure 3.2 shows the <br /> and <p> tags being used to separate the lines and verses of an 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 3.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. Like <br />, the <hr /> horizontal rule tag is an empty tag and therefore never gets a closing </hr> tag.