Differences and default behavior

div and span differ from each other in one regard. In standard HTML, a div is a block-level element (and so visually isolates a section of a document on the page, in the same way as a paragraph example) whereas a span is an inline element (for containing a piece of information inline with the surrounding text example). In practice, even this feature can be changed by the use of CSS.

Practical usage:
span and div elements are used purely to imply a logical grouping of enclosed elements.

When they are labeled with class or id attributes, span and div elements can denote types of information otherwise indescribable with HTML. For example,

Fred Smith

may be used to indicate the author's name in a document, and 21st Jan 2006 may be used specifically to indicate a date.

There are three main reasons to use spans and divs with class or id attributes:


[edit

Styling with CSS

Perhaps the most common use of span and div elements in order to apply class or id attributes is when this is done in conjunction with Cascading Style Sheets (CSS) to apply layout, typographic, color and other presentation attributes to the page's content. CSS does not just apply to visual styling: when spoken out loud by a voice browser, CSS styling can affect speech-rate, stress, richness and even position within a stereophonic image.