Markup: Elements, Attributes, and Values

Best javascript editor debugger Ajax website
↑

Main Page

Markup: Elements, Attributes, and Values

(X)HTML is an ingenious system of including information about the content right in a text document. This informationcalled markup, accounting for the m in (X)HTMLcan include formatting instructions as well as details about the relationships between parts of the document. However, because the markup itself is comprised chiefly of text, the document is practically universally accessible.

(X)HTML has three principal types of markup: elements, attributes, and values. Later on in the book we'll also talk about declarations (see page 40) and entities (see page 336).

Elements

Elements are like little labels that identify and structure the different parts of a Web page: "This is a header, that thing over there is a paragraph, and that is important information." Some elements have one or more attributes, which further describe the purpose and content, if any, of the element.

Elements can contain text and/or other elements, or they can be empty. A non-empty element consists of an opening tag (the element's name and attributes, if any, enclosed in less than or greater than signs), the content, and a closing tag (a forward slash followed by the element's name, again enclosed in greater than and less than signs) (Figure 1.1).

Figure 1.1. Here is a typical (X)HTML element. The opening and closing tags surround the text that will be affected. In this case, the word "ephemeral" will be emphasized, which in most browsers means it will be set in italics.

An empty element looks like a combination opening and closing tag, with an initial less than sign, the element's name followed by any attributes it may have, a space, a forward slash, and the final greater than sign (Figure 1.2).

Figure 1.2. Empty elements, like `img` shown here, do not surround any text content. They have a single tag which serves both to open and close the element. In HTML the final slash is optional. In XHTML it is required.

In XHTML, the closing tag is always required In HTML, it is sometimes optional. The corresponding section in this book for each element will provide the pertinent details.

Attributes and Values

Attributes contain information about the data in the document, as opposed to being that data itself (Figures 1.3 and 1.4). In XHTML, an attribute's value must always be enclosed in quotation marks. In HTML, quotes may sometimes be omitted (see page 38) though I recommend you always use them anyway.

Figure 1.3. Here is a td element (for a table cell) with a simple attribute-value pair. Attributes are always located inside an element's opening tag. Their values should always be enclosed in quotation marks.

Figure 1.4. Some elements, like `img` shown here, can take one or more attributes, each with its own value. The order is not important. Separate each attribute-value pair from the next with a space.

While you'll find complete details about each attribute's acceptable values in this book, let me give you an idea of the kinds of values you'll run into.

