| Home Web | Top Bottom | Contents Prev Next |
The <p>, <i> and <b> Tags
The align Attribute of <p>
Other Attributes
Nested Tags
Example
Older Usage of <p>
The <p> tag:
<p> ... </p>
Attributes:
align="left|right|center|justify" (deprecated)
Contents:
Inline elements
The <i> and <b> tags:
<i> ... </i>
<b> ... </b>
Contents:
Inline elements
<p> defines a paragraph. A blank line is displayed above and below the paragraph.
<p> is a block tag as opposed to an inline tag. In general, a block tag is one that causes its contents to begin on a fresh line, usually with a blank line before and after the contents. Most inline tags, on the other hand, do not begin a new line. Examples of inline tags include <i>...</i>, which displays its contents in italics, and <b>...</b>, which displays its contents in bold.
A paragraph can only contain inline elements. Inline elements include text, inline tags, and certain empty tags such as <br> and <img>. A paragraph cannot contain other block tags.
Inline tags such as <i> and <b> can also include only inline elements.
In HTML, the </p> tag is optional. The paragraph ends when the next block tag is encountered. In XHTML, the </p> tag is required. I recommend that you include the </p> tag in HTML as well as XHTML. It'll get you in the habit of doing so, and it'll help prevent some of the problems you may encounter when using CSS.
The align attribute is deprecated. This means that you can use it in transitional HTML/XHTML but not in strict HTML/XHTML.
The default is align="left", which makes the text in the paragraph left-aligned with ragged edges on the right like the paragraphs on this page.
right displays the text right-aligned with ragged edges on the left.
center displays the text centered with ragged edges on both sides.
justify displays the text with even edges on both sides by adding spacing to make the lines the same length. Not all browsers recognize justify, and those browsers will treat justify the same as left.
Note: You may decide you like the looks of justified text — everything looks so nice and neat. Usability studies indicate that left-aligned text with ragged edges is easier to read, however.
The alignment can also be specified via CSS (I'll provide a brief intro to CSS on the next page).
When using strict HTML/XHTML, you can only use the CSS method.
When using transitional HTML/XHTML, you can choose to use either CSS or the align attribute.
More browsers support align than CSS, so choose align if it's important to you that older browsers align the text the way you choose.
If it's only important to you that the text be readable in older browsers — or if you don't even care if your pages are usable in older browsers — choose the CSS method.
All three of these tags, and indeed almost all HTML tags, support some attributes that I have not shown here: class, style and id. These attributes are used with CSS. I'll wait a little bit to talk about these. Because these attributes can be used in most tags, I won't bother to indicate them separately when I list the attributes of a tag.
When you include inline tags in a paragraph, you're nesting tags. When you nest tags, you must be careful to close them in the reverse order that you open them, so that the complete contents of the inner tag is enclosed within the outer tag. Additional inline tags can be nested inside inline tags.
Correct: <b><i>Text</i></b> Incorrect: <b><i>Text</b></i>
Here's some example code that illustrates the paragraph tag together with some nested inline tags. After displaying the page, do the following:
Validate the code in both transitional and strict (to validate strict, just remove " Transitional" from the doctype).
Experiment with the different align values (left, right, center, justify).
In the second paragraph, swap the </b> and </i> tags. See what happens when you validate the code.
The <p> tag has always been a container tag, but before CSS came into use it was frequently used as if it were an empty tag. This worked fine because the ending tag is optional. If you examine older code you'll often see code like this:
<body> First paragraph. <p> Second paragraph. </body>
Many of us (myself included) were taught in pre-CSS days that this was the correct way to use the <p> tag. But the problem is that the second paragraph is included within a <p> tag, while the first paragraph is "naked" text (not contained within a block tag). If you use CSS to specify formatting for your paragraphs — for example, to display the text in blue rather than black — most browsers won't apply that formatting to the first paragraph because it's not preceded by <p>.
HTML transitional will accept naked text like this first paragraph. HTML strict does not allow naked text. All text must be included inside a block tag when you use strict. I recommend that you never include naked text in your documents even when using transitional. Avoiding naked text will help prevent some CSS problems.
Try putting some naked text right after <body> in the textarea box. Does it display any differently from text included in <p>? See what happens when you validate the code in both transitional and strict.
| Home Web | Top Bottom | Contents Prev Next |