Text-Level Elements

Text-level elements are mixed with text inside the bridge elements and inside the element DT. Text-level elements indicate the function of a certain word or a phrase. Here is an example of a paragraph with text and several text-level elements. Note that text-level elements can be nested inside each other. Figure A.4 shows the result of the example.

 <P>A <DFN>square</DFN> is a rectangle of which all sides are of equal length. <EM >Squares should <STRONG>not</STRONG> be used for solving problem A.</EM></P>

Figure A.4. DFN, EM, and STRONG elements.

All text-level elements accept the attributes CLASS, LANG, DIR, and STYLE.

Most text-level elements can be nested inside each other arbitrarily, but a few have restrictions. The unrestricted ones are ACRONYM, ABBREV, B, BDO, CITE, CODE, DFN, EM, I, KBD, LABEL, Q, SPAN, STRONG, SUB, SUP, VAR, and LEGEND. The ones with restrictions are A, BR, IMG, INPUT, SELECT, and TEXTAREA.

Normal text-level elements EM and STRONG mark words or phrases that need emphasis or strong emphasis. DFN contains a word or term that is being defined. The first occurrence of a new term in a technical document is often marked this way. CODE and KBD are mostly used when talking about computer-related topics. They indicate literal code (such as a word from a program or a command) and literal text to type on the keyboard. VAR indicates a variable, either in a computer program or in a formula. SUB and SUP are for subscripts (like the 2 in H₂O) and superscripts (like the 2 in E=mc²). Although HTML doesn't have support for mathematical formulas, these elements can help create the most simple one.

ACRONYM and ABBREV mark acronyms (abbreviations that are pronounced as a single word, such as NATO, NASA, UNICEF, and Benelux) and abbreviations (such as USA, viz., i.e., W3C, and CSS). Marking them might allow a smart browser to expand them, but it is especially useful for a speech synthesizer.

B and I indicate that words were bold or italic in the text from which the current words are derived. They are useful when the text is converted from a document format that doesn't allow the role of the words to be encoded. For text entered directly in HTML, EM and STRONG are usually better choices.

CITE encloses a bibliographic reference (a type of link that is not a hyperlink), such as (Raggett 1996). Q encloses a short quotation or a word that is used metaphorically. The appropriate quote marks are inserted by the browser; for example, the sentence: He said: <q>Hello!</q>.

A LABEL is used in conjunction with a form element (SELECT, TEXTAREA, INPUT, FIELDSET) or with an OBJECT element to provide a description for it. Usually, it occurs near that other element. It has an extra attribute, FOR, which is required and that contains the ID of the element that it is associated with. Typically, in a browser, clicking a label activates the element to which it is joined and puts the cursor on it.

LEGEND can occur only inside a fieldset and provides a caption for the group of form controls enclosed by the fieldset.

