## The DIV and SPAN elements

Attributes defined elsewhere

- id, class (document-wide identifiers)

- lang (language information), dir (text direction)

- title (element title)

- style (inline style information)

- align (alignment)

- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.

Suppose, for example, that we wanted to generate an HTML document based on a database of client information. Since HTML does not include elements that identify objects such as "client", "telephone number", "email address", etc., we use DIV and SPAN to achieve the desired structural and presentational effects. We might use the TABLE element as follows to structure the information:

    <!-- Example of data from the client database: -->
    <!-- Name: Stephane Boyera, Tel: (212) 555-1212, Email: sb@foo.org -->

    <DIV id="client-boyera" class="client">
    <P><SPAN class="client-title">Client information:</SPAN>
    <TABLE class="client-data">
    <TR><TH>Last name:<TD>Boyera</TR>
    <TR><TH>First name:<TD>Stephane</TR>
    <TR><TH>Tel:<TD>(212) 555-1212</TR>
    <TR><TH>Email:<TD>sb@foo.org</TR>
    </TABLE>
    </DIV>

    <DIV id="client-lafon" class="client">
    <P><SPAN class="client-title">Client information:</SPAN>
    <TABLE class="client-data">
    <TR><TH>Last name:<TD>Lafon</TR>
    <TR><TH>First name:<TD>Yves</TR>
    <TR><TH>Tel:<TD>(617) 555-1212</TR>
    <TR><TH>Email:<TD>yves@coucou.com</TR>
    </TABLE>
    </DIV>

Later, we may easily add style sheet declaration to fine tune the presentation of these database entries.

For another example of usage, please consult the example in the section on the class and id attributes.

Visual user agents generally place a line break before and after DIV elements, for instance:

    <P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>

which is typically rendered as:

    aaaaaaaaa
    bbbbbbbbb
    ccccc

    ccccc