Paragraphs
The <p> Tag
Most Web pages are text documents. In written languages such as English, letters are grouped into words,
words are organized into sentences, and sentences are structured into cohesive paragraphs. HTML provides
a way for content to be marked as a paragraph. By default, browsers render text marked as a paragraph
with a single blank line preceding and following the text. Text inside a paragraph is also aligned to
the left margin of the page and is word-wrapped inside the browser window.
In order to format a block of text as a paragraph, the <p> (paragraph) tag surrounds the enclosed text. The general format for this tag is given in Listing 2-1.
<p>Text</p>
Listing 2-1. General format for the <p> tag.
Any amount of text can appear between the opening and closing tags. When displayed in the browser, the
enclosed text is single spaced and preceded and followed by a single blank line to separate it from
surrounding page content. The <p> tag is classified as a container and block-level element.
You can see the effects of <p> tags in the Web page shown previously in Listing 2-2 which displays
text as three separate paragraphs. These tags are added in the editor as shown below.
<p>
A Web page begins with preliminary sections of code that identifies it as an
HTML5 document. Also included is a title which appears in the browser's
Title Bar.
</p>
<p>
All content that appears in the browser window is coded in the body section
of the page. Text information, graphic images, links, and other page content
are added to the page and are surrounded by HTML tags to order and structure
them for presentation.
</p>
<p>
It is important to note that content is arranged on the page only through
HTML tags coded in the document. Otherwise, all content runs together as an
unformatted string of text.
</p>
Listing 2-2. A web page formatted with paragraph tags.
The text is now easily readable because organization is brought to its information content. Note that
back-to-back paragraphs are separated by a single blank line even though each <p> tag itself
produces a blank line before and after a paragraph. The browser collapses into a single blank line: the one that
follows a paragraph and the one that precede the next.
Note that on this and subsequent pages complete coding for a Web page may not be shown in order
to focus on the code being discussed. Still, it is assumed that the code shown is surrounded by the page
preliminaries down through the <body> tag and by the closing </body>
and </html> tags.)
The <blockquote> Tag
The <blockquote> tag offers a way to indent a block of text, to offset it from surrounding
content for special emphasis as would be done for a quoted citation from which the tag gets its name.
This container tag indents its enclosed text a fixed number of pixels (approximately 40 pixels) from the
left and right margins. Its enclosed text is word-wrapped and preceded and followed by a blank line. The
general format for the <blockquote> tag is shown in Figure 2-7.
<blockquote>
text
</blockquote>
Figure 2-7. General format for the <blockquote>
According to HTML 5 standards, the <blockquote> is used to mark content that is quoted
from another source. In practice, the <blockquote> should be used only in the correct
context to mark a block quotation. For our purposes, it currently serves as a convenient way to indent any block of text.
In the following example, a <blockquote> tag offsets the middle paragraph from surrounding text. Browser output is shown in Figure 2-8.
<p>
Here are three blocks of text. This first paragraph is formatted with a
standard paragraph tag and is blocked at the left margin of the page.
</p>
<blockquote>
This second block of text is formatted with a blockquote tag to indent its
left and right margins approximately 40 pixels from the edges of the page.
</blockquote>
<p>
This final block of text is coded like the first one. It is enclosed within a
standard paragraph tag and is blocked at the left margin.
</p>
Listing 2-4. A text block formatted with a
Figure 2-8. Applying the <blockquote> tag to a paragraph.
Similar to the way it appears in the browser, the above editor coding shows the blockquoted text offset
with blank lines and indented. As you know, this editor formatting is not required and has no effect on
browser output that is controlled solely by HTML tags. Nevertheless, it is good practice to arrange editor
coding to resemble browser output the best way possible for visual indication of the display relationships
among sections of page content. It makes it easier to spot missing or miscoded tags when editor coding is
well spaced and indented.
Nested Blockquotes
In the following example, <blockquote> tags are used to offset three blocks of text. The middle
one is further indented inside its outer blockquoted paragraphs. Browser output is shown in Figure 2-9.
<p>
Here are five blocks of text. This first block is formatted with a standard
paragraph tag and is blocked at the left margin of the page.
</p>
<blockquote>
This second block of text is formatted with a blockquote tag to indent its
left and right margins approximately 40 pixels from the edges of the page.
<blockquote>
This block of text is also surrounded by blockquote tags. It is further
indented within the margins produced by its outer blockquote tag.
</blockquote>
This block of text is aligned like the second block of text since it also appears
inside the outermost blockquote tag.
</blockquote>
<p>
This fifth block of text is coded like the first one. It is enclosed within
a standard paragraph tag and blocked at the left margin.
<p>
Listing 2-5. Text formatted with nested <blockquote> tags.
Figure 2-9. Text formatted with nested <blockquote> tags.
In this example, the two <blockquote> tags are nested; that is, a <blockquote> tag
appears inside a <blockquote> tag.The outer <blockquote> tag surrounds and indents
its three contained text blocks approximately 40 pixels from the left and right margins of the page. The inner
<blockquote> tag indents its enclosed text an additional 40 pixels from the margins established by
the outer tag. Any additional nested tags further indent their enclosed text from the previous margins.
When nesting <blockquote> tags inside one another, make sure that opening and closing tags are
properly paired, and that inner tags are fully closed inside their next outer-most enclosing tags. As in the case
with <p> tags, back-to-back <blockquote> tags have their preceding and
following blank lines collapsed to a single blank line.
Remember that the <blockquote> tag should not be used to just indent text. Instead it should only
be used when displaying large blocks of quoted text within a web document. In a later tutorial, you will learn
style sheet methods that can be used for indenting text.
Deprecated (OLD) Tags and Attributes
HTML 5 is a replacement for the older XHTML and HTML4 languages. In addition to adding many new elements and
features, HTML 5 retains many of the tags found in previous HTML versions. Still, many older styling attributes
are no longer supported officially by HTML 5. Many of these attributes may still be recognized by browsers which
support compatibility with older HTML versions. For example, the <p> tag historically included
the align attribute to control text alignment. For instance, by setting this attribute to
<p align="center"> the text on each line of a paragraph is centered rather than aligned at the left margin.
In HTML 5, the align attribute is not supported. It is recommended that you refrain from using it and other styling
attributes which have been phased out. Instead, newer style sheet declarations should be used to produce the same effect.
Still, deprecated attributes are described in these tutorials since you may encounter them on existing Web pages even
though most attributes are not valid under HTML 5 standards.
Certain HTML tags are also deprecated under HTML 5. Tags that are being phased out are presented since you will likely
encounter them in existing pages. These tags may display properly in modern browsers, but newer alternatives should be used
in their place. Furthermore, HTML 5 changes the contextual meaning of some older tags. These tags should now be used in the
context where they are appropriate, instead of simply being used for styling purposes.
Deprecated (OLD) align Attribute
By default, paragraph text displayed in a browser is word wrapped and blocked at the left margin of the page. It is
possible, however, to block text at the right margin, to center it, or to justify all lines by expanding them to
both margins. These alignment options are specified by coding the align attribute inside a block-level tag. The
general format for coding this attribute along with its possible values are:
align="left|center|right|justify"
The keyword align is assigned one of the quoted alignment values. For example, the following code centers the heading of
the previous example page and justifies all paragraph lines by expanding them to the right margin. Browser output is shown in Figure 2-6.
<h2 align="center">Web Page Layout</h2>
<p align="justify">
A Web page begins with preliminary sections of code that identifies it as an
HTML5 document. Also included is a title which appears in the browser's
Title Bar.
</p>
<p align="justify">
All content that appears in the browser window is coded in the body section
of the page. Text information, graphic images, links, and other page content
are added to the page and are surrounded by HTML tags to order and structure
them for presentation.
</p>
<p align="justify">
It is important to note that content is arranged on the page only through
HTML tags coded in the document. Otherwise, all content runs together as an
unformatted string of text.
</p>
Listing 2-3. Paragraph and heading tags formatted with align attribute.
Figure 2-6. Web page formatted with aligned paragraphs in browser.
Be aware that the align attribute is deprecated under current HTML5 standards. It is presented here as a quick and
easy way to align paragraphs and will serve as a convenient, but temporary, styling method until you learn
how to code and integrate style sheets on your Web pages.