Span and div
div elements are used to define parts of a document so that they are identifiable when no other HTML element is suitable. While other HTML elements such as
em (emphasis) and so on accurately represent the semantics of the content, the use of
div leads to better accessibility for readers and easier maintainability for authors. Where no existing HTML element is applicable,
div can valuably represent parts of a document so that HTML attributes such as
dir can be applied.
span represents an inline portion of a document, for example words within a sentence.
div represents a block-level portion of a document such as a few paragraphs, or an image with its caption. Neither element has any meaning in itself but they allow semantic attributes (e.g.
lang="en-US"), CSS styling (e.g. color, typography) or client-side scripting (e.g. animation, hiding, augmentation) to be applied.
span element was introduced to HTML in the internationalization working group's second draft html-i18n in 1995. However, it was not until HTML 4.01 that it became part of the HTML language, appearing in the HTML 4 W3C Working Draft in 1997.
Differences and default behavior
There are multiple differences between
span. The most notable difference is how the elements are displayed. 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, and may contain other block-level components. The
span element contains a piece of information inline with the surrounding content, and may only contain other inline-level components. In practice, the default display of the elements can be changed by the use of Cascading Style Sheets (CSS), however the permitted contents of each element may not be changed. For example, regardless of CSS, a
span element may not contain block-level children.
div elements are used purely to imply a logical grouping of enclosed elements.
There are three main reasons to use
div tags with
Styling with CSS
It is common for
<div> elements 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 in support of a more semantic web, attributes attached to elements within HTML should describe their semantic purpose, rather than merely their intended display properties in one particular medium. For example, the HTML in
<span class="red-bold">password too short</span> is semantically weak, whereas
<em class="warning">password too short</em> uses an
em element to signify emphasis, and introduces a more appropriate class name. By the correct use of CSS, such 'warnings' may be rendered in a red, bold font on a screen, 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 semantically richer markup, rather than merely presentational.
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 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.
For some years, the World Wide Web Consortium (W3C) has 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.
The microformats movement is an attempt to build an 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 Apache JMeter when applied to form-driven web sites.
The judicious use of
span is a vital part of HTML and XHTML markup. However, they are sometimes overused.
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.
- "HTML5: A vocabulary and associated APIs for HTML and XHTML". 4.4 Grouping content: W3C. Retrieved 16 September 2014.<templatestyles src="Module:Citation/CS1/styles.css"></templatestyles>
- "HTML5: A vocabulary and associated APIs for HTML and XHTML". 4.5 Text-level semantics: W3C. Retrieved 16 September 2014.<templatestyles src="Module:Citation/CS1/styles.css"></templatestyles>
- "HTML/Elements/span - Web Education Community Group". 2013-06-13. Retrieved 2013-11-14.<templatestyles src="Module:Citation/CS1/styles.css"></templatestyles>
- 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,<templatestyles src="Module:Citation/CS1/styles.css"></templatestyles>
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.
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.<templatestyles src="Module:Citation/CS1/styles.css"></templatestyles>