The BDO element is needed for certain rare cases that can occur in documents that contain both left-to-right text (such as English) and right-to-left text (such as Hebrew). It stands for Bi-Directional Override. It has a required attribute, DIR, that is either ltr or rtl. Depending on this attribute, it tells the HTML program that the content is left-to-right or right-to-left, even if the characters inside the element would normally be used in the opposite direction. (This is different from the DIR attribute that all elements have, and that indicates only the default direction, for those characters that don't have a definite direction. For more information, see the CSS2 specification.)

SPAN is a general-purpose element that can be used when none of the other text-level elements is suitable. It must have either a CLASS attribute to indicate the role of the element or a STYLE attribute to set a style directly; for example, to mark people's names, you could do the following:

<SPAN >Berners-Lee</SPAN>.

Restricted Text-Level Elements

Restricted text-level elements differ from normal text-level elements in what can be nested inside them. Apart from A, they don't allow other text-level elements in their content.

A is perhaps HTML's most important element: It is the source anchor of a hyperlink. Besides the normal attributes (CLASS, ID, STYLE, LANG, and DIR), it has a required attribute HREF that contains the URL of the target anchor. It accepts all text-level elements in its content except other A elements.

The BR indicates a forced line break, without starting a new paragraph. It has no content and no end tag.

The IMG element inserts images and other simple objects. It has a required attribute, SRC, which holds the URL of the image, and another required attribute, ALT, which can hold short text that is displayed when the image itself can't be displayed (for example, <IMG src="/books/2/664/1/html/2/w3c_48x48" ALT="W3C logo">). The element has no content and no end tag.

INPUT is an element used in interactive forms. It creates a button or a short text field, depending on the value of the (required) TYPE attribute: text, password, checkbox, radio, submit, reset, file, hidden, or image. It has a required NAME attribute and a VALUE attribute that is required for some values of the TYPE attribute. INPUT has no content and no end tag. Here are some examples of input elements (Figure A.5 shows how they typically look):

 <FORM ACTION="xx">   <P><INPUT TYPE="text" NAME="fld9" VALUE="initial">     Name   <P><INPUT TYPE="radio" NAME="r7" VALUE="a" CHECKED>     Option 1   <P><INPUT TYPE="radio" NAME="r7" VALUE="b">     Option 2   <P><INPUT TYPE="radio" NAME="r7" VALUE="c">     Option 3   <P><INPUT TYPE="checkbox" NAME="pu8">     Check if you are sure   <P><INPUT TYPE="submit" VALUE="Send!" NAME="sub-a">     <INPUT TYPE="reset" VALUE="Reset"> <FORM>

Figure A.5. Examples of INPUT elements.

SELECT is a list or menu for use in an interactive form. It can contain only one or more OPTION elements or OPTGROUP elements that, in turn, contain OPTION elements. An OPTION element contains only text, no other elements. The SELECT element has a required NAME attribute with an arbitrary text as its value. For other attributes, refer to a full HTML specification. Figure A.6 shows the result of this code:

 <FORM ACTION="xx">   <P><SELECT NAME="hh44">     <OPTION SELECTED>option 1</OPTION>     <OPTION>option 2</OPTION>     <OPTION>option 3</OPTION>     <OPTION>option 4</OPTION>   </SELECT>   <P>Select one of the above. </FORM>

Figure A.6. Example of a SELECT.

TEXTAREA is another element for interactive forms. It represents a fill-in field of more than one line. It can contain text but no other elements. It has three required attributes: NAME, ROWS, and COLS. NAME contains an arbitrary text. ROWS contains a number indicating the height of the field. COLS contains the width of the field. Other attributes are optional:

 <FORM ACTION="xx"> <TEXTAREA NAME="kk12" ROWS=3 COLS=15> Edit this text. </TEXTAREA> </FORM>

OBJECT is a sophisticated element. It can insert images into text, include applets (small programs that run inside a document), and in general put arbitrary multimedia objects inside the text, including other HTML documents. In principle, it makes IMG obsolete, but IMG is retained for simple cases. The most important attribute of OBJECT is DATA, which contains a URL that points to an external object. It has several other attributes, which are used for some types of objects. Because this is only a quick reference, we can't list all the different multimedia objects and their attributes here.

Although OBJECT is itself a text-level element, its content is the same as that of BODY. However, in the ideal case, that content is not displayed. The intention is that the content is only displayed when the object itself could not be displayed, for whatever reason. The content constitutes an alternative, in the same way that the ALT attribute of IMG is an alternative. But, the alternative of OBJECT is much richer; it can be almost a complete HTML document. Here is a simple example:

 <P>Look at yourself:   <OBJECT DATA="nonexistent.ngf">     <P>Your browser failed to load the     NGF image. If it had worked, you     would have seen a gold edged     mirror that reflected your face.<P>   </OBJECT> </P>

BUTTON: a Text-Level Container Element

A BUTTON element is a bit like a I-cell inline table (see the section "Inline tables" in Chapter 17). It can occur only in bridge elements and text-level elements, but it is itself a container. It is normally used as a submit or reset button in a form, with the difference that the label is not restricted to one line of text without markup, but can be any HTML text. Usually, it is rendered with an outset border, but different browsers may show it slightly differently. Here is an example (see Figure A.7):

 <P>Press   <BUTTON STYLE="width: 8em">     <H2>Red</H2>     <P>to select red</P>   </BUTTON> or   <BUTTON STYLE="width: 8em">     <H2>Green</H2>     <P>to select green</P>   </BUTTON> ...</P>

Figure A.7. Examples of BUTTON elements.