Home > Articles > Web Services > XML

Sams Teach Yourself XML in 21 Days

Sep 16, 2005

📄 Contents

␡

⎙ Print

< Back Page 140 of 288 Next >

Recommended Book 

Sams Teach Yourself XML in 21 Days, 3rd Edition

Learn More Buy

Organizing Text

When you want to organize text in an XHTML document, things work very much as they do in HTML. As you've seen, you can place simple text with other elements—in other words, you can use mixed-content models in XHTML:

<?xml version="1.0" encoding="UTF-8"?>
<!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">
    <head>
        <title>
            An XHTML Document
        </title>
    </head>

    <body>
        <h1>

               Long Live XHTML!

           </h1>

           This is an XHTML document.

           <br/>

           Pretty good, eh?
    </body>
</html>

The five XML predefined entities also work in XHTML:

& is the & character.
' is the ' character.
> is the > character.
< is the < character.
" is the " character.

In fact, there are a great many more character entities in HTML 4.0; they are available at http://www.w3.org/TR/html4/sgml/entities.html, and they're supported in XHTML as well. Here's a sampling:

&Aacute is a Latin capital letter A with an acute accent.
α is a Greek lowercase letter alpha.
¢ is a cents sign.
€ is a euro symbol.
∞ is an infinity symbol.
— is an em dash.
Π is a Greek uppercase letter pi.
π is a Greek lowercase letter pi.
® is a registered trademark sign.

Creating Paragraphs: `<p>`

The <p> element lets you create block-level paragraphs in XHTML. Note that because <p> is a block-level element, you cannot display other block-level elements inside it. The main difference between <p> in HTML and <p> in XHTML is that in XHTML, every <p> tag needs a closing </p> tag, whereas closing </p> tags are not usually used in HTML. After you've created a paragraph using <p>, you can format it as you like by using style sheets.

The <p> element is supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. Here are this element's attributes:

align — Sets the alignment of the text. Possible values include left (the default), right, center, and justify. This attribute was deprecated in HTML 4.0. (Supported in XHTML 1.0 Transitional and XHTML 1.0 Frameset.)
class — Sets the style class of the element. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
dir — Sets the direction of directionally neutral text. This attribute can be set to ltr, for left-to-right text, or rtl, for right-to-left text. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
id — Specifies the ID with which to refer to the element. You should set this attribute to a unique identifier. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
lang — Sets the base language of the element. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
style — Indicates how a browser should display the element. You should set this to an inline style. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
title — Specifies the title of the element. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
xml:lang — Specifies the base language for the element when the document is treated as XML. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)

Paragraphs are the most basic block elements for text. A browser usually adds some space before and after paragraphs to separate them from other elements, but note that the actual handling varies by browser. Listing 11.4 shows an example that uses both line breaks and paragraphs.

Example 11.4. An XHTML Document That Uses Paragraphs and Line Breaks (`ch11_04.html`)

<?xml version="1.0" encoding="UTF-8"?>
<!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">
    <head>
        <title>
            An XHTML Document
        </title>
    </head>

    <body>
        <h1>
            Long Live XHTML!
        </h1>
        <p>

               This is an XHTML document.

           </p>

           Pretty good, eh?

           <br/>

           For more information, see

           <a href="http://www.w3.org/MarkUp/">XHTML</a>.
    </body>
</html>

Figure 11.6 shows the XHTML document from Listing 11.4. This example points out the difference between <p> and <br>. The <p> element contains text and makes it into a block-level element; the browser normally uses vertical space to offset it from other elements. The <br> element is an empty element that just makes the browser skip to the next line. You can style the text in a <p> element by styling that element, but you can't style text by using the <br> element.

Figure 11.6 sing paragraphs and line breaks.

Skipping a Line: `<br>`

In XHTML, the <br> element is an empty element that inserts a line break in text, and you use it like this in XHTML:

<br />

This element is supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. Here are the attributes of this element:

class — Sets the style class of the element. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
clear — Is used to move past other content. You can set this attribute to none, left, right, or all. (Supported in XHTML 1.0 Transitional and XHTML 1.0 Frameset.)
id — Specifies the ID with which to refer to the element. You should set this attribute to a unique identifier. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
style — Indicates how a browser should display the element. You should set this to an inline style. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
title — Specifies the title of the element. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. )

Using this element as <br/> in XHTML doesn't cause any problems in the major browsers.

Centering Text: `<center>`

