Span and Div HTML Tags

Using SPAN & DIV with CSS

<Span> and <Div> tags have been around since version 3.2 of html.
What are these generic containers and what are they use for?

Much of the usefulness these two tags can provide rely on using style sheets as the tags themselves have only a couple of attributes. If you want your web pages to accommodate NS 4 or earlier or IE3 or earlier these tags should not be used (NS 4.x does provide limited CSS support). A useful CSS compatibility guide is available at: http://webreview.com/style/css1/charts/mastergrid.shtml

Personally, I'm considering abandoning support for early browsers on my web pages. The vast majority of web users have IE5+, NS6+ or equivalent browsers. Is it worth the effort to make sure web pages usably render in old browsers? I'm not thinking about (or suggesting) going to the bleeding edge, but maybe insisting my pages be viewable with pre-HTML 3.2 browsers is going to the other extreme. There are valid arguments for both positions. I have to wonder though - how many people with say IE3 or NS4.0, are going to be looking at and downloading my software?

DIV was introduce as a generic block level element who's original purpose was to serve as a container for the logical 'parts' or divisions of a document. For example, a book might have a table of contents, an introduction, chapters and so forth. The idea was to place each part or division of the document into its logical division container and then assemble the whole document from the constituent containers.

The Span tag is a generic inline container element. Its major purpose (in conjunction with style sheets) is to provide a method of applying a style to a portion of a document that is not neatly enclosed within a tag pair. The scope of the 'span' (as with other inline elements) can be within another tag or can encompass multiple tags.

Of note, use of Span in NS 6.x is more limited than in IE and application of a span's style sheet to its content seems inconsistent. NS will consistently propagate only Font related style attributes. To obtain equivalent rendering in IE & NS, style sheets used with Span should only specify font specific attributes. In the examples of using Span, I discuss this in more detail.

Also of note, inline style and style sheet definitions are not equivalent. The HTML specification allows inline styles attributes to be more limited than defined style sheets. NS follows this model where as IE allows a much broader range of inline style attributes. It is much more likely a page will render the same in IE & NS if the style information is defined in a style sheet rather than inline. Examples of this are included in the discussion of using Div.

DIV (Division) tag - syntax

<DIV Attribute=value>
* division content *
</DIV>

Allowed Attributes:
ID = string
CLASS = string
STYLE = StyleSheet; external, local or inline
TITLE = Text; #IMPLIED advisory title/amplification
ALIGN = ( left | center | right | justify )
SCRIPTING EVENTS = string

Span tag - syntax

<SPAN Attribute=value>
* text OR tags span applies to *
</SPAN>

Allowed Attributes:
ID = string
CLASS = string
STYLE = string
TITLE = string
LANG = Language (i.e. RU - Russian)
DIR = ltr|rtl; specifies if text reads left to right or right to left.
SCRIPTING EVENTS = string

Span & Div Attribute Details (HTML 4.0)

id = name (Case Sensitive)
This attribute assigns a name to an element. This name must be unique in a document. The id attribute has several roles in HTML:

-As a style sheet selector.
-As a target anchor for hypertext links. Note: browser support for using ID as a bookmark anchor is -not consistent. Using <a name="book_mark_name"> is more widely supported.
-As a means to reference a particular element from a script.
-As the name of a declared OBJECT element.
-For general purpose processing by user agents (e.g. for identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc.).

class = cdata-list (Case Sensitive)
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters. The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The class attribute has several roles in HTML:

-As a style sheet selector (when an author wishes to assign style information to a set of elements).
-For general purpose processing by user agents.

style = style (Not Case Sensitive)
This attribute specifies inline style information for the current element. In CSS, property declarations have the form "name : value" and are separated by a semi-colon. To specify style information for more than one element, authors should use the STYLE element (Tag). For optimal flexibility, authors should define styles in external style sheets.

title = text (Case Sensitive)
This attribute offers advisory information about the element for which it is set. Unlike the TITLE element, which provides information about an entire document and may only appear once, the title attribute may annotate any number of elements. Values of the title attribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object). Audio user agents may speak the title information in a similar context.

lang = language-code (Not Case Sensitive)
This attribute specifies the base language of an element's attribute values and text content. The default value of this attribute is unknown.
Language information specified via the lang attribute may be used by a user agent to control rendering in a variety of ways. Some situations where author-supplied language information may be helpful include:

