An HTML element is an individual component of an HTML document. HTML documents are composed of a tree of HTML elements and other nodes, such as text nodes. Each element can have attributes specified. Elements can also have content, including other elements and text. HTML elements represent...
are used where parts of a document cannot be semantically described by other HTML elements.
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 heading of the page; user agent
User agent
In computing, a user agent is a client application implementing a network protocol used in communications within a client–server distributed computing system...
s should distinguish them accordingly. However, as span and 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 div and 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
Cascading Style Sheets
Cascading Style Sheets is a style sheet language used to describe the presentation semantics of a document written in a markup language...
(CSS).
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">10th Feb 2010</span> may be used specifically to indicate a date.
There are three main reasons to use span and div tags with class or id attributes:
Styling with CSS
Perhaps the most common use of span and div elements is 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
Voice browser
A voice browser is a web browser that presents an interactive voice user interface to the user. In addition, it typically provides an interface to the PSTN or a PBX. Just as a visual web browser works with HTML pages, a voice browser operates on pages that specify voice dialogues...
, 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.
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
World Wide Web
The World Wide Web is a system of interlinked hypertext documents accessed via the Internet...
will develop in years and decades to come. Web page
Web page
A web page or webpage is a document or information resource that is suitable for the World Wide Web and can be accessed through a web browser and displayed on a monitor or mobile device. This information is usually in HTML or XHTML format, and may provide navigation to other web pages via hypertext...
s 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
Google
Google Inc. is an American multinational public corporation invested in Internet search, cloud computing, and advertising technologies. Google hosts and develops a number of Internet-based services and products, and generates profit primarily from advertising through its AdWords program...
and others use proprietary information processing algorithms of considerable complexity.
The World Wide Web Consortium is the main international standards organization for the World Wide Web .Founded and headed by Tim Berners-Lee, the consortium is made up of member organizations which maintain full-time staff for the purpose of working together in the development of standards for the...
(W3C) has for some years been running a major Semantic Web
Semantic Web
The Semantic Web is a collaborative movement led by the World Wide Web Consortium that promotes common formats for data on the World Wide Web. By encouraging the inclusion of semantic content in web pages, the Semantic Web aims at converting the current web of unstructured documents into a "web of...
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.
A microformat is a web-based approach to semantic markup which seeks to re-use existing HTML/XHTML tags to convey metadata and other attributes in web pages and other contexts that support HTML, such as RSS...
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
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
Document Object Model
The Document Object Model is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Aspects of the DOM may be addressed and manipulated within the syntax of the programming language in use...
) of the web page. The most common reason for this is that the page is delivered with client-side JavaScript
Client-side JavaScript
Client-side JavaScript is JavaScript that runs on the client-side. While JavaScript was originally created to run this way, the term was coined because the language is no longer limited to just client-side, since server-side JavaScript is now available.-Environment:The most common Internet media...
that will produce on-going dynamic behavior 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, in order to affect it. The following markup would suffice: <div id="price">$45.99</div>. Another example is the Ajax
Ajax (programming)
Ajax is a group of interrelated web development methods used on the client-side to create asynchronous web applications...
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
Dynamic web page
A dynamic web page is a kind of web page that has been prepared with fresh information , for each individual viewing. It is not static because it changes with the time , the user , the user interaction , the context A dynamic web page is a kind of web page that has been prepared with fresh...
, this may include the use of automatic page testing tools such as HttpUnit
HttpUnit
HttpUnit is an open source software testing framework used to perform testing of web sites without the need for a web browser. HttpUnit supports HTML form submission, JavaScript, HTTP basic access authentication, automatic page redirection, and cookies. Written in Java, HttpUnit allows Java test...
Various code-driven testing frameworks have come to be known collectively as xUnit. These frameworks allow testing of different elements of software, such as functions and classes...
family, and load or stress testing tools such as Apache JMeter when applied to form-driven
Form (web)
A webform on a web page allows a user to enter data that is sent to a server for processing. Webforms resemble paper or database forms because internet users fill out the forms using checkboxes, radio buttons, or text fields...
web sites.
Overuse
The judicious use of div and span is a vital part of HTML and XHTML markup. However, they are sometimes overused.
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
HTML element
An HTML element is an individual component of an HTML document. HTML documents are composed of a tree of HTML elements and other nodes, such as text nodes. Each element can have attributes specified. Elements can also have content, including other elements and text. HTML elements represent...
structures available in HTML, one of which may be preferable to a homemade mixture of div and span elements.
For example, this...
Main page
Contents
Help
...is usually preferable to this:
Other examples of the semantic use of HTML rather than div and 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 div, span or table elements used for such purposes.
HTML5 introduces many new semantic elements and attributes that are intended to be used in these ways. A few examples include the header, footer, nav and figure elements.
An HTML element is an individual component of an HTML document. HTML documents are composed of a tree of HTML elements and other nodes, such as text nodes. Each element can have attributes specified. Elements can also have content, including other elements and text. HTML elements represent...
The term CDATA, meaning character data, is used for distinct, but related, purposes in the markup languages SGML and XML. The term indicates that a certain portion of the document is general character data, rather than non-character data or character data with a more specific, limited...
JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....
The Semantic Web is a collaborative movement led by the World Wide Web Consortium that promotes common formats for data on the World Wide Web. By encouraging the inclusion of semantic content in web pages, the Semantic Web aims at converting the current web of unstructured documents into a "web of...
