Datasheet

Part I: Getting to Know (X)HTML and CSS

This space allows older browsers to ignore the closing slash (because they

don’t know about XHTML). Newer browsers that understand XHTML ignore the

space and interpret the tag exactly, which is <tag/> (as per the XML rules).

HTML doesn’t require a slash with empty elements, but this markup is dep-

recated (that is, identified as obsolete even though it still occurs in some

markup). An HTML empty element looks like this:

<tag />

Listing 1-1 uses the image element (<img />) to include an image on the

page:

The <img /> element references an image. When the browser displays the

page, it replaces the <img /> element with the file that it points to (an attri-

bute does the pointing, as shown in the next section). Following the XHTML

rule introduced earlier, what appears in HTML as <img> appears in XHTML

as <img /> (and this applies to all single tag elements).

You can’t make up HTML or XHTML elements. Legal elements for (X)HTML

belong to a very specific set — if you use elements that aren’t part of that

set, every browser ignores them. The elements you can use are defined in

the HTML 4.01 or XHTML 1.0 specifications. (The specs for HTML 4.01 can

be found at www.w3.org/TR/html4, while the specs for XHTML 1.0 can be

found at www.w3.org/TR/xhtml1.)

Nesting

Many page structures combine nested elements. Think of your nested ele-

ments as suitcases that fit neatly inside one another.

For example, a bulleted list uses two kinds of elements:

✓ The <ul> element specifies that the list is unordered (bulleted).

✓ The <li> elements mark each item in the list.

When you combine elements by using this method, be sure you close the

inside element completely before you close the outside element:

<ul>

<li>

Item 1

</li>

<li>

Item 2

</li>

</ul>

06_9780470916599-ch01.indd 2006_9780470916599-ch01.indd 20 11/30/10 12:23 AM11/30/10 12:23 AM