Most HTML elements carry semantic meaning – i.e. the element describes, and can be made to function according to, the type of data contained within. For example, a
p element should contain a paragraph of text, while an
h1 element should contain the highest-level header of the page; user agents should distinguish them accordingly. However, as
div have no innate semantic meaning besides the logical grouping of the content, they can be used to specify non-standard presentation or behaviour without superfluous semantic meaning.
Differences and default behavior
There is one difference between
span. In standard HTML, a
div is a block-level element whereas a
span is an inline element. The
div block visually isolates a section of a document on the page, in the same way as a paragraph. The
span element contains a piece of information inline with the surrounding text. In practice, even this feature can be changed by the use of Cascading Style Sheets (CSS).
div elements are used purely to imply a logical grouping of enclosed elements.
When they are labeled with
div elements can denote types of information otherwise indescribable with HTML. For example,
<div id="byline">Fred Smith</div> may be used to indicate the author's name in a document, and
<span class="date">10th Feb 2010</span> may be used specifically to indicate a date.
There are three main reasons to use
div tags with
Styling with CSS
Perhaps the most common use of
div elements is to carry
id attributes in conjunction with CSS to apply layout, typographic, color, and other presentation attributes to parts of the 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.
For these reasons, and for compatibility with the concepts of the semantic web, discussed below, attributes attached to elements within any HTML should describe their semantic purpose, rather than merely their intended display properties in one particular medium. For example,
<span class="red small">password too short</span> is semantically meaningless, whereas
<span class="warning">password too short</span> is much more useful. By the correct use of CSS, on the screen 'warnings' may be rendered in a red, small font, but when printed out, they may be omitted, as by then it is too late to do anything about them. Perhaps when spoken they should be given extra stress, and a small reduction in speech-rate. The second example is semantic markup, rather than merely presentational, but serves both purposes when combined with CSS.
This kind of grouping and labeling of parts of the page content might be introduced purely to make the page more semantically meaningful in general terms. It is impossible to say how and in what ways the World Wide Web will develop in years and decades to come. Web pages designed today may still be in use when information systems that we cannot yet imagine are trawling, processing, and classifying the web. Even today's search engines such as Google and others use proprietary information processing algorithms of considerable complexity.
The World Wide Web Consortium (W3C) has for some years been running a major Semantic Web project designed to make the whole web increasingly useful and meaningful to today's and the future's information systems.
During the page design process, the designer has a clear idea of exactly the purpose and meaning of each element and sub-element of the content. If possible, and if standard HTML elements exist that express that meaning, they should be used. If not, there is no better time to encapsulate the meaning and purpose in a
div element with appropriate
id attributes. If nothing more, doing so will help future editors to maintain the markup.
The microformats movement is an attempt to build on this idea of semantic
classes. For example, microformats-aware software might automatically find an element like
<span class="tel">123-456-7890</span> and allow for automatic dialing of the telephone number.
Access from code
Less common, but just as important examples of code gaining access to final web pages, and having to use
id attributes to navigate within the page include the use of automatic testing tools. On dynamically generated HTML, this may include the use of automatic page testing tools such as HttpUnit, a member of the xUnit family, and load or stress testing tools such as JMeter when applied to form-driven web sites.
The judicious use of
span is a vital part of HTML and XHTML markup. However, the overuse of these elements, sometimes called divitis (a common mistake of not only beginners), is itself a minor form of tag soup.
For example, when structurally and semantically a series of items need an outer, containing element and then further containers for each item, then there are various list structures available in HTML, one of which may be preferable to a homemade mixture of
For example, this...
<ul class="menu"> <li>Main page</li> <li>Contents</li> <li>Help</li> </ul>
...is usually preferable to this:
<div class="menu"> <span>Main page</span> <span>Contents</span> <span>Help</span> </div>
Other examples of the semantic use of HTML rather than
span elements include the use of
fieldset elements to divide up a web form, the use of
legend elements to identify such divisions and the use of
label to identify form
input elements rather than
table elements used for such purposes.
- Harold, Elliotte Rusty (2008). Refactoring HTML. Addison Wesley. p. 133. ISBN 0-321-50363-5.
HTML does not have individual elements representing these uses. Instead they should be indicated by a
classattribute indicates the reason for formatting the text as italic: [example ...]
- Harold, Elliotte Rusty (2008). Refactoring HTML. Addison Wesley. p. 184. ISBN 0-321-50363-5.
There is no simple way to find all the unidentified lists in a site. [...] They can be marked up in dozens of different ways: as paragraphs,
divs, tables, [etc]. Once you've found a list, marking up the individual items is easy. Just use
dlinstead of the current wrapper element. [...] For example to remove the bullets add this rule to the page's CSS stylesheet: [...]
- Raggett, Dave; Arnaud Le Hors, Ian Jacobs (1999). "Adding structure to forms: the FIELDSET and LEGEND elements". HTML 4.01 Specification. W3C. Retrieved 12 July 2010.
TheCite uses deprecated parameter
FIELDSETelement allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The proper use of this element makes documents more accessible.
- van Kesteren, Anne (2010). "HTML5 differences from HTML4". W3C. Retrieved 30 June 2010.
ar:سبان وديف fa:دیواره ru:Div (html)