Content deleted Content added
→See also: removed link to a redirect source for this page |
m Reverted edit by 114.10.135.185 (talk) to last version by Andy Dingley |
||
| (352 intermediate revisions by more than 100 users not shown) | |||
Line 1:
{{short description|HTML elements used to define parts of a document}}
{{lowercase}}
{{HTML}}
In [[HTML]], the standard [[markup language]] for documents designed to be displayed in a [[web browser]], {{Tag|div|o}} and {{Tag|span|o}} [[HTML element|tags]] are elements used to define parts of a [[Web document|document]], so that they are identifiable when a unique classification is necessary. Where other HTML elements such as {{Tag|p|o}} (paragraph), {{Tag|em|o}} (emphasis), and so on, accurately represent the [[Semantic Web|semantics]] of the content, the additional use of {{Tag|span|o}} and {{Tag|div|o}} tags leads to better [[Web accessibility|accessibility]] for readers and easier [[maintainability]] for authors. Where no existing HTML element is applicable, {{Tag|span|o}} and {{Tag|div|o}} can valuably represent parts of a document so that [[HTML attribute]]s such as <code>class</code>, <code>id</code>, <code>lang</code>, or <code>dir</code> can be applied.<ref name="HTML5-div">{{cite web|title=HTML5: A vocabulary and associated APIs for HTML and XHTML|url=http://www.w3.org/TR/html5/grouping-content.html#the-div-element|publisher=W3C|access-date=16 September 2014|at=4.4 Grouping content}}</ref><ref name="HTML5-span">{{cite web|title=HTML5: A vocabulary and associated APIs for HTML and XHTML|url=http://www.w3.org/TR/html5/text-level-semantics.html#the-span-element|publisher=W3C|access-date=16 September 2014|at=4.5 Text-level semantics|url-status=dead|archive-url=https://web.archive.org/web/20150801133040/http://www.w3.org/TR/html5/text-level-semantics.html#the-span-element|archive-date=1 August 2015}}</ref>
{{Tag|span|o}} represents an [[HTML element#Inline elements|inline]] portion of a document, for example words within a sentence. {{Tag|div|o}} represents a [[HTML element#Block elements|block-level]] portion of a document such as a few paragraphs, or an image with its caption. {{Tag|div|o}} stands for division. The elements allow semantic attributes (e.g. <code>lang="en-US"</code>), [[Cascading Style Sheets|CSS]] styling (e.g., color and typography), or [[client-side scripting]] (e.g., animation, hiding, and augmentation) to be applied.<ref name="HTML5-div"/><ref name="HTML5-span"/>
{{Tag|div|o}} 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.<ref name=":0">{{cite web|title=HTML <<nowiki/>div> Tag|url=https://www.w3schools.com/tags/tag_div.asp|website=W3Schools|access-date=22 March 2018}}{{unreliable source|date=July 2025}}</ref>
== Examples ==
For example, to make a certain part of text inside a paragraph red, {{Tag|span|o}} can be used as follows{{efn-lr|As {{Tag|div|o}} is not permitted within {{Tag|p|o}}}}:
{| class="wikitable"
|-
! style="width:33.3%;"|HTML [[syntax (programming)|syntax]]<br><span style="font-weight: normal; font-size: 98%">(web code used to add formatting to text)</span>
! style="width:33.3%;"|Rendered output<br><span style="font-weight: normal; font-size: 98%">(as seen by visitors of the webpage)</span>
|- style="vertical-align:top;"
|<syntaxhighlight lang="html">I am <span style="color: red;">red</span> and I am <span style="color: blue;">blue</span>!</syntaxhighlight>
|<br>I am <span style="color: red;">red</span> and I am <span style="color: blue;">blue</span>!
|}
== History ==
The {{Tag|span|o}} element was introduced to [[HTML#History|HTML]] in the internationalization working group's second draft [http://tools.ietf.org/html/draft-ietf-html-i18n-01 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.<ref name=":1">{{cite web|title=HTML/Elements/span - Web Education Community Group |url=http://www.w3.org/community/webed/wiki/HTML/Elements/span |date=2013-06-13 |access-date=2013-11-14}}{{dead-link|date=May 2024}}</ref>
{{Tag|span|o}} 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.
== Differences and default behaviour ==
There are multiple differences between {{Tag|div|o}} and {{Tag|span|o}}. The most notable difference is how the elements are displayed. In standard HTML, a {{Tag|div|o}} is a [[block-level element]] whereas a {{Tag|span|o}} is an [[inline element]]. The {{Tag|div|o}} block visually isolates a section of a document on the page, and may contain other block-level components. The {{Tag|span|o}} 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 {{Tag|span|o}} element may not contain block-level children.<ref>{{cite web|url=http://www.w3.org/TR/html51/semantics.html#semantics|title=HTML 5.1: 4. The elements of HTML|website=W3C|access-date=3 August 2017}}</ref>
== Practical use ==
{{Tag|span|o}} and {{Tag|div|o}} elements are used purely to imply a logical grouping of enclosed elements.
There are three main reasons to use {{Tag|span|o}} and {{Tag|div|o}} tags with <code>class</code> or <code>id</code> [[HTML attribute|attributes]]:
=== Styling with CSS ===
{{See also|Cascading Style Sheets|Separation of content and presentation}}
It is common for {{tag|span|open}} and {{tag|div|open}} elements to carry <code>class</code> or <code>id</code> 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 {{Code|<span class{{=}}"red-bold">password too short</span>|html}} is semantically weak, whereas {{Code|<em class{{=}}"warning">password too short</em>|html}} uses an {{Tag|[https://www.w3schools.com/tags/tag_em.asp em]|o}} 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.
<!--Firstly you say in favour of `span` that "CSS does not just apply to visual styling". But then you show an example using `em` against span! That's a contradiction.-->
=== Semantic clarity ===
This 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. It is impossible to say how the [[World Wide Web]] will develop in years and decades to come. [[Web page]]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]] 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 <code>class</code>es. For example, microformats-aware software might automatically find an element like {{Code|<span class{{=}}"tel">123-456-7890</span>|html}} 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: {{Code|<div class{{=}}"price">$45.99</div>|html}}. Another example is the [[Ajax (programming)|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 {{Tag|span|o}} and {{Tag|div|o}} elements' <code>class</code> or <code>id</code> attributes. In [[Dynamic Web page|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 (web)|form-driven]] web sites.
== Overuse ==
The judicious use of {{Tag|div|o}} and {{Tag|span|o}} is a vital part of HTML and XHTML markup. However, they are sometimes overused.
Various [[HTML element|list]] structures available in HTML may be preferable to a home-made mixture of {{Tag|div|o}} and {{Tag|span|o}} elements.<ref>{{cite book|last=Harold|first=Elliotte Rusty|title=Refactoring HTML|year=2008|publisher=Addison Wesley|isbn=978-0-321-50363-3|page=184|quote=There is no simple way to find all the unidentified lists in a site. [...] They can be marked up in dozens of different ways: as paragraphs, <code>div</code>s, tables, [etc]. Once you've found a list, marking up the individual items is easy. Just use {{Tag|ul|o}}, {{Tag|ol|o}}, or {{Tag|dl|o}} instead of the current wrapper element. [...] For example to remove the bullets add this rule to the page's CSS stylesheet: [...]}}</ref>
For example, this:
<syntaxhighlight lang="html">
<ul class="menu">
<li>Main page</li>
<li>Contents</li>
<li>Help</li>
</ul>
</syntaxhighlight>
which produces
<ul class="menu">
<li>Main page</li>
<li>Contents</li>
<li>Help</li>
</ul>
... is usually preferable instead of this:
<syntaxhighlight lang="html">
<div class="menu">
<span>Main page</span>
<span>Contents</span>
<span>Help</span>
</div>
</syntaxhighlight>
which produces
<div class="menu">
<span>Main page</span>
<span>Contents</span>
<span>Help</span>
</div>
Other examples of the semantic use of HTML rather than {{Tag|div|o}} and {{Tag|span|o}} elements include the use of {{Tag|fieldset|o}} elements to divide up a web form, the use of {{Tag|legend|o}} elements to identify such divisions and the use of {{Tag|label|o}} to identify form {{Tag|input|o}} elements rather than {{Tag|div|o}}, {{Tag|span|o}} or {{Tag|table|o}} elements used for such purposes.<ref>{{cite web|last=Raggett|author-link=Dave Raggett|first=Dave|title=Adding structure to forms: the FIELDSET and LEGEND elements|url=http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#h-17.10|work=HTML 4.01 Specification|publisher=[[W3C]]|year=1999|access-date=12 July 2010|author2=Arnaud Le Hors |author3=Ian Jacobs |quote=The <code>FIELDSET</code> element allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The proper use of this element makes documents more accessible.}}</ref>
[[HTML5]] introduced several new elements; a few examples include the {{Tag|header|o}}, {{Tag|footer|o}}, {{Tag|nav|o}} and {{Tag|figure|o}} elements. The use of semantically appropriate elements provides better structure to HTML documents than {{Tag|span|o}} or {{Tag|div|o}}.<ref>{{cite web|last=van Kesteren|first=Anne|title=HTML5 differences from HTML4|url=http://www.w3.org/TR/html5-diff/#language|publisher=W3C|access-date=30 June 2010|year=2010}}</ref>
== See also ==
* [[HTML]] and [[HTML5]]
* [[HTML element]]
* [[HTML attribute]]
* [[Cascading Style Sheets]] and [[Help:Cascading Style Sheets]]
* [[CDATA]]
* [[ContextObjects in Spans]] (COinS)
* [[JavaScript]]
* [[Semantic Web]]
== References ==
{{Notelist-lr}}
{{reflist}}
== External links ==
* [http://www.w3.org/TR/html401/struct/global.html#h-7.5.4 Grouping elements: the DIV and SPAN elements]
* [https://quicklightweb.com/how-to-create-a-diagonal-or-slanted-div-using-css.php Create a Diagonal or Slanted Div using CSS ]
[[Category:HTML tags]]
[[Category:HTML]]
| |||