Assisting search engines
Assisting speech synthesizers
Helping a user agent select glyph variants for high quality typography
Helping a user agent choose a set of quotation marks
Helping a user agent make decisions about hyphenation, ligatures, and spacing
Assisting spell checkers and grammar checkers
NOTE: the LANG attribute is not widely supported.

dir = LTR | RTL (Not Case Sensitive)
This mandatory attribute specifies the base direction of the element's text content. This direction overrides the inherent directionality of characters as defined in [UNICODE]. Possible values:
LTR: Left-to-right text.
RTL: Right-to-left text.

align = left|center|right|justify|char (Not Case Sensitive)
This attribute specifies the alignment of data and the justification of text in a cell.
Possible values:
left: Left-flush data/Left-justify text. This is the default value for table data.
center: Center data/Center-justify text. This is the default value for table headers.
right: Right-flush data/Right-justify text.
justify: Double-justify text.
char: Align text around a specific character. If a user agent doesn't support character alignment, behavior in the presence of this value is unspecified.

SCRIPTING EVENTS = string
The following scripting events are available with SPAN & DIV tags:
ONCLICK, when the mouse button is clicked on an element;
ONDBLCLICK, when the mouse button is double-clicked on an element;
ONMOUSEDOWN, when the mouse button is pressed over an element;
ONMOUSEUP, when the mouse button is released over an element;
ONMOUSEOVER, when the mouse is moved onto an element;
ONMOUSEMOVE, when the mouse is moved while over an element;
ONMOUSEOUT, when the mouse is moved away from an element;
ONKEYPRESS, when a key is pressed and released over an element;
ONKEYDOWN, when a key is pressed down over an element;
ONKEYUP, when a key is released over an element.

e.g. - <DIV ONMOUSEOVER='window.status="The mouse pointer is over me";' ONMOUSEOUT = 'window.status="";'>

Using Span and Div

The discussion about using these tags will assume users do not have CSS challenged browsers. As you can see from the attribute lists for these tags, they don't do a whole lot. What can we use them for and why bother?

Span details

Use of the inline tag, Span is fairly intuitive. Suppose you have 2 consecutive <P> elements that you want to apply special style attributes to. Without using Span, you can accomplish this by the following:

<P style="selector list; ...;"> p one text <P>
<P style="selector list; ...;"> p two text <P>

Or utilizing html inline elements such as Font:

<font size="2">
<P> p one text <P>
<P> p two text <P>
</font>

Utilizing a Span tag allows you to simplify the page a bit by only having to specify the style information a single time:

<Span style="selector list; ...;">
<P> p one text <P>
<P> p two text <P>
</Span>

You could also define a style sheet and use that to specify the Span's style information. This has the advantage of allowing you to utilize the style information in other parts of the web page. As an example, let's make the paragraph who’s text is twice normal size, bold and highlighted. This is some "emphatic" information! Let me take a moment to point out there are two ways to specify a style sheet: we can define our own 'emphatic' span class or we can define an 'emphatic' style sheet. A class can only be applied to the tag it is defined for. A named style sheet can be applied to any element (assuming it has attributes appropriate for that element). Below are examples of both.

/* this is a style sheet named empathic */
#emphatic {
font-size: 2em;
font-weight: bold;
background: yellow;
}
/* this is a class of span named emphatic */
span.emphatic {
font-size: 2em;
font-weight: bold;
background: yellow;
}

To use the style sheet named emphatic we use:
<Span id="emphatic">
* tags or text to apply span to *
</Span>

To use our emphatic span class we use:
<Span class="emphatic">
* tags or text to apply span to *
</Span>

During testing of this code, I discovered that NS6 does not propagate the style sheets background color to a Span’s children if the child is an html block element. It will propagate background color if a span is used inside a block element. Other font specific attributes are propagated. For example:

<Span class="emphatic">
<p>This does not have a yellow background in NS6</p>
<p>This DOES have a yellow background in IE and NS4</p>
</Span>

<p> <Span class="emphatic">This DOES have a yellow background in all browsers</Span></p>

