Subject: [css-d] What's the difference, when to use?

From: Michael_Landis at capgroup.com ([email-masked])
Date: Tue, 29 Apr 2003 09:18:02 -0700

Gerard Samuel wrote:

> Just beginning my journeys with CSS.
> With <p> <div> and <span>, I've noticed that
> <p> creates 2 line breaks before/after the open/close tags.
> <div> creates 1 line break before/after the open/close tags.
> <span> creates 0 line breaks before/after the open/close tags.
>
> Im just looking for verification on this observation.
> If Im correct, are there any rules as to when or when not to use these
> to gain a "special" effect.
>
> For example, Im currently recoding an online poll, and Im trying not to
> use tables for layout.
> The only way I can make the input and options line up in a line by line
> fashion is by ->
> <input type="checkbox" name="option[]" value="foo" /><span>bar</span>
> <div></div>
> <input type="checkbox" name="option[]" value="foo" /><span>bar</span>

Welcome to the world of CSS, Gerard! It sounds like you are also beginning
to get into the world of structural (or semantic) HTML.

Basically, each tag represents some type of information. <p> tags are
designed to represent paragraphs. Most browsers place space between
paragraphs to identify where it begins or ends. Some browsers put one full
line space between paragraphs, others place half a space. Either of these
can be overridden with CSS, though.

<div> and <span> tags are generic containers used to enclose content that
has some common purpose. <div> tags are intended to represent discrete
blocks of information, while <span> tags are intended to represent specific
information inside of a block. (More accurately, <div> tags are block-level
containers that typically create carriage returns, and <span> tags are
inline containers.)

In most circumstances, you would want to wrap information that belongs in
its own block in <div> tags, so that

<input type="checkbox" name="option[]" value="foo" /><span>bar</span>
<div></div>
<input type="checkbox" name="option[]" value="foo" /><span>bar</span>

becomes

<div><input type="checkbox" name="option[]" value="foo"
/><span>bar</span></div>
<div><input type="checkbox" name="option[]" value="foo"
/><span>bar</span></div>

This tells the browser that the label "bar" belongs with the checkbox as a
single unit. You can then apply CSS styles to the divs, to properly space
the blocks apart.

<div> tags can also contain other block-level tags like <p> and other
<div>s, but paragraphs can only contain non-block-level elements like
<span>, <em>, etc. (If you consider <p> tags as representing paragraphs it
makes some sense -- you might emphasize some text in a paragraph, but you
typically wouldn't place a paragraph inside of another paragraph, for
example.)

Another enhancement you might consider is replacing the <span> tags with
<label> tags. Inside forms, <label> tags permit you to add semantic value
to this text. You can associate labels with inputs, so that clicking the
label highlights the input as well. As an example, you can rewrite the
above checkboxes as follows:

<div><input type="checkbox" name="option[]" id="optionFoo" value="foo"
/><label for="optionFoo">foo</label></div>
<div><input type="checkbox" name="option[]" id="optionBar" value="bar"
/><label for="optionBar">bar</label></div>

As long as the "for" attribute in the label matches the "id" attribute in
the input, you can click the text and it will check/uncheck the checkbox.
You can style the label tag in the same way as you would've intended to
style the span tag. Also, the <label> tag more semantically represents the
purpose of this text.

For more information, check out the "Forms" section of the HTML 4.01
specification:

http://www.w3.org/TR/html4/interact/forms.html

This spec can also be useful (albeit a bit daunting at first) for finding
out how W3C intended HTML to be put together in a document.

HTH,

MikeL