and elements are used purely to imply a logical grouping of enclosed elements. There are three main reasons to use and tags with class or id
attributes:
Styling with CSS It is common for and elements to carry class or 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 is semantically weak, whereas uses an element to signify emphasis (appearing as text in italics), 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.
Semantic clarity This grouping and labelling of parts of the page content might be introduced to make the page more semantically meaningful in general terms. 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 and allow for automatic dialing of the telephone number.
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 emphasized, JavaScript code can do this, but JavaScript needs to identify the price element, wherever it is in the markup. The following markup would suffice: . 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. Automatic testing tools also may need to navigate web page markup using and elements' class or id attributes. In
dynamically generated HTML, this may include the use of 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. == Overuse ==