Span and div
From Wikipedia, the free encyclopedia
 |
This article may require more external links, but within the Wikipedia's content policies. Please improve this article by adding appropriate external links. Please remove this tag when this is done. (talk) |
 |
This article does not cite any references or sources. (November 2007) Please help improve this article by adding citations to reliable sources. Unverifiable material may be challenged and removed. |
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.
Contents |
[edit] Differences and default behaviour
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.
[edit] Practical usage
span and div elements are used purely to imply a logical grouping of enclosed elements.
When they are labelled with class or id attributes, span and 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">21st Jan 2006</span> 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, colour 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.
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.
[edit] Semantic clarity
This kind of grouping and labelling 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 are using 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 span or div element with appropriate class or 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.
[edit] Access from code
Once the HTML or XHTML markup is delivered to a page-visitor's client browser, there is a chance that client-side code will need to navigate the internal structure (or Document Object Model) of the web page. The most common reason for this is that the page is delivered with client-side JavaScript that will produce on-going dynamic behaviour after the page is rendered. For example, if rolling the mouse over a 'Buy now' link is meant to make the price, elsewhere on the page, become emphasised, JavaScript code can do this, but it needs to identify the price element, wherever it is in the markup in order to affect it. The following markup would suffice: <div id="price">$45.99</div>. Another example is the Ajax programming technique, where, for example, clicking a hypertext link may cause JavaScript code to retrieve the text for a new price quotation to display in place of the current one within the page, without re-loading the whole page. When the new text arrives back from the server, the JavaScript must identify the exact region on the page to replace with the new information.
Less common, but just as important examples of code gaining access to final web pages, and having to use span and div elements' class or 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.
[edit] Overuse
The judicious use of div and span is a vital part of HTML and XHTML markup, especially when moving away from the presentational markup mindset. However, the overuse of these elements, sometimes called divitis (a common mistake of beginners), is itself a minor form of tag soup.
