The Body Element

BODY can contain three types of elements: container elements, bridge elements, and special elements. Container elements can contain exactly the same elements as the BODY. These elements create divisions, interactive forms, long quotations, and other high-level structures. Bridge elements contain text and text-level elements. Paragraphs and headings are examples of bridge elements. Special elements include lists, tables, and certain elements for interactive forms.

All the elements that can appear in the BODY can appear any number of times. All of them accept these five attributes: CLASS, STYLE, ID, LANG (to indicate the language in which the element is written), and DIR (to indicate the writing direction: ltr is left-to-right, rtl is right-to-left for Hebrew and Arabic).

Container Elements

The container elements are DIV, BLOCKQUOTE, ADDRESS, FORM, and FIELDSET.

DIV is a general division, such as a chapter, section, abstract, or note. It is customary to indicate the type of division in the CLASS attribute (for example, <DIV >).

BLOCKQUOTE is a quotation consisting of one or more paragraphs.

ADDRESS is a name and/or address, usually after a heading or a blockquote, or at the end of the document, to indicate the author of the document or the quotation.

FORM is a container for an interactive form. The ACTION attribute contains the URL of the server that will process the form. The METHOD attribute contains the method used to send the form data to the server, either get, post, or put.

The FIELDSET element groups a part of a form. In addition to all other elements that can occur in BODY, it can also have one LEGEND element in its content, which, if present, must be the first element in the FIELDSET. Browsers can use the FIELDSET to activate a set of form elements together. The LEGEND is a bridge element.

Bridge Elements

The bridge elements are P, H1, H2, H3, H4, H5, H6, and PRE. The P is a normal paragraph. H1 to H6 are headings of different levels. H1 is the most important. PRE means "preformated." Typically, the white-space property for this element is set to pre (see Chapter 6, "The fundamental objects").

Special Elements

The special elements are OL, UL, DL, HR, and TABLE. OL and UL are simple lists. They contain only LI (list item) elements (one or more). The LI element itself acts like a container element: It accepts the same content as the BODY element. UL is typically shown with a bullet as a label and OL typically uses numbered labels. For example (compare Figure A.1):

 <UL>   <LI><P>First item</P></LI>   <LI><P>Second item</P></L> </UL> <OL>   <LI><P>First item</P></LI>   <LI><P>Second item</P></LI> </OL>

Figure A.1. Unordered and ordered lists.

DL is a definition list. It contains one or more definitions, where each definition consists of one or more DT (term) elements, followed by one or more DD (definition) elements. The DT element is like a bridge element: It contains text and text-level elements. The DD is a container: It contains the same elements as BODY. Figure A.2 shows how the following DL example might look.

 <DL>   <DT>term A</DT>   <DD><P>Definition of term A</P></DD>   <DT>term B1</DT>   <DT>term B2</DT>   <DD><P>Definition for terms B1 and B2</P></DD> </DL>

Figure A.2. Definition list.

HR is an element without content and without an end tag. Its purpose is to separate paragraphs without grouping them. It is usually rendered as a horizontal rule (hence its name) or simply as white space.

The TABLE element creates a table. A table has a complex structure (see Chapter 17, "Tables"), but the main part consists of rows of cells. The content of the table starts with three optional parts: a CAPTION, a THEAD, and a TFOOT (in that order); after that are one or more TBODY, which contain the actual table.

The CAPTION is a bridge element: It may contain only text and text-level elements. It defines a caption that can be displayed above or below the table.

The THEAD contains the first few rows of the table, those that contain the column headings. Putting those headings in the THEAD allows certain browsers to treat them specially, but they can also be put in the table's body. TFOOT also contains column headings, possibly the same, but they're meant to be at the bottom of the columns. For small tables, it is okay to omit the TFOOT and put any headings directly in the table's body.

The table's body is contained in one or more TBODY elements. In large tables, rows can be grouped together into multiple TBODYs. For small tables, a single TBODY suffices.

THEAD, TFOOT, and TBODY all have the same structure. They contain one or more TR (Table Row) elements. Each TR contains zero or more table cells.

There are two types of table cells: TH and TD. The former is for table headings, and the latter for table data. TH and TD act like containers: They can contain the same elements as the BODY element. TH and TD can have two attributes: COLSPAN and ROWSPAN. They indicate, respectively, how many columns and how many rows the cell spans. The default is 1.

Here is an example of a simple table. (To make it easier to read, all end tags are omitted; according to HTML 4.0, this is allowed.) Figure A.3 shows the result.

 <TABLE>   <TBODY>     <TR>       <TH ROWSPAN=2>       <TH COLSPAN=4><P>Year 1996     <TR>       <TH><P>Q1       <TH><P>Q2       <TH><P>Q3       <TH><P>Q4     <TR>       <TH><P>cars       <TD><P>365       <TD><P>320       <TD><P>258       <TD><P>191     <TR>       <TH><P>bicycles       <TD><P>165       <TD><P>208       <TD><P>358       <TD><P>391     <TR>       <TH>trains       <TD><P>35       <TD><P>45       <TD><P>53       <TD><P>72 </TABLE>

Figure A.3. A simple table.