While HTML was growing up, the <center> element was a very popular one. You could use this element to center text and other content in Web pages. Like many other elements and attributes, <center> was deprecated in HTML 4.0 in favor of style sheets, which means that it's only supported in XHTML 1.0 Transitional and XHTML 1.0 Frameset; you won't find it in the XHTML 1.0 Strict, XHTML 1.1, or XHTML 2.0 DTDs. Here are the attributes of this element:

class — Sets the style class of the element. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
dir — Sets the direction of directionally neutral text. This attribute can be set to ltr, for left-to-right text, or rtl, for right-to-left text. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
id — Specifies the ID with which to refer to the element. You should set this attribute to a unique identifier. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
lang — Sets the base language of the element. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
style — Indicates how a browser should display the element. You should set this to an inline style. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
title — Specifies the title of the element. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
xml:lang — Specifies the base language for the element when the document is treated as XML. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. )

Although it has been deprecated, the <center> element is still a very popular one, and it's built into XHTML 1.0 Transitional and XHTML 1.0 Frameset. Listing 11.5 shows an example of using this element in the document ch11_05.html.

Example 11.5. An XHTML Document That Uses the `<center>` Element (`ch11_05.html`)

<?xml version="1.0" encoding="UTF-8"?>
<!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">
    <head>
        <title>
            An XHTML Document
        </title>
    </head>

    <body>
        <center>

               <h1>

                   Long Live XHTML!

               </h1>

               This is an XHTML document.

               <br/>

               Pretty good, eh?

               <br/>

               For more information, see

               <a href="http://www.w3.org/MarkUp/">XHTML</a>.

           </center>
    </body>
</html>

Figure 11.7 shows what this XHTML document looks like in a browser.

Figure 11.7 entering text by using the <center> element.

Even though the <center> element is still popular, it has been deprecated. So how are you supposed to center text now? You can use the <div> element with style sheets, as described in the next section.

Styling Block Content: `<div>`

In XHTML you use the <div> element to enclose sections of text or other elements. This lets you style that content as you like. This element is supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. Here are its attributes:

align — Specifies the horizontal alignment of the element. This attribute can be set to left (the default), right, center, or justify. This attribute was deprecated in HTML 4.0. (Supported in XHTML 1.0 Transitional and XHTML 1.0 Frameset.)
class — Sets the style class of the element. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
dir — Sets the direction of directionally neutral text. This attribute can be set to ltr, for left-to-right text, or rtl, for right-to-left text. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
id — Specifies the ID with which to refer to the element. You should set this attribute to a unique identifier. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
lang — Sets the base language of the element. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
style — Indicates how a browser should display the element. You should set this to an inline style. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
title — Specifies the title of the element. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
xml:lang — Specifies the base language for the element when the document is treated as XML. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)

The W3C says that you should use the align attribute of the <div> element to align text. Listing 11.6 shows an example of this.

Example 11.6. An XHTML Document That Uses the `<div>` Element (`ch11_06.html`)

<?xml version="1.0" encoding="UTF-8"?>
<!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">
    <head>
        <title>
            An XHTML Document
        </title>
    </head>

    <body>
        <div align="center">

               <h1>

                   Long Live XHTML!

               </h1>

               This is an XHTML document.

               <br/>

               Pretty good, eh?

               <br/>

               For more information, see

               <a href="http://www.w3.org/MarkUp/">XHTML</a>.

           </div>
    </body>
</html>

This XHTML document gives the same results as shown in Figure 11.7. That's fine, but the W3C seems to have forgotten that it deprecated the align attribute in HTML 4.0. To be consistent with the way the W3C has been changing things, you should use a style sheet to style the <div> element. Listing 11.7 shows an example of this that gives the same results as Listing 11.6.

Example 11.7. An XHTML Document That Uses the `<div>` Element and Styles (`ch11_07.html`)

<?xml version="1.0" encoding="UTF-8"?>
<!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">
    <head>
        <title>
            An XHTML Document
        </title>
        <style>

               div {text-align: center}

           </style>
    </head>

    <body>
        <div>

               <h1>

                   Long Live XHTML!

               </h1>

               This is an XHTML document.

               <br/>

               Pretty good, eh?

               <br/>

               For more information, see

               <a href="http://www.w3.org/MarkUp/">XHTML</a>.

           </div>
    </body>
</html>

You can also position text and other content by using the positioning style properties and the <div> element that you saw on Day 6, "Creating Valid XML Documents: XML Schemas." Besides <div>, there's another element you can use in XHTML for styling—<span>, which you can use for inline styling.

Styling Inline Content: `<span>`

