Home > Articles > Web Development > HTML/CSS

Adding Text and More to Your HTML Code

  • Print
  • + Share This
  • 💬 Discuss
This chapter is from the book
In this lesson, you will learn how to use HTML to add text and headings in your Web pages. You'll also learn how to add mathematical notations, information about your Web page, and special characters (such as ampersands).

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>
03fig01.jpg

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.

03fig02.jpg

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.

03fig03.jpg

Figure 3.3 The browser inserts line breaks and blank paragraph separators only where you place the correct HTML tags.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus