World Library  
Flag as Inappropriate
Email this Article

Span and div

Article Id: WHEBN0003212154
Reproduction Date:

Title: Span and div  
Author: World Heritage Encyclopedia
Language: English
Subject: HTML, Navbar/doc, Span tags, Science portalbar/doc, Circa
Collection: Html, Html Tags
Publisher: World Heritage Encyclopedia

Span and div

In HTML, span and div elements are used to define parts of a document so that they are identifiable when no other HTML element is suitable. Where other HTML elements such as p (paragraph), em (emphasis) and so on accurately represent the semantics of the content then their use leads to better accessibility for readers and easier maintainability for authors. Where no existing HTML element is applicable, span and div can valuably represent parts of a document so that HTML attributes such as class, id, lang, or dir can be applied.[1][2]

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.[1][2]


  • History 1
  • Differences and default behavior 2
  • Practical usage 3
    • Styling with CSS 3.1
    • Semantic clarity 3.2
    • Access from code 3.3
  • Overuse 4
  • See also 5
  • References 6
  • External links 7


The 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.[3]

Differences and default behavior

There are multiple differences between div and 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.[4]

Practical usage

span and div elements are used purely to imply a logical grouping of enclosed elements.

There are three main reasons to use span and div 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 password too short is semantically weak, whereas password too short 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.

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 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 123-456-7890 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 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. 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.

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 Apache JMeter when applied to form-driven web sites.


The judicious use of div and span is a vital part of HTML and XHTML markup. However, they are sometimes overused.

Various list structures available in HTML may be preferable to a homemade mixture of div and span elements.[5]

For example, this:

... 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.[6]

HTML5 introduces new elements; a few examples include the header, footer, nav and figure elements.[7]

See also


  1. ^ a b "HTML5: A vocabulary and associated APIs for HTML and XHTML". 4.4 Grouping content: W3C. Retrieved 16 September 2014. 
  2. ^ a b "HTML5: A vocabulary and associated APIs for HTML and XHTML". 4.5 Text-level semantics: W3C. Retrieved 16 September 2014. 
  3. ^ "HTML/Elements/span - Web Education Community Group". 2013-06-13. Retrieved 2013-11-14. 
  4. ^
  5. ^ Harold, Elliotte Rusty (2008). Refactoring HTML. Addison Wesley. p. 184.  
  6. ^  
  7. ^ van Kesteren, Anne (2010). "HTML5 differences from HTML4". W3C. Retrieved 30 June 2010. 

External links

  • Grouping elements: the DIV and SPAN elements
  • Create Horizontal and Vertical Aligned DIV
This article was sourced from Creative Commons Attribution-ShareAlike License; additional terms may apply. World Heritage Encyclopedia content is assembled from numerous content providers, Open Access Publishing, and in compliance with The Fair Access to Science and Technology Research Act (FASTR), Wikimedia Foundation, Inc., Public Library of Science, The Encyclopedia of Life, Open Book Publishers (OBP), PubMed, U.S. National Library of Medicine, National Center for Biotechnology Information, U.S. National Library of Medicine, National Institutes of Health (NIH), U.S. Department of Health & Human Services, and, which sources content from all federal, state, local, tribal, and territorial government publication portals (.gov, .mil, .edu). Funding for and content contributors is made possible from the U.S. Congress, E-Government Act of 2002.
Crowd sourced content that is contributed to World Heritage Encyclopedia is peer reviewed and edited by our editorial staff to ensure quality scholarly research articles.
By using this site, you agree to the Terms of Use and Privacy Policy. World Heritage Encyclopedia™ is a registered trademark of the World Public Library Association, a non-profit organization.

Copyright © World Library Foundation. All rights reserved. eBooks from Project Gutenberg are sponsored by the World Library Foundation,
a 501c(4) Member's Support Non-Profit Organization, and is NOT affiliated with any governmental agency or department.