Some attributes can accept any value at all, others are more limited. Perhaps the most common are those that accept enumerated or predefined values. In other words, you must select a value from a standard list of choices (Figure 1.5). In XHTML, enumerated values are always written in all lowercase letters. (In HTML, the case doesn't matter.)

Figure 1.5. Some attributes only accept specific values. For example, the `media` attribute in the `link` element can be set to `screen`, `handheld`, or `print`, among others, but you can't just make up a value for it.

Many attributes require a number or percentage for their value, particularly those describing size and length. A numeric value never includes units. Where units are applicable, as in the height of text or the width of an image, they are understood to be pixels.

The attributes controlling color can contain values that are either a color name or a hexadecimal representation of the red, green, and blue content of the color. You can find a list of the sixteen predefined color names as well as a selection of hex colors on the inside back cover of this book. You can find instructions for creating your own hex colors on page 126. Note that (X)HTML does not support numeric or percentage values for color.

Some attributes reference other files and thus must contain values in the form of a URL, or Uniform Resource Locator, a file's unique address on the Web. We'll talk more about URLs beginning on page 35.

Block vs Inline

An element can be block-level or inline. If it is block-level, it will always be displayed on a new line, like a new paragraph in a book. If it is inline, it will be displayed in the current line, like the next word in a paragraph.

Block-level elements are considered the bigger structural pieces of your Web page, and as such can usually contain other block-level elements, inline elements, and text. Inline elements, in contrast, can generally only contain other inline elements and text.

(Elements can also be list-items, which is considered distinct from block-level or inline, but it seems such a small category as to hardly warrant discussion outside of Chapter 15, Lists.)

Figure 1.6. The block-level elements, shown here highlighted in bold, are `div` and `p`. The inline elements, highlighted but without bold, are `img` and `em`.

Figure 1.7. Each block-level element starts on a new line. The inline elements (in this case, the image and the italic text) continue the line begun by the block-level element in which they are contained.

Parents and Children

If one element contains another, it is considered to be the parent of the enclosed, or child element. Any elements contained in the child element are considered descendants of the outer, parent element (Figure 1.8). You can actually create a family tree of a Web page, that both shows the hierarchical relationships between each element on the page and uniquely identifies each element.

Figure 1.8. The `div` element is parent to the `img` and both `p` elements. Conversely, the `img` and `p` elements are children (and descendants) of the `div`. The first `p` element is parent to the `em` tag. The `em` is a child of the first `p` and also a descendant (but not a child) of the `div`.

This structure is a key feature of (X)HTML code and facilitates adding style to the elements (which we'll introduce in Chapter 7, Style Sheet Building Blocks) and applying JavaScript effects to them (briefly discussed in Chapter 20, A Taste of JavaScript).

It is important to note that when elements contain other elements, each element must be properly nested, that is fully contained within its parent. Whenever you use a closing tag, it should correspond to the last unclosed opening tag. In other words, first open A then open B, then close B and then close A (Figure 1.9).

Figure 1.9. Elements must be properly nested. If you open `p` and then `em`, you must close `em` before you close `p`.

Best javascript editor debugger Ajax website
→

Markup: Elements, Attributes, and Values

Elements

Figure 1.1. Here is a typical (X)HTML element. The opening and closing tags surround the text that will be affected. In this case, the word "ephemeral" will be emphasized, which in most browsers means it will be set in italics.

Figure 1.2. Empty elements, like img shown here, do not surround any text content. They have a single tag which serves both to open and close the element. In HTML the final slash is optional. In XHTML it is required.

Attributes and Values

Figure 1.3. Here is a td element (for a table cell) with a simple attribute-value pair. Attributes are always located inside an element's opening tag. Their values should always be enclosed in quotation marks.

Figure 1.4. Some elements, like img shown here, can take one or more attributes, each with its own value. The order is not important. Separate each attribute-value pair from the next with a space.

Figure 1.5. Some attributes only accept specific values. For example, the media attribute in the link element can be set to screen, handheld, or print, among others, but you can't just make up a value for it.

Block vs Inline

Figure 1.6. The block-level elements, shown here highlighted in bold, are div and p. The inline elements, highlighted but without bold, are img and em.

Figure 1.7. Each block-level element starts on a new line. The inline elements (in this case, the image and the italic text) continue the line begun by the block-level element in which they are contained.

Parents and Children

Figure 1.8. The div element is parent to the img and both p elements. Conversely, the img and p elements are children (and descendants) of the div. The first p element is parent to the em tag. The em is a child of the first p and also a descendant (but not a child) of the div.

Figure 1.9. Elements must be properly nested. If you open p and then em, you must close em before you close p.

Figure 1.2. Empty elements, like `img` shown here, do not surround any text content. They have a single tag which serves both to open and close the element. In HTML the final slash is optional. In XHTML it is required.

Figure 1.4. Some elements, like `img` shown here, can take one or more attributes, each with its own value. The order is not important. Separate each attribute-value pair from the next with a space.

Figure 1.5. Some attributes only accept specific values. For example, the `media` attribute in the `link` element can be set to `screen`, `handheld`, or `print`, among others, but you can't just make up a value for it.

Figure 1.6. The block-level elements, shown here highlighted in bold, are `div` and `p`. The inline elements, highlighted but without bold, are `img` and `em`.

Figure 1.8. The `div` element is parent to the `img` and both `p` elements. Conversely, the `img` and `p` elements are children (and descendants) of the `div`. The first `p` element is parent to the `em` tag. The `em` is a child of the first `p` and also a descendant (but not a child) of the `div`.

Figure 1.9. Elements must be properly nested. If you open `p` and then `em`, you must close `em` before you close `p`.