What can't we just apply our style sheet to the <p> elements? We can. However, they will not render quite the same. If we use the above emphatic style sheet with a <p> element, you find the entire paragraph background is yellow - even the portion that is white space. If we enclose the <p> element in a span that uses the emphatic style sheet, only the portion containing text will have the yellow background.

Being able to apply style information across multiple tags is one good use of <span>. Another is where we need to apply style information to only a portion of the information within a tag. Take for example the following sentence:
<p>This sentence is normal text except for this emphatic word<p>

The span tag allows us to apply the emphatic style sheet to a portion of the above sentence:
<p>This sentence is normal text except for this <span class="emphatic">emphatic </span> word<p>

DIV details

Use of DIV is more abstract than Span. DIV is a block level element which means it's characteristics when rendered are similar to the <p> element. Whatever elements are contained in a DIV are treated as a single unit with respect to the documents flow. Use of DIV will cause line breaks above and below the division. In conjunction with CSS, DIV can also be used to control position and float blocks of information on a web page (see Web Corner in ASPECTS Jan 2002 issue).

Div can be used to set & control style information for a group of elements. Suppose we wanted to indent a group of paragraphs and want the indent distance to be the width of 2 characters. We can define a style sheet as follows:
#indent_two {
padding-left: 1em;
}

To apply the indent we use:

<div id="indent_two">
<p> first indented paragraph </p> <p>second indented paragraph</p>
</div>

What’s em? This is the height and width of a character as defined by the containers font. Since we haven't specified any font in these examples, this refers to the web pages default font. Of note, IE & NS do NOT use the same metric for a character's height. This means use of em (or %) to adjust vertical spacing will give different results with IE & NS. The example below demonstrates the differences between a character’s height metric in IE & NS.

We can extend this concept. Suppose you want to display a list but what to have explicit control over the spacing of the list's items & sub-items? You also want to control the horizontal positioning of the list as a whole. For this example, we'll indent each item 2 characters. Our vertical spacing of the list items will display each item directly below the previous item. And we want the list to display beginning at the middle of the page. We build a style sheet as follows to control the horizontal & vertical spacing of the list items:

#indent_list {
padding-left: 1em;
/* in NS margin-top -1.5 produces no visible change */
margin-top: -1.5em;
}

To display the list:

<div style="margin-left=50%"> <p>List Title - shows left margin of list </p>
<div id="indent_list"> <p> first list item </p>
</div>
<div id="indent_list"> <p>second list item</p>
<div id="indent_list"> <p>second list item sub item 1</p>
</div>
</div>
</div>

To position the list on the page, we use the list's div container and set's it's left margin to the horizontal position we want the list to begin. In the example I set the list to begin half way across the page. We can't use an align or text-align to center the list - the DIV's inside our container would inherit the attribute & override our padding-left attribute and our 'indent' would disappear.

The above code does not correctly display in NS. The list will display with its left margin at window's left margin rather than at the 50% we specified. This is an example of inline style attribute being more limited than those allowed with a style sheet. If we use a style sheet rather than an inline style to specify the left margin, the list renders the same in both IE & NS:

#DivMargin {
margin-left:50%;
}

To display the list:

<div id="DivMargin"> <p>List Title - shows left margin of list </p>
<div id="indentList"> <p> first list item </p>
</div>
<div id="indentList"> <p>second list item</p>
<div id="indentList"> <p>second list item sub item 1</p>
</div>
</div>
</div>

Conclusions

Span and Div provide us with generic containers that are useful to apply attributes via style sheets. Despite both IE & NS claiming they are 'standards compliant' there are still some significant differences in the browsers application of those standards. Some rules to ensure your pages render the same in both include:

1) Style sheets used by Span should only contain font specific information.
2) Avoid inline style attributes, use a named style sheet or class instead.
3) Avoid specifying vertical spacing attributes. IE & NS use different font metrics and relative values (em, %) will not produce the same results. Specifying absolute values (px, pt, etc.) does work, but there is still an inherent problem since you can't know the viewers window size or font size.

Download these samples (and other related samples) at: http://www.dalesplace.net/spandiv.zip

Web resources:

http://www.hwg.org/resources/faqs/cssFAQ.html
http://www.haughey.com/csshorrors/
http://www.jalfrezi.com/styles.htm
http://jigsaw.w3.org/css-validator/validator-text.html
http://validator.w3.org/