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.

Span and div

In HTML and XHTML, span and div tags are used to describe content that cannot be properly described by other, more semantic tags. The div tag defines a section within an HTML or XHTML document.

Proper HTML markup language requires that all elements describe the type of data contained within. For example, in HTML and XHTML, a p (paragraph) element should contain a paragraph of text, and an h1 element should contain the highest-level header of the page. In HTML and XHTML, span and div are the only elements that carry no innate semantic meaning, besides the logical grouping of the enclosed elements.

DIV Tag

Example
A section in a document that will be displayed in green:

This is a header

This is a paragraph.

Definition and Usage
The

tag defines a division or a section in an HTML document.

The

tag is often used to group block-elements to format them with styles.

Tips and Notes
Tip: The div element is very often used with CSS to layout a web page.

Note: Browsers usually place a line break before and after the div element.