You can use the <span> element to apply inline styles in XHTML. This element is supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. Here are the attributes of this element:

class — Sets the style class of the element. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
dir — Sets the direction of directionally neutral text. This attribute can be set to ltr, for left-to-right text, or rtl, for right-to-left text. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
id — Specifies the ID with which to refer to the element. You should set this attribute to a unique identifier. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
lang — Sets the base language of the element. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
style — Indicates how a browser should display the element. You should set this to an inline style. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
title — Specifies the title of the element. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
xml:lang — Specifies the base language for the element when the document is treated as XML. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)

Listing 11.8 shows an example of using the <span> element. This example formats the word XHTML in red italics (see Figure 11.8).

Example 11.8. An XHTML Document That Uses the `<span>` Element (`ch11_08.html`)

<?xml version="1.0" encoding="UTF-8"?>
<!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">
    <head>
        <title>
            An XHTML Document
        </title>
        <style>

               span {color: red; font-style: italic}

           </style>
    </head>

    <body>
        <div>
            <h1>
                Long Live XHTML!
            </h1>
            This is an <span>XHTML</span> document.
            <br/>
            Pretty good, eh?
            <br/>
            For more information, see
            <a href="http://www.w3.org/MarkUp/">XHTML</a>.
        </div>
    </body>
</html>

Figure 11.8 Using inline formatting.

The <div> and <span> elements are more important in XHTML than they are in HTML because of the reliance on style sheets to handle formatting in XHTML. By handling block styling, the <div> element replaces elements such as <center> in XHTML 1.0 Strict and XHTML 1.1, and by handling inline styling, <span> replaces elements such as <font>.

Creating Headings: `<h1>` to `<h6>`

Headings are block elements that present text in bold font of various sizes, allowing you to organize that text into sections. Using headings lets you break up the text flow in XHTML documents. As in HTML, the <h1> through <h6> elements create headings; <h1> creates the largest text and <h6> the smallest. These elements are supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. Here are the possible attributes of these elements:

align — Specifies the horizontal alignment of the element. This attribute can be set to left (the default), right, center, or justify. It was deprecated in HTML 4.0. (Supported in XHTML 1.0 Transitional and XHTML 1.0 Frameset.)
class — Sets the style class of the element. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
dir — Sets the direction of directionally neutral text. This attribute can be set to ltr, for left-to-right text, or rtl, for right-to-left text. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
id — Specifies the ID with which to refer to the element. You should set this attribute to a unique identifier. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
lang — Sets the base language of the element. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
style — Indicates how a browser should display the element. You should set this to an inline style. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
title — Specifies the title of the element. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)
xml:lang — Specifies the base language for the element when the document is treated as XML. (Supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1.)

You can see the six heading elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> at work in Listing 11.9.

Example 11.9. An XHTML Document That Uses Headings (`ch11_09.html`)

<?xml version="1.0" encoding="UTF-8"?>
<!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">
    <head>
        <title>
            Using Headings
        </title>
        <style>
            div {text-align: center}
        </style>
    </head>

    <body>
        <div>

               <h1>Here is an &lt;h1&gt; heading</h1>

               <h2>Here is an &lt;h2&gt; heading</h2>

               <h3>Here is an &lt;h3&gt; heading</h3>

               <h4>Here is an &lt;h4&gt; heading</h4>

               <h5>Here is an &lt;h5&gt; heading</h5>

               <h6>Here is an &lt;h6&gt; heading</h6>

           </div>
    </body>
</html>

Figure 11.9 shows this XHTML document in a browser.

Figure 11.9 Using headings in XHTML.

< Back Page 140 of 288 Next >

🔖 Save To Your Account

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

Email Address

Sams Teach Yourself XML in 21 Days

Recommended Book

Recommended Book

Recommended Book 

Organizing Text

Creating Paragraphs: <p>

Example 11.4. An XHTML Document That Uses Paragraphs and Line Breaks (ch11_04.html)

Skipping a Line: <br>

Centering Text: <center>

Example 11.5. An XHTML Document That Uses the <center> Element (ch11_05.html)

Styling Block Content: <div>

Example 11.6. An XHTML Document That Uses the <div> Element (ch11_06.html)

Example 11.7. An XHTML Document That Uses the <div> Element and Styles (ch11_07.html)

Styling Inline Content: <span>

Example 11.8. An XHTML Document That Uses the <span> Element (ch11_08.html)

Creating Headings: <h1> to <h6>

Example 11.9. An XHTML Document That Uses Headings (ch11_09.html)