{"history":[],"article":{"id":"0a0d7a27-3e2a-4e83-93f1-43b3365cb073","title":"Div and span","slug":"div-and-span","content":":::summary\n:::\n\n# \nIn [HTML](https://bliptext.com/articles/html), the standard [markup language](https://bliptext.com/articles/markup-language) for [document](https://bliptext.com/articles/web-document)s designed to be displayed in a [web browser](https://bliptext.com/articles/web-browser), and [tags](https://bliptext.com/articles/html-element) are elements used to define parts of a [document](https://bliptext.com/articles/web-document), so that they are identifiable when a unique classification is necessary.\nWhere other HTML elements such as (paragraph), (emphasis), and so on, accurately represent the [semantics](https://bliptext.com/articles/semantic-web) of the content, the additional use of and tags leads to better [accessibility](https://bliptext.com/articles/web-accessibility) for readers and easier [maintainability](https://bliptext.com/articles/maintainability) for authors.\nWhere no existing HTML element is applicable, and can valuably represent parts of a document so that [HTML attributes](https://bliptext.com/articles/html-attribute) such as , , , or can be applied.\nrepresents an [inline](https://bliptext.com/articles/html-element) portion of a document, for example words within a sentence.\nrepresents a [block-level](https://bliptext.com/articles/html-element) portion of a document such as a few paragraphs, or an image with its caption.\nstands for division.\nThe elements allow semantic attributes (e.g. ), [CSS](https://bliptext.com/articles/cascading-style-sheets) styling (e.g., color and typography), or [client-side scripting](https://bliptext.com/articles/client-side-scripting) (e.g., animation, hiding, and augmentation) to be applied.\ndefines 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.\n\n# Examples\nFor example, to make a certain part of text inside a paragraph red, can be used as follows:\n\n# History\nThe element was introduced to [HTML](https://bliptext.com/articles/html) in the internationalization working group's second draft [html-i18n](https://bliptext.com/articles/undefined) in 1995.\nHowever, 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.\nwas 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.\n\n# Differences and default behaviour\nThere are multiple differences between and.\nThe most notable difference is how the elements are displayed.\nIn standard HTML, a is a [block-level element](https://bliptext.com/articles/block-level-element) whereas a is an [inline element](https://bliptext.com/articles/inline-element).\nThe block visually isolates a section of a document on the page, and may contain other block-level components.\nThe element contains a piece of information inline with the surrounding content, and may only contain other inline-level components.\nIn practice, the default display of the elements can be changed by the use of [Cascading Style Sheets](https://bliptext.com/articles/cascading-style-sheets) (CSS), although the permitted contents of each element may not be changed.\nFor example, regardless of CSS, a element may not contain block-level children.\n\n# Practical usage\nand elements are used purely to imply a logical grouping of enclosed elements.\nThere are three main reasons to use and tags with or [attributes](https://bliptext.com/articles/html-attribute):\n\n## Styling with CSS\nIt is common for and elements to carry or attributes in conjunction with CSS to apply layout, typographic, color, and other presentation attributes to parts of the content.\nCSS does not just apply to visual styling: when spoken out loud by a [voice browser](https://bliptext.com/articles/voice-browser), CSS styling can affect speech-rate, stress, richness and even position within a [stereophonic](https://bliptext.com/articles/stereophonic) image.\nFor 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.\nFor example, the HTML in password too short is semantically weak, whereas password too short uses an element to signify emphasis (appearing as text in italics), and introduces a more appropriate class name.\nBy 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.\nPerhaps when spoken they should be given extra stress, and a small reduction in speech-rate.\nThe second example is semantically richer markup, rather than merely presentational.\n\n## Semantic clarity\nThis kind of grouping and labelling of parts of the page content might be introduced purely to make the page more semantically meaningful in general terms.\nIt is impossible to say how the [World Wide Web](https://bliptext.com/articles/world-wide-web) will develop in years and decades to come.\n[Web pages](https://bliptext.com/articles/web-page) designed today may still be in use when information systems that we cannot yet imagine are trawling, processing, and classifying the web.\nEven today's search engines such as [Google](https://bliptext.com/articles/google) and others use proprietary information processing algorithms of considerable complexity.\nFor some years, the [World Wide Web Consortium](https://bliptext.com/articles/world-wide-web-consortium) (W3C) has been running a major [Semantic Web](https://bliptext.com/articles/semantic-web) project designed to make the whole web increasingly useful and meaningful to today's and the future's information systems.\nThe [microformats](https://bliptext.com/articles/microformats) movement is an attempt to build an idea of semantic es.\nFor example, microformats-aware software might automatically find an element like 123-456-7890 and allow for automatic dialing of the telephone number.\n\n## Access from code\nOnce 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](https://bliptext.com/articles/document-object-model)) of the web page.\nThe most common reason for this is that the page is delivered with [client-side JavaScript](https://bliptext.com/articles/client-side-javascript) that will produce on-going dynamic behaviour after the page is rendered.\nFor 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.\nThe following markup would suffice:
$45.99.\nAnother example is the [Ajax](https://bliptext.com/articles/ajax-programming) 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.\nWhen the new text arrives back from the server, the JavaScript must identify the exact region on the page to replace with the new information.\nAutomatic testing tools also may need to navigate web page markup using and elements' or attributes.\nIn [dynamically generated HTML](https://bliptext.com/articles/dynamic-web-page), this may include the use of page testing tools such as [HttpUnit](https://bliptext.com/articles/httpunit), a member of the [xUnit](https://bliptext.com/articles/xunit) family, and load or stress testing tools such as [Apache JMeter](https://bliptext.com/articles/apache-jmeter) when applied to [form-driven](https://bliptext.com/articles/form-web) web sites.\n\n# Overuse\nThe judicious use of and is a vital part of HTML and XHTML markup.\nHowever, they are sometimes overused.\nVarious [list](https://bliptext.com/articles/html-element) structures available in HTML may be preferable to a home-made mixture of and elements.\nFor example, this:\nwhich produces\n
Main page
\n
Contents
\n
Help
\n\n... is usually preferable instead of this:\nwhich produces\nMain page\nContents\nHelp\nOther examples of the semantic use of HTML rather than and elements include the use of elements to divide up a web form, the use of elements to identify such divisions and the use of to identify form elements rather than, or elements used for such purposes.\n[HTML5](https://bliptext.com/articles/html5) introduced several new elements; a few examples include the, , and elements.\nThe use of semantically appropriate elements provides better structure to HTML documents than or.","current_revision":null,"created_by":"kACnuQmH5k9Nr5VNVEpVeg7XpvUmMctD","created_at":"2025-01-26T06:53:21.694Z","updated_at":"2025-01-26T06:53:21.694Z","search_vector":"'div':1 'span':3","search_content":" \n \n\n# \nIn [HTML](https://bliptext.com/articles/html), the standard [markup language](https://bliptext.com/articles/markup-language) for [document](https://bliptext.com/articles/web-document)s designed to be displayed in a [web browser](https://bliptext.com/articles/web-browser), and [tags](https://bliptext.com/articles/html-element) are elements used to define parts of a [document](https://bliptext.com/articles/web-document), so that they are identifiable when a unique classification is necessary.\nWhere other HTML elements such as (paragraph), (emphasis), and so on, accurately represent the [semantics](https://bliptext.com/articles/semantic-web) of the content, the additional use of and tags leads to better [accessibility](https://bliptext.com/articles/web-accessibility) for readers and easier [maintainability](https://bliptext.com/articles/maintainability) for authors.\nWhere no existing HTML element is applicable, and can valuably represent parts of a document so that [HTML attributes](https://bliptext.com/articles/html-attribute) such as , , , or can be applied.\nrepresents an [inline](https://bliptext.com/articles/html-element) portion of a document, for example words within a sentence.\nrepresents a [block-level](https://bliptext.com/articles/html-element) portion of a document such as a few paragraphs, or an image with its caption.\nstands for division.\nThe elements allow semantic attributes (e.g. ), [CSS](https://bliptext.com/articles/cascading-style-sheets) styling (e.g., color and typography), or [client-side scripting](https://bliptext.com/articles/client-side-scripting) (e.g., animation, hiding, and augmentation) to be applied.\ndefines 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.\n\n# Examples\nFor example, to make a certain part of text inside a paragraph red, can be used as follows:\n\n# History\nThe element was introduced to [HTML](https://bliptext.com/articles/html) in the internationalization working group's second draft [html-i18n](https://bliptext.com/articles/undefined) in 1995.\nHowever, 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.\nwas 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.\n\n# Differences and default behaviour\nThere are multiple differences between and.\nThe most notable difference is how the elements are displayed.\nIn standard HTML, a is a [block-level element](https://bliptext.com/articles/block-level-element) whereas a is an [inline element](https://bliptext.com/articles/inline-element).\nThe block visually isolates a section of a document on the page, and may contain other block-level components.\nThe element contains a piece of information inline with the surrounding content, and may only contain other inline-level components.\nIn practice, the default display of the elements can be changed by the use of [Cascading Style Sheets](https://bliptext.com/articles/cascading-style-sheets) (CSS), although the permitted contents of each element may not be changed.\nFor example, regardless of CSS, a element may not contain block-level children.\n\n# Practical usage\nand elements are used purely to imply a logical grouping of enclosed elements.\nThere are three main reasons to use and tags with or [attributes](https://bliptext.com/articles/html-attribute):\n\n## Styling with CSS\nIt is common for and elements to carry or attributes in conjunction with CSS to apply layout, typographic, color, and other presentation attributes to parts of the content.\nCSS does not just apply to visual styling: when spoken out loud by a [voice browser](https://bliptext.com/articles/voice-browser), CSS styling can affect speech-rate, stress, richness and even position within a [stereophonic](https://bliptext.com/articles/stereophonic) image.\nFor 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.\nFor example, the HTML in password too short is semantically weak, whereas password too short uses an element to signify emphasis (appearing as text in italics), and introduces a more appropriate class name.\nBy 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.\nPerhaps when spoken they should be given extra stress, and a small reduction in speech-rate.\nThe second example is semantically richer markup, rather than merely presentational.\n\n## Semantic clarity\nThis kind of grouping and labelling of parts of the page content might be introduced purely to make the page more semantically meaningful in general terms.\nIt is impossible to say how the [World Wide Web](https://bliptext.com/articles/world-wide-web) will develop in years and decades to come.\n[Web pages](https://bliptext.com/articles/web-page) designed today may still be in use when information systems that we cannot yet imagine are trawling, processing, and classifying the web.\nEven today's search engines such as [Google](https://bliptext.com/articles/google) and others use proprietary information processing algorithms of considerable complexity.\nFor some years, the [World Wide Web Consortium](https://bliptext.com/articles/world-wide-web-consortium) (W3C) has been running a major [Semantic Web](https://bliptext.com/articles/semantic-web) project designed to make the whole web increasingly useful and meaningful to today's and the future's information systems.\nThe [microformats](https://bliptext.com/articles/microformats) movement is an attempt to build an idea of semantic es.\nFor example, microformats-aware software might automatically find an element like 123-456-7890 and allow for automatic dialing of the telephone number.\n\n## Access from code\nOnce 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](https://bliptext.com/articles/document-object-model)) of the web page.\nThe most common reason for this is that the page is delivered with [client-side JavaScript](https://bliptext.com/articles/client-side-javascript) that will produce on-going dynamic behaviour after the page is rendered.\nFor 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.\nThe following markup would suffice: $45.99.\nAnother example is the [Ajax](https://bliptext.com/articles/ajax-programming) 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.\nWhen the new text arrives back from the server, the JavaScript must identify the exact region on the page to replace with the new information.\nAutomatic testing tools also may need to navigate web page markup using and elements' or attributes.\nIn [dynamically generated HTML](https://bliptext.com/articles/dynamic-web-page), this may include the use of page testing tools such as [HttpUnit](https://bliptext.com/articles/httpunit), a member of the [xUnit](https://bliptext.com/articles/xunit) family, and load or stress testing tools such as [Apache JMeter](https://bliptext.com/articles/apache-jmeter) when applied to [form-driven](https://bliptext.com/articles/form-web) web sites.\n\n# Overuse\nThe judicious use of and is a vital part of HTML and XHTML markup.\nHowever, they are sometimes overused.\nVarious [list](https://bliptext.com/articles/html-element) structures available in HTML may be preferable to a home-made mixture of and elements.\nFor example, this:\nwhich produces\n Main page \n Contents \n Help \n \n... is usually preferable instead of this:\nwhich produces\nMain page\nContents\nHelp\nOther examples of the semantic use of HTML rather than and elements include the use of elements to divide up a web form, the use of elements to identify such divisions and the use of to identify form elements rather than, or elements used for such purposes.\n[HTML5](https://bliptext.com/articles/html5) introduced several new elements; a few examples include the, , and elements.\nThe use of semantically appropriate elements provides better structure to HTML documents than or.","revisionCount":0},"hasMore":false,"nextCursor":null}