Английская Википедия:Div and span
Шаблон:Short description Шаблон:Lowercase Шаблон:HTML
In HTML, Шаблон:Tag and Шаблон:Tag 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 Шаблон:Tag (paragraph), Шаблон:Tag (emphasis), and so on, accurately represent the semantics of the content, the additional use of Шаблон:Tag and Шаблон:Tag tags leads to better accessibility for readers and easier maintainability for authors. Where no existing HTML element is applicable, Шаблон:Tag and Шаблон:Tag can valuably represent parts of a document so that HTML attributes such as class, id, lang, or dir can be applied.[1][2]
Шаблон:Tag represents an inline portion of a document, for example words within a sentence. Шаблон:Tag represents a block-level portion of a document such as a few paragraphs, or an image with its caption. Шаблон:Tag 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.[1][2]
Шаблон:Tag 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.[3]
Examples
For example, to make a certain part of text inside a paragraph red, Шаблон:Tag can be used as follows: Шаблон:Clarify
| HTML syntax (web code used to add formatting to text) |
Rendered output (as seen by visitors of the webpage) |
|---|---|
I am <span style="color: red;">red</span> and I am <span style="color: blue;">blue</span>!
|
I am red and I am blue! |
History
The Шаблон:Tag 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.[4]
In 1995, Шаблон:Tag 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 and Шаблон:Tag. The most notable difference is how the elements are displayed. In standard HTML, a Шаблон:Tag is a block-level element whereas a Шаблон:Tag is an inline element. The Шаблон:Tag block visually isolates a section of a document on the page, and may contain other block-level components. The Шаблон:Tag 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 element may not contain block-level children.[5]
Practical usage
Шаблон:Tag and Шаблон:Tag elements are used purely to imply a logical grouping of enclosed elements.
There are three main reasons to use Шаблон:Tag and Шаблон:Tag tags with class or id attributes:
Styling with CSS
Шаблон:See also
It is common for Шаблон:Tag and Шаблон:Tag 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 Шаблон:Code is semantically weak, whereas Шаблон:Code uses an Шаблон:Tag 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.
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 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 Шаблон:Code 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. 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.
Automatic testing tools also may need to navigate web page markup using Шаблон:Tag and Шаблон:Tag elements' class or id attributes. In 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-driven web sites.
Overuse
The judicious use of Шаблон:Tag and Шаблон:Tag 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 home-made mixture of Шаблон:Tag and Шаблон:Tag elements.[6]
For example, this:
<ul class="menu">
<li>Main page</li>
<li>Contents</li>
<li>Help</li>
</ul>
which produces
... is usually preferable instead of this:
<div class="menu">
<span>Main page</span>
<span>Contents</span>
<span>Help</span>
</div>
which produces
Other examples of the semantic use of HTML rather than Шаблон:Tag and Шаблон:Tag elements include the use of Шаблон:Tag elements to divide up a web form, the use of Шаблон:Tag elements to identify such divisions and the use of Шаблон:Tag to identify form Шаблон:Tag elements rather than Шаблон:Tag, Шаблон:Tag or Шаблон:Tag elements used for such purposes.[7]
HTML5 introduced several new elements; a few examples include the Шаблон:Tag, Шаблон:Tag, Шаблон:Tag and Шаблон:Tag elements. The use of semantically appropriate elements provides better structure to HTML documents than Шаблон:Tag or Шаблон:Tag.[8]
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
External links
