Section 5.2. Basic Text Tags
Some text tags are so important they'll crop up in virtually every HTML document. Many of these tags are used to create block elements chunks of content that are separated (by a line break and a little bit of extra space) on a Web page. Headings and paragraphs are two examples of block elements. When you end a block element, the browser automatically adds a line break and a little extra space before the next bit of content.
For example, consider this fragment of HTML:
<h1>Bread and Water</h1>This economical snack is really all you need to sustain life.
This snippet has a title in large, bold letters followed immediately by some ordinary text. You might expect to see both parts (the heading and the ordinary text) appear on the same line. However, the <h1> tag is a block element. When you close it, the browser does a little housecleaning, and adds a line break and some extra space. The text starts on a new line, as you can see in Figure 5-3.
|
Tip: Block elements are nice because they make it easy to format a document. For example, the spaces that exist between block elements helps insure that one section of text doesn't run into another section. However, there's also a clear downside. In some cases, you won't be happy with the automatic spacing between block elements. For example, in dense, information-laden pages, the standard spacing looks far too generous. To tighten up your text and shrink the spaces in between block elements, you need style sheets (see Chapter 6).
Interestingly, the previous example is equivalent to this more explicit HTML:
<h1>Bread and Water</h1><p>This economical snack is really all you need to sustain life.</p>
Although it's basically the same, the second version is the one that's technically correct, and it's the approach you'll see in this book. The reason that it's better is because it's clearer that the text after the heading actually occupies a separate paragraph. In the first example, the text after the heading is floating free without any container. The second example makes it clear that the document really contains a heading followed by a paragraph. Conceptually, this makes more sense.
Tip: Remember, sticking to good style has other benefits. For example, it will help you if you decide to upgrade to XHTML someday (see Section 2.4), and it will make it easier for search engines and other computer programs to scan and analyze your pages.
Not all HTML elements are block elements. There are also inline elements , which are tags that should be placed inside other block elements. Examples of inline elements include the <img> tag for inserting images and the <br> tag for inserting line breaks. You can insert inline elements in other paragraphs, headings, or lists.
Now that you've learned how block elements work, it's time to take a closer look at your basic toolkit of tags.
5.2.1. Paragraphs
You've already seen the basic <p> paragraph tag. It's a container tag that defines a paragraph of text.
<p>It was the best of times, it was the worst of times</p>
As you've no doubt noticed by now in your travels across the Internet, HTML paragraphs don't get indented like they do in print media. That's just the way of the Web, although you can change this with style sheets (Section 6.3.3.3). Figure 5-4 shows an example of paragraph tags in action.
|
You should get into the habit of thinking of the text in your Web pages as a series of paragraphs. In other words, before you type some text, add the <p></p> tags to serve as a container. It's the first level of structure your page gets.
Usually, when you type a long paragraph in an HTML file, you'll split it up over multiple lines so that you can read what you've written without having to scroll from one side of your window to the other. But remember, even if you split your text into separate lines in the HTML file, it doesn't mean the text gets displayed that way in the browser. Browsers treat a line break (like the one you see at the end of this line) as a single space, and they stubbornly ignore multiple spaces that you enter by hitting the Space bar. As a result, when a browser displays a paragraph, it wraps the text to fit the width of the current browser window. If you want to insert a real break between your lines, check out the next section.
| UP TO SPEED Getting More Space |
| The way that browsers ignore spaces can be exasperating. What if you really do want to add several spaces in a row? The trick is the non-breaking space which is a special HTML character entity (see Section 2.3.5.3) that forces browsers to insert a space. When the browser sees this entity, it interprets it as a space that can't be ignored. So if you create a paragraph like this:
You end up with this text:
Most WYSIWYG HTML editors automatically add non-breaking spaces when you press the space key in design view, which is why those spaces don't disappear. But try not to use non-breaking spaces more than you need to. (If you really want indented paragraphs, you'll get a better solution with style sheets, which you'll learn about in Chapter 6.) And never, ever use spaces to try and align columns of textthat always ends badly , with the browser scrambling your attempts. Instead, you'll need to use the layout features described in Chapter 9. |
5.2.2. Line Breaks
Sometimes you want to start a new line but not a whole new paragraph. The most common reason is when you want to avoid the extra spacing the browser puts between paragraphs. In this situation, the line break tag <br> comes in handy.
Tip: Remember, if you're following the XHTML standard (Section 2.4), all empty tags need to include a slash character. That means instead of <br>, you write the equivalent code <br />.
Line breaks are exceedingly simplethey simply tell the browser to move to the start of the following line. They aren't container tags or block elements, so you can use them on their own, anywhere (see Figure 5-5).
Line breaks aren't block elements, so they should always be placed inside of a block element, like a paragraph:
- <p>This paragraph appears<br>
- on two lines</p
Don't overuse line breaks. Remember, when you resize the browser window, your text is reformatted to fit. If you try to perfect your paragraphs with line breaks, you'll just end up with pages that look bizarre at different sizes. A good rule of thumb is to avoid line breaks in ordinary paragraphs. Instead, use them the to force breaks in addresses, outlines, poems, and other types of text whose spacing you want to tightly control. Don't use them for bulleted and numbered lists you'll learn about tags for those on Section 5.2.7.
|
In some cases, you might want to prevent a line break. This is a fairly specialized trick, but it can come in handy if you're afraid of the browser mangling product names , or other phrases that contain a space, that you want to appear on a single line. The trick is to use a non-breaking space character (which looks like   ;) instead of just hitting the Space bar. The browser still displays the space in the Web page, but won't wrap the words on either side of it (see Figure 5-6).
|
| HOW'D THEY DO THAT? The Mystery of Empty Paragraphs |
| In authoring tools like Dreamweaver and FrontPage, every time you press Enter, when you're in design view, a new paragraph is created. This seems a little counterintuitive, as you've seen how empty paragraph tags normally get ignored by the browser (see Figure 5-4). The trick is that both these programs add what's called a non-breaking space . This character is entered using the HTML entity (see Section 2.3.5.3 for an introduction to HTML entities). Unlike regular spaces, a non-breaking space is never ignored by the browser. That means if you put three non-breaking spaces in a row, you wind up with three spaces when you view the page in a browser. (If you use regular spaces, you'll only see one, because extra spaces are summarily dismissed.) The trick is that you can also put a non-breaking space into a <p> tag. When you do, the paragraph tag becomes an empty paragraph, which is sometimes useful for spacing out your work. Here's an example of a paragraph with the non-breaking space:
Incidentally, Dreamweaver and FrontPage do allow you to use more ordinary <br> line break tags instead of empty paragraphs. To do this, press Shift+Enter instead of Enter. Nvu doesn't use the empty paragraph trick, so pressing Enter always inserts a line break. |
5.2.3. Headings
Headings are section titlesfor example, the word "Headings just above this paragraph. They display in bold lettering, at various sizes. The size of the heading depends on the heading level . There are six heading levels, starting at <h1> (the biggest) and dwindling down to <h6> (the smallest). Both <h5> and <h6> are actually smaller than regularly sized text, and aren't used too often. Figure 5-7 shows all the heading levels you can use.
|
Headings aren't just useful for formattingthey also delineate the structure of your document. To make sure your document makes sense, it's a good idea to start with the largest headings (level one) and work your way down. For instance, don't jump straight to a level three heading just because you like the way it looks.
Tip: It's probably occurred to you that if everyone uses the same heading levels in the same order, the Web will become as bland as a bagel in a chain supermarket . Don't panicit's not as bad as it seems. When you add style sheets into the mix (Chapter 6), you'll see that you can completely change the look of any and every heading you use. So for now, stick to using the right levels in the correct order.
5.2.4. Horizontal Lines
Paragraphs and line breaks aren't the only way to separate sections of text. Another neat trick is the <hr> tag, which translates to "horizontal rule." A horizontal rule is a horizontal line that stretches from one side of its container to the other, separating everything above and below it.
Tip: Usually, you'll put a horizontal break in between paragraphs, which means it stretches from one side of the page to the other. However, you can also put a rule in a smaller container, like a table cell , in which case it won't turn out nearly as big.
Rules are block elements, so you can stick them in between paragraphs (see Figure 5-8).
|
5.2.5. Preformatted
Preformatted text is a unique concept in HTML that breaks the rules you've read about so far. As you've seen, Web browsers ignore multiple spaces and flow your text to fit the width of the page. Although you can change this to a certain extent by using line breaks and non-breaking spaces, some types of documents are still hard to deal with.
For example, imagine you want to display a bit of poetry or a snippet of code from a programming language. Using non-breaking spaces to try and line everything up is time-consuming and difficult to read. The <pre> tag gives you a different option. Inside the <pre> tag, the browser pays close attention to every space and line break you use, and it duplicates that precisely on the Web page it displays. Additionally, the Web browser puts all your text into a monospaced font (typically Courier). Figure 5-9 shows an example.
Tip: In a monospaced font, every letter occupies the same amount of space. HTML documents and books like this one use proportional fonts, where letters like W and M are much wider than l and i. Monospaced fonts are useful in preformatted text, because it allows you to line up rows of text exactly. However, it doesn't look as polished.
|
5.2.6. Quotes
It may be a rare Web page that spouts poetry, but the architects of the HTML standard created a block element named <blockquote>, which is designed especially for long quotations. When you use this element, your text is indented on the left and right edges.
Here's an example:
<p>Some words of wisdom from "A Tale of Two Cities":</p>
<blockquote>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other wayin short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.</blockquote>
<p>It's amazing what you can fit into one sentence.</p>
Figure 5-10 shows how this appears in the browser.
|
Occasionally the <blockquote> tag is used purely for the indented formatting that it gives you. Of course, this compromises the spirit of the tag, and you'd be better off to use style sheets to achieve a similar effect. However, it's a fairly common technique, so it's more or less accepted.
The <blockquote> tag is a block element, which means it always appears separately from other block elements like paragraphs and headings. HTML also defines an element for shorter quotations that are nested inside another blockthe <q> element, which stands for quotation:
<p>As Charles Dickens once wrote, <q>It was the best of times, it was the worst of times</q>.</p>
Most browsers won't format the <q> element, so you might want to add some italics of your own. You can do this by applying a style sheet rule that formats the <q> element (see Chapter 6).
And if you're dreaming of the semantic Web (Section 5.1.3), you can add a URL that points to the source of your quote ( assuming it's on the Web) using the cite attribute:
<p>As Charles Dickens once wrote, <q cite="http://www.literature.org/authors/dickens-charles/two-cities">It was the best of times, it was the worst of times</q>.</p>
The information in the cite attribute isn't shown in the page, but other applications that analyze your Web page can retrieve this information.
5.2.7. Divisions
The last block element you'll learn about<div>is one of the least interesting, at least at first glance. That's because on its own, it doesn't actually do anything. <div> is used to group together one or more block elements. That means you could group together several paragraphs, a paragraph and heading, and so on. Here's an example:
<div> <h1></h1> <p></p> <p></p> </div> <p></p>
Given the fact that <div> doesn't do anything, you're probably wondering why it exists. In turns out that the lowly <div> becomes a lot more interesting when it's combined with style sheets (Chapter 6). That's because you can apply formatting directly to a <div> tag. For example, if a <div> tag contains three paragraphs, that means you can format three paragraphs for the price of one.
The <div> tag also has an important relativethe <span> tag. The difference is that <div> groups together block elements. The <span> tag is placed inside a block element, around some section of text. Here's an example:
<p>In this paragraph, some of the text is wrapped in a span tag. That <span>gives you the ability</span> to format it in some fancy way later on.</p>
Once again, the <span> tag doesn't accomplish anything on its own. However, with style sheets, you can use it to format just a portion of a paragraph, which is very handy.
| DESIGN TIME Webifying Your Text |
| As you learned earlier in this chapter, text on the Web isn't like text in print. But sometimes it's hard to shake old habits. Here are some unwritten rules that can help make sure you're making good use of text in your Web pages:
|
EAN: N/A
Pages: 135