The Best-Practice Guide to xHTML and CSS phần 2 pot

Thirdly, all attribute values must be in quotation marks (and all attributes must have

values). For example, <a href=http://www.htmldog.com>HTML Dog</a> is not valid—

it must be <a href=”http://www.htmldog.com”>HTML Dog</a>.

Fourthly, elements must be nested properly.

Nested elements are elements enclosed in other elements.

An example is:

<p>Why not try out <a href=”http://www.htmldog.com/“>HTML Dog</a>?</p>

In this case, the a element (a link—see Chapter 3) is nested inside the p element (a

paragraph—see Chapter 2, “Text”).

You have to be careful when nesting elements—one must fit snugly inside another.

So, for example,

<em><a href=”http://www.htmldog.com/“>HTML Dog</a></em>

is good, but

<em><a href=”http://www.htmldog.com/“>HTML Dog</em></a>

is not. If the a element is to be inside the em element (emphasis—see Chapter 2)

then the closing tag for the a element must come before the closing em tag.

It’s a Family Affair

The relationship of one element to another can be defined in terms of family con￾nections. With nested elements, an element within another element can be called

a child of the containing element. In turn, the containing element is known as

the parent of that child.

So in <p><em>Lemon</em> pie</p>, the p element is the parent of the em ele￾ment, which is the child of the p element.

You will also come across terms such as siblings, ancestors, and descendants.

HTML Syntax  | 

 |  chapter 1: Getting Started

Block and Inline Elements

All HTML elements are one of two types—block or inline.

Block elements collect together other block elements or inline elements, or even

plain old textual content, and are used to structure something that is greater

than a simple line of content. They include div (used to divide up code by split￾ting it into chunks—explained in detail later), p (paragraphs—see Chapter 2)

and table (Chapter 8, “Tables”).

Inline elements are just that—elements within a line. They include span (see later),

em (emphasis—see Chapter 2) and img (image—see Chapter 4, “Images”).

Keep in mind that you can’t have a block element inside an inline element (such

as <em><p>Ra ra</p></em>). See Appendix A for more details on what elements

can be nested within certain elements.

Common Attributes

Throughout this book you will come across many attributes that are specific to cer￾tain tags or collections of tags. There is, however, a group of “common attributes”

that can be used with most tags.

The common attributes consist of core, i18n, and event attributes.

Core attributes

The core attributes are class, id, title, and style.

Classes and ids apply an extra little label to an element, and are used for page

anchors (a position on a page to which a link can jump, as explained in Chapter 3),

manipulation of elements with JavaScript, and, most commonly, as a way of directly

targeting an element with CSS.

<div id=”content”>

<p class=”chair”>Lorem ... ipsum ... etc.</p>

<p>Lorem ... schmipsum ... etc.</p>

<p class=”chair”>Etc. ... ipsum ... schmipsum.</p>

</div>

Figure 1.1 The illustrations in this chapter are taken from the HTML Dog website

(www.htmldog.com).

HTML Syntax  |