Div and span

In HTML, the standard markup language for documents designed to be displayed in a web browser, <div> and <span> tags are elements used to define parts of a document, so that they are identifiable when a unique classification is necessary. Where other HTML elements such as <p> (paragraph), <em> (emphasis), and so on, accurately represent the semantics of the content, the additional use of <span> and <div> tags 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.

<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. <div> stands for division. The elements allow semantic attributes (e.g. lang="en-US"), CSS styling (e.g., color and typography), or client-side scripting (e.g., animation, hiding, and augmentation) to be applied.

<div> defines a "division" of the document, a block-level item that is more distinct from elements above and below it than a span of inline material.

For example, to make a certain part of text inside a paragraph red, <span> can be used as follows:

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.

<span> was introduced to mark up any inline span of text, because "a generic container is needed to carry the LANG and BIDI attributes in cases where no other element is appropriate." It still serves that general purpose, although a much richer range of semantic elements have been defined since then, and there are also many more attributes that may need to be applied.

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), although the permitted contents of each element may not be changed. For example, regardless of CSS, a <span> element may not contain block-level children.

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