Adding Text and More to Your HTML Code
This chapter is from the book
This chapter is from the book
This chapter is from the book
Paragraphs
You might not realize it, but you already learned how to create an HTML paragraph in Lesson 2, "Creating Your First Page." In HTML, a paragraph is created whenever you insert text between the <p> tags. Look at the code from Lesson 2 again:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<title>My XHTML Page</title>
</head>
<body>
<p>This is my first XHTML page.</p>
</body>
</html>
Web browsers see that you want text and they display it. Web browsers don't pay any attention to how many blank lines you put in your text; they only pay attention to the HTML tags. In the following HTML code, you see several lines of text and even a blank line, but the browser only recognizes paragraphs surrounded by the <p> and </p> tags (or paragraph tags). The <p> tag tells the browser to add a blank line before displaying any text that follows it, as shown in Figure 3.1.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<title>Typing Paragraphs in HTML</title>
</head>
<body>
<p>This is the first line.
But is this the second?</p>
<p>No, this is.</p>
</body>
</html>
)
Figure 3.1 The browser ignores the blank line that I inserted and puts the line break before the <p> tag instead.
Web browsers do something else with paragraph text that you should be aware of: They wrap the text at the end of the browser window. In other words, when the text in your Web page reaches the edge of the browser window, it automatically continues on the next line regardless of where the <p> is located.The <p> tag always adds a blank line, but you might not always want a blank line between lines of text. Sometimes you just want your text to appear on the next line (such as the lines of an address or a poem). You can use a new tag for this—the line break, or <br /> tag, shown in Figure 3.2.
)
Figure 3.2 The <p> and <br /> tags help to separate your text into lines and paragraphs.
This new tag forces the browser to move any text following the tag to the next line of the browser, without adding a blank line in between. Figure 3.3 shows how the browser uses these two tags to format your text.
)
Figure 3.3 The browser inserts line breaks and blank paragraph separators only where you place the correct HTML tags.