TOC Example

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, <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.

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.

Semantic clarity

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 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.

Courtesy of: Wikipedia

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License