//****** <div> and <span> use question ******//

What is the difference between <div> and <span>? I know that the technical
definitions are that <div> is for "block" elements, and <span> is for
"inline" elements, but what is the practical answer to this? I know that a
paragraph <p> is a block element, but what is the relevance? And how should
I differentiate whether I need to use a <dev> or <span> tag? I often just
assign a class to whatever element contains the element I want to format.
For example, if I want to format some text, I often esign the class with the
table in mind, and then apply the class I create to the <td> tag. Why and
when should I be using <div> and <span> elements? Thanks.

Donnie

.oO(Bryan F.)

What is the difference between <div> and <span>? I know that the technical
definitions are that <div> is for "block" elements, and <span> is for
"inline" elements, but what is the practical answer to this?

You should have a look a the specification.

7.5.3 Block-level and inline elements
http://www.w3.org/TR/html401/struct/global.html#h-7.5.3

7.5.4 Grouping elements: the DIV and SPAN elements
http://www.w3.org/TR/html401/struct/global.html#h-7.5.4

I know that a
paragraph <p> is a block element, but what is the relevance?

The relevance of what?

And how should
I differentiate whether I need to use a <dev> or <span> tag?

You only use them if there's no better element available in HTML. If you
want some special formatting of flowing text which is not possible with
standard HTML you use a span-element (which doesn't necessarily mean
that you also have to apply a class to it). If you want to group other
things together to a logical group (like a page header with banner and
breadcrumbs for example) you use a div-element. Both elements are
meaningless and should only be used if absolutely necessary.

I often just
assign a class to whatever element contains the element I want to format.
For example, if I want to format some text, I often esign the class with the
table in mind, and then apply the class I create to the <td> tag.

Hmm, maybe you should read this:

5.8.3 Class selectors
http://www.w3.org/TR/CSS21/selector.html#class-html

"Note. CSS gives so much power to the "class" attribute, that authors
could conceivably design their own "document language" based on elements
with almost no associated presentation (such as DIV and SPAN in HTML)
and assigning style information through the "class" attribute. Authors
should avoid this practice since the structural elements of a document
language often have recognized and accepted meanings and author-defined
classes may not."

In fact it's possible to style an entire website without using a single
ID or class. In most cases classes are used much too often, which
defeats many of the benefits CSS has to offer. Using classes on each and
every element is not better than the old font- and center-stuff.

Micha

Bryan F. wrote:

What is the difference between <div> and <span>? I know that the technical
definitions are that <div> is for "block" elements, and <span> is for
"inline" elements, but what is the practical answer to this? I know that a
paragraph <p> is a block element, but what is the relevance? And how should
I differentiate whether I need to use a <dev> or <span> tag? I often just
assign a class to whatever element contains the element I want to format.
For example, if I want to format some text, I often esign the class with the
table in mind, and then apply the class I create to the <td> tag. Why and
when should I be using <div> and <span> elements? Thanks.

Donnie


First, you are right that a div is block and a span is inline, but those

are "default" values and can, of course, be changed. The main issue is
that you cannot place block elements within inline elements, so you
cannot use a paragraph within a span.

Ideally, you use a span around content when you want that content to be
left inline. You use a div when you want it treated as a block or most
often, when you want to create a container for other block content, as
in when you want to position it or float it or remove it from the flow
of the html content.

The question of why and where to use div and span rather than td is not
necessarily about whether or not you are applying a css. Even if you
aren't using css, you can use divs, spans or table cells. Typically, a
div behaves as a block, meaning that divs don't (by default) sit side by
side; rather, they "stack", like a table or a paragraph. But you can
float or position a div wherever you want via css--unlike a td, which
must be contained in a table, row, etc and cannot easily be
positioned--for example, you cannot place one cell off the "screen"
while the others are visible.

I would say that I use tables for tabular data in standard table
methods. I use divs to create "regions" or containers for other blocks
of content, be they tables, paragraphs, etc. I seldom use spans, except
where I need to apply a class or ID to content within a block, like text
within a paragraph.

HTH,
--
Donna Casey | Web Designer/Developer/Instructor
Team Macromedia Dreamweaver & Fireworks | www.macromedia.com/go/team
--------------------------------------------------------------------------
Co-Author | Macromedia Studio MX Bible
Contributor | Dreamweaver MX Magic
Contributor | Fireworks MX Magic