HTML 5

Contexts in which this element may be used:

In a head element containing no other base elements.

Content model:

Empty.

Element-specific attributes:

href

target

DOM interface:

interface HTMLBaseElement : HTMLElement {
           attribute DOMString href;
           attribute DOMString target;
};

The base element allows authors to specify the document base URL for the purposes of resolving relative URLs , and the name of the default browsing context for the purposes of following hyperlinks .

There must be no more than one base element per document.

A base element must have either an href attribute, a target attribute, or both.

The href content attribute, if specified, must contain a valid URL .

A base element, if it has an href attribute, must come before any other elements in the tree that have attributes defined as taking URLs , except the html element (its manifest attribute isn't affected by base elements).

If there are multiple base elements with href attributes, all but the first are ignored.

The target attribute, if specified, must contain a valid browsing context name or keyword . User agents use this name when following hyperlinks .

A base element, if it has a target attribute, must come before any elements in the tree that represent hyperlinks .

If there are multiple base elements with target attributes, all but the first are ignored.

The href and target DOM attributes must reflect the content attributes of the same name.

4.2.4 The `link` element

Categories

Contexts in which this element may be used:

Where metadata content is expected.

In a noscript element that is a child of a head element.

Content model:

Empty.

Element-specific attributes:

href

rel

media

hreflang

type

sizes

Also, the title attribute has special semantics on this element.

DOM interface:

interface HTMLLinkElement : HTMLElement {
           attribute boolean disabled;
           attribute DOMString href;
           attribute DOMString rel;
  readonly attribute DOMTokenList relList;
           attribute DOMString media;
           attribute DOMString hreflang;
           attribute DOMString type;
           attribute DOMString sizes;
};

The LinkStyle interface must also be implemented by this element, the styling processing model defines how. [CSSOM]

The link element allows authors to link their document to other resources.

The destination of the link is given by the href attribute, which must be present and must contain a valid URL . If the href attribute is absent, then the element does not define a link.

The type of link indicated (the relationship) is given by the value of the rel attribute, which must be present, and must have a value that is a set of space-separated tokens . The allowed values and their meanings are defined in a later section. If the rel attribute is absent, or if the value used is not allowed according to the definitions in this specification, then the element does not define a link.

Two categories of links can be created using the link element. Links to external resources are links to resources that are to be used to augment the current document, and hyperlink links are links to other documents . The link types section defines whether a particular link type is an external resource or a hyperlink. One element can create multiple links (of which some might be external resource links and some might be hyperlinks); exactly which and how many links are created depends on the keywords given in the rel attribute. User agents must process the links on a per-link basis, not a per-element basis.

The exact behavior for links to external resources depends on the exact relationship, as defined for the relevant link type. Some of the attributes control whether or not the external resource is to be applied (as defined below). For external resources that are represented in the DOM (for example, style sheets), the DOM representation must be made available even if the resource is not applied. (However, user agents may opt to only fetch such resources when they are needed, instead of pro-actively downloading all the external resources that are not applied.)

HTTP semantics must be followed when fetching external resources. (For example, redirects must be followed and 404 responses must cause the external resource to not be applied.)

Interactive user agents should provide users with a means to follow the hyperlinks created using the link element, somewhere within their user interface. The exact interface is not defined by this specification, but it should include the following information (obtained from the element's attributes, again as defined below), in some form or another (possibly simplified), for each hyperlink created with each link element in the document:

The relationship between this document and the resource (given by the rel attribute)
The title of the resource (given by the title attribute).
The address of the resource (given by the href attribute).
The language of the resource (given by the hreflang attribute).
The optimum media for the resource (given by the media attribute).

User agents may also include other information, such as the type of the resource (as given by the type attribute).

Hyperlinks created with the link element and its rel attribute apply to the whole page. This contrasts with the rel attribute of a and area elements, which indicates the type of a link whose context is given by the link's location within the document.

The media attribute says which media the resource applies to. The value must be a valid media query . [MQ]

If the link is a hyperlink then the media attribute is purely advisory, and describes for which media the document in question was designed.

However, if the link is an external resource link , then the media attribute is prescriptive. The user agent must apply the external resource to views while their state match the listed media and the other relevant conditions apply, and must not apply them otherwise.

The default, if the media attribute is omitted, is all , meaning that by default links apply to all media.

The hreflang attribute on the link element has the same semantics as the hreflang attribute on hyperlink elements .

The type attribute gives the MIME type of the linked resource. It is purely advisory. The value must be a valid MIME type, optionally with parameters. [RFC2046]

For external resource links , the type attribute is used as a hint to user agents so that they can avoid downloading resources they do not support. If the attribute is present, then the user agent must assume that the resource is of the given type. If the attribute is omitted, but the external resource link type has a default type defined, then the user agent must assume that the resource is of that type. If the UA does not support the given MIME type for the given link relationship, then the UA should not download the resource; if the UA does support the given MIME type for the given link relationship, then the UA should download the resource. If the attribute is omitted, and the external resource link type does not have a default type defined, but the user agent would fetch the resource if the type was known and supported, then the user agent should fetch the resource under the assumption that it will be supported.

User agents must not consider the type attribute authoritative — upon fetching the resource, user agents must not use the type attribute to determine its actual type. Only the actual type (as defined in the next paragraph) is used to determine whether to apply the resource, not the aforementioned assumed type.

If the resource is expected to be an image, user agents may apply the image sniffing rules , with the official type being the type determined from the resource's Content-Type metadata , and use the resulting sniffed type of the resource as if it was the actual type. Otherwise, if the resource is not expected to be an image, or if the user agent opts not to apply those rules, then the user agent must use the resource's Content-Type metadata to determine the type of the resource. If there is no type metadata, but the external resource link type has a default type defined, then the user agent must assume that the resource is of that type.

Once the user agent has established the type of the resource, the user agent must apply the resource if it is of a supported type and the other relevant conditions apply, and must ignore the resource otherwise.

If a document contains style sheet links labeled as follows:

<link rel="stylesheet" href="A" type="text/plain">
<link rel="stylesheet" href="B" type="text/css">
<link
rel="stylesheet"
href="C">

...then a compliant UA that supported only CSS style sheets would fetch the B and C files, and skip the A file (since text/plain is not the MIME type for CSS style sheets).

For files B and C, it would then check the actual types returned by the server. For those that are sent as text/css , it would apply the styles, but for those labeled as text/plain , or any other type, it would not.

If one the two files was returned without a Content-Type metadata, or with a syntactically incorrect type like Content-Type: "null" , then the default type for stylesheet links would kick in. Since that default type is text/css , the style sheet would nonetheless be applied.

The title attribute gives the title of the link. With one exception, it is purely advisory. The value is text. The exception is for style sheet links, where the title attribute defines alternative style sheet sets .

The title attribute on link elements differs from the global title attribute of most other elements in that a link without a title does not inherit the title of the parent element: it merely has no title.

The sizes attribute is used with the icon link type. The attribute must not be specified on link elements that do not have a rel attribute that specifies the icon keyword.

Some versions of HTTP defined a Link: header, to be processed like a series of link elements. If supported, for the purposes of ordering links defined by HTTP headers must be assumed to come before any links in the document, in the order that they were given in the HTTP entity header. (URIs in these headers are to be processed and resolved according to the rules given in HTTP; the rules of this specification don't apply.) [RFC2616] [RFC2068]

The DOM attributes href , rel , media , hreflang , and type , and sizes each must reflect the respective content attributes of the same name.

The DOM attribute relList must reflect the rel content attribute.

The DOM attribute disabled only applies to style sheet links. When the link element defines a style sheet link, then the disabled attribute behaves as defined for the alternative style sheets DOM . For all other link elements it always return false and does nothing on setting.

4.2.5 The `meta` element

Categories

Contexts in which this element may be used:

If the charset attribute is present, or if the element is in the Encoding declaration state : as the first element in a head element.

If the http-equiv attribute is present, and the element is not in the Encoding declaration state : in a head element.

If the http-equiv attribute is present, and the element is not in the Encoding declaration state : in a noscript element that is a child of a head element.

If the name attribute is present: where metadata content is expected.

Content model:

Empty.

Element-specific attributes:

name

http-equiv

content

charset ( HTML only)

DOM interface:

interface HTMLMetaElement : HTMLElement {
           attribute DOMString content;
           attribute DOMString name;
           attribute DOMString httpEquiv;
};

The meta element represents various kinds of metadata that cannot be expressed using the title , base , link , style , and script elements.

The meta element can represent document-level metadata with the name attribute, pragma directives with the http-equiv attribute, and the file's character encoding declaration when an HTML document is serialized to string form (e.g. for transmission over the network or for disk storage) with the charset attribute.

Exactly one of the name , http-equiv , and charset attributes must be specified.

If either name or http-equiv is specified, then the content attribute must also be specified. Otherwise, it must be omitted.

The charset attribute specifies the character encoding used by the document. This is called a character encoding declaration .

The charset attribute may be specified in HTML documents only, it must not be used in XML documents . If the charset attribute is specified, the element must be the first element in the head element of the file.

The content attribute gives the value of the document metadata or pragma directive when the element is used for those purposes. The allowed values depend on the exact context, as described in subsequent sections of this specification.

If a meta element has a name attribute, it sets document metadata. Document metadata is expressed in terms of name/value pairs, the name attribute on the meta element giving the name, and the content attribute on the same element giving the value. The name specifies what aspect of metadata is being set; valid names and the meaning of their values are described in the following sections. If a meta element has no content attribute, then the value part of the metadata name/value pair is the empty string.

If a meta element has the http-equiv attribute specified, it must be either in a head element or in a noscript element that itself is in a head element. If a meta element does not have the http-equiv attribute specified, it must be in a head element.

The DOM attributes name and content must reflect the respective content attributes of the same name. The DOM attribute httpEquiv must reflect the content attribute http-equiv .

4.2.5.1. Standard metadata names

This specification defines a few names for the name attribute of the meta element.

application-name: The value must be a short free-form string that giving the name of the Web application that the page represents. If the page is not a Web application, the application-name metadata name must not be used. User agents may use the application name in UI in preference to the page's title , since the title might include status messages and the like relevant to the status of the page at a particular moment in time instead of just being the name of the application.
description: The value must be a free-form string that describes the page. The value must be appropriate for use in a directory of pages, e.g. in a search engine.
generator: The value must be a free-form string that identifies the software used to generate the document. This value must not be used on hand-authored pages.

4.2.5.2. Other metadata names

Extensions to the predefined set of metadata names may be registered in the WHATTF Wiki MetaExtensions page .

Anyone is free to edit the WHATTF Wiki MetaExtensions page at any time to add a type. These new names must be specified with the following information:

Keyword

The actual name being defined. The name should not be confusingly similar to any other defined name (e.g. differing only in case).

Brief description

A short description of what the metadata name's meaning is, including the format the value is required to be in.

Link to more details

A link to a more detailed description of the metadata name's semantics and requirements. It could be another page on the Wiki, or a link to an external page.

Synonyms

A list of other names that have exactly the same processing requirements. Authors should not use the names defined to be synonyms, they are only intended to allow user agents to support legacy content.

Status

One of the following:

Proposal: The name has not received wide peer review and approval. Someone has proposed it and is using it.
Accepted: The name has received wide peer review and approval. It has a specification that unambiguously defines how to handle pages that use the name, including when they use it in incorrect ways.
Unendorsed: The metadata name has received wide peer review and it has been found wanting. Existing pages are using this keyword, but new pages should avoid it. The "brief description" and "link to more details" entries will give details of what authors should use instead, if anything.

If a metadata name is added with the "proposal" status and found to be redundant with existing values, it should be removed and listed as a synonym for the existing value.

Conformance checkers must use the information given on the WHATTF Wiki MetaExtensions page to establish if a value not explicitly defined in this specification is allowed or not. When an author uses a new type not defined by either this specification or the Wiki page, conformance checkers should offer to add the value to the Wiki, with the details described above, with the "proposal" status.

This specification does not define how new values will get approved. It is expected that the Wiki will have a community that addresses this.

Metadata names whose values are to be URLs must not be proposed or accepted. Links must be represented using the link element, not the meta element.

4.2.5.3. Pragma directives

When the http-equiv attribute is specified on a meta element, the element is a pragma directive.

The http-equiv attribute is an enumerated attribute . The following table lists the keywords defined for this attribute. The states given in the first cell of the rows with keywords give the states to which those keywords map.

State	Keywords
Encoding declaration	`Content-Type`
Default style	`default-style`
Refresh	`refresh`

When a meta element is inserted into the document, if its http-equiv attribute is present and represents one of the above states, then the user agent must run the algorithm appropriate for that state, as described in the following list:

Encoding declaration state

The Encoding declaration state's user agent requirements are all handled by the parsing section of the specification. The state is just an alternative form of setting the charset attribute: it is a character encoding declaration .

For meta elements in the Encoding declaration state , the content attribute must have a value that is a case-insensitive match of a string that consists of the literal string " text/html; ", optionally followed by any number of space characters , followed by the literal string " charset= ", followed by the character encoding name of the character encoding declaration .

If the document contains a meta element in the Encoding declaration state then that element must be the first element in the document's head element, and the document must not contain a meta element with the charset attribute present.

The Encoding declaration state may be used in HTML documents only, elements in that state must not be used in XML documents .

Default style state

Refresh state

If another meta element in the Refresh state has already been successfully processed (i.e. when it was inserted the user agent processed it and reached the last step of this list of steps), then abort these steps.
If the meta element has no content attribute, or if that attribute's value is the empty string, then abort these steps.
Let input be the value of the element's content attribute.
Let position point at the first character of input .
Skip whitespace .
Collect a sequence of characters in the range U+0030 DIGIT ZERO to U+0039 DIGIT NINE, and parse the resulting string using the rules for parsing non-negative integers . If the sequence of characters collected is the empty string, then no number will have been parsed; abort these steps. Otherwise, let time be the parsed number.
Collect a sequence of characters in the range U+0030 DIGIT ZERO to U+0039 DIGIT NINE and U+002E FULL STOP (" . "). Ignore any collected characters.
Skip whitespace .
Let url be the address of the current page.
If the character in input pointed to by position is a U+003B SEMICOLON (" ; "), then advance position to the next character. Otherwise, jump to the last step.
Skip whitespace .
If the character in input pointed to by position is one of U+0055 LATIN CAPITAL LETTER U or U+0075 LATIN SMALL LETTER U, then advance position to the next character. Otherwise, jump to the last step.
If the character in input pointed to by position is one of U+0052 LATIN CAPITAL LETTER R or U+0072 LATIN SMALL LETTER R, then advance position to the next character. Otherwise, jump to the last step.
If the character in input pointed to by position is one of U+004C LATIN CAPITAL LETTER L or U+006C LATIN SMALL LETTER L, then advance position to the next character. Otherwise, jump to the last step.
Skip whitespace .
If the character in input pointed to by position is a U+003D EQUALS SIGN (" = "), then advance position to the next character. Otherwise, jump to the last step.
Skip whitespace .
Let url be equal to the substring of input from the character at position to the end of the string.
Strip any trailing space characters from the end of url .
Strip any U+0009 CHARACTER TABULATION, U+000A LINE FEED (LF), and U+000D CARRIAGE RETURN (CR) characters from url .
Resolve the url value to an absolute URL . (For the purposes of determining the base URL , the url value comes from the value of a content attribute of the meta element.) If this fails, abort these steps.
Perform one or more of the following steps:
- Set a timer so that in time seconds, adjusted to take into account user or user agent preferences, if the user has not canceled the redirect, the user agent navigates the document's browsing context to url , with replacement enabled , and with the document's browsing context as the source browsing context .
- Provide the user with an interface that, when selected, navigates a browsing context to url , with the document's browsing context as the source browsing context .
- Do nothing.
In addition, the user agent may, as with anything, inform the user of any and all aspects of its operation, including the state of any timers, the destinations of any timed redirects, and so forth.

For meta elements in the Refresh state , the content attribute must have a value consisting either of:

just a valid non-negative integer , or
a valid non-negative integer , followed by a U+003B SEMICOLON ( ; ), followed by one or more space characters , followed by either a U+0055 LATIN CAPITAL LETTER U or a U+0075 LATIN SMALL LETTER U, a U+0052 LATIN CAPITAL LETTER R or a U+0072 LATIN SMALL LETTER R, a U+004C LATIN CAPITAL LETTER L or a U+006C LATIN SMALL LETTER L, a U+003D EQUALS SIGN ( = ), and then a valid URL .

In the former case, the integer represents a number of seconds before the page is to be reloaded; in the latter case the integer represents a number of seconds before the page is to be replaced by the page at the given URL .

There must not be more than one meta element with any particular state in the document at a time.

4.2.5.4. Specifying the document's character encoding

A character encoding declaration is a mechanism by which the character encoding used to store or transmit a document is specified.

The following restrictions apply to character encoding declarations:

The character encoding name given must be the name of the character encoding used to serialize the file.
The value must be a valid character encoding name, and must be the preferred name for that encoding. [IANACHARSET]
The character encoding declaration must be serialized without the use of character references or character escapes of any kind.

If the document does not start with a BOM, and if its encoding is not explicitly given by Content-Type metadata , then the character encoding used must be an ASCII-compatible character encoding , and, in addition, if that encoding isn't US-ASCII itself, then the encoding must be specified using a meta element with a charset attribute or a meta element in the Encoding declaration state .

If the document contains a meta element with a charset attribute or a meta element in the Encoding declaration state , then the character encoding used must be an ASCII-compatible character encoding .

An ASCII-compatible character encoding is one that is a superset of US-ASCII (specifically, ANSI_X3.4-1968) for bytes in the set 0x09, 0x0A, 0x0C, 0x0D, 0x20 - 0x22, 0x26, 0x27, 0x2C - 0x3F, 0x41 - 0x5A, and 0x61 - 0x7A .

Authors should not use JIS_X0212-1990, x-JIS0208, and encodings based on EBCDIC. Authors should not use UTF-32. Authors must not use the CESU-8, UTF-7, BOCU-1 and SCSU encodings. [CESU8] [UTF7] [BOCU1] [SCSU]

Authors are encouraged to use UTF-8. Conformance checkers may advise against authors using legacy encodings.

In XHTML, the XML declaration should be used for inline character encoding information, if necessary.

4.2.6 The `style` element

Categories

If the scoped attribute is present: flow content .

Contexts in which this element may be used:

If the scoped attribute is absent: where metadata content is expected.

If the scoped attribute is absent: in a noscript element that is a child of a head element.

If the scoped attribute is present: where flow content is expected, but before any sibling elements other than style elements and before any text nodes other than inter-element whitespace .

Content model:

Depends on the value of the type attribute.

Element-specific attributes:

media

type

scoped

Also, the title attribute has special semantics on this element.

DOM interface:

interface HTMLStyleElement : HTMLElement {
           attribute boolean disabled;
           attribute DOMString media;
           attribute DOMString type;
           attribute boolean scoped;
};

The LinkStyle interface must also be implemented by this element, the styling processing model defines how. [CSSOM]

The style element allows authors to embed style information in their documents. The style element is one of several inputs to the styling processing model .

If the type attribute is given, it must contain a valid MIME type, optionally with parameters, that designates a styling language. [RFC2046] If the attribute is absent, the type defaults to text/css . [RFC2138]

When examining types to determine if they support the language, user agents must not ignore unknown MIME parameters — types with unknown parameters must be assumed to be unsupported.

The media attribute says which media the styles apply to. The value must be a valid media query . [MQ] User agents must apply the styles to views while their state match the listed media, and must not apply them otherwise. [DOM3VIEWS]

The default, if the media attribute is omitted, is all , meaning that by default styles apply to all media.

The scoped attribute is a boolean attribute . If the attribute is present, then the user agent must apply the specified style information only to the style element's parent element (if any), and that element's child nodes. Otherwise, the specified styles must, if applied, be applied to the entire document.

The title attribute on style elements defines alternative style sheet sets . If the style element has no title attribute, then it has no title; the title attribute of ancestors does not apply to the style element.

The title attribute on style elements, like the title attribute on link elements, differs from the global title attribute in that a style block without a title does not inherit the title of the parent element: it merely has no title.

All descendant elements must be processed, according to their semantics, before the style element itself is evaluated. For styling languages that consist of pure text, user agents must evaluate style elements by passing the concatenation of the contents of all the text nodes that are direct children of the style element (not any other nodes such as comments or elements), in tree order , to the style system. For XML-based styling languages, user agents must pass all the children nodes of the style element to the style system.

This specification does not specify a style system, but CSS is expected to be supported by most Web browsers. [CSS21]

The media , type and scoped DOM attributes must reflect the respective content attributes of the same name.

The DOM disabled attribute behaves as defined for the alternative style sheets DOM .

4.2.7 Styling

The link and style elements can provide styling information for the user agent to use when rendering the document. The DOM Styling specification specifies what styling information is to be used by the user agent and how it is to be used. [CSSOM]

The style and link elements implement the LinkStyle interface. [CSSOM]

For style elements, if the user agent does not support the specified styling language, then the sheet attribute of the element's LinkStyle interface must return null. Similarly, link elements that do not represent external resource links that contribute to the styling processing model (i.e. that do not have a stylesheet keyword in their rel attribute), and link elements whose specified resource has not yet been downloaded, or is not in a supported styling language, must have their LinkStyle interface's sheet attribute return null.

Otherwise, the LinkStyle interface's sheet attribute must return a StyleSheet object with the attributes implemented as follows: [CSSOM]

The content type ( type DOM attribute): The content type must be the same as the style's specified type. For style elements, this is the same as the type content attribute's value, or text/css if that is omitted. For link elements, this is the Content-Type metadata of the specified resource .
The location ( href DOM attribute): For link elements, the location must be the result of resolving the URL given by the element's href content attribute, or the empty string if that fails. For style elements, there is no location.
The intended destination media for style information ( media DOM attribute): The media must be the same as the value of the element's media content attribute.
The style sheet title ( title DOM attribute): The title must be the same as the value of the element's title content attribute. If the attribute is absent, then the style sheet does not have a title. The title is used for defining alternative style sheet sets .

The disabled DOM attribute on link and style elements must return false and do nothing on setting, if the sheet attribute of their LinkStyle interface is null. Otherwise, it must return the value of the StyleSheet interface's disabled attribute on getting, and forward the new value to that same attribute on setting.

4.3 Sections

Some elements, for example address elements, are scoped to their nearest ancestor sectioning content . For such elements x , the elements that apply to a sectioning content element e are all the x elements whose nearest sectioning content ancestor is e .

4.3.1 The `body` element

Categories

Sectioning content .

Contexts in which this element may be used:

As the second element in an html element.

Content model:

Element-specific attributes:

None.

DOM interface:

interface

HTMLBodyElement

:

HTMLElement

{};

The body element represents the main content of the document.

In conforming documents, there is only one body element. The document.body DOM attribute provides scripts with easy access to a document's body element.

Some DOM operations (for example, parts of the drag and drop model) are defined in terms of " the body element ". This refers to a particular element in the DOM, as per the definition of the term, and not any arbitrary body element.

4.3.2 The `section` element

Categories: Flow content .; Sectioning content .
Contexts in which this element may be used:: Where flow content is expected.
Content model:: Flow content .
Element-specific attributes:: None.
DOM interface:: Uses HTMLElement .

The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a header, possibly with a footer.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, contact information.

4.3.3 The `nav` element

Categories: Flow content .; Sectioning content .
Contexts in which this element may be used:: Where flow content is expected.
Content model:: Flow content .
Element-specific attributes:: None.
DOM interface:: Uses HTMLElement .

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element — only sections that consist of primary navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases.

In the following example, the page has several places where links are present, but only one of those places is considered a navigation section.

<body>
 <header>
  <h1>Wake up sheeple!</h1>
  <p><a href="news.html">News</a> -
     <a href="blog.html">Blog</a> -
     <a href="forums.html">Forums</a></p>
 </header>
 <nav>
  <h1>Navigation</h1>
  <ul>
   <li><a href="articles.html">Index of all articles</a><li>
   <li><a href="today.html">Things sheeple need to wake up for today</a><li>
   <li><a href="successes.html">Sheeple we have managed to wake</a><li>
  </ul>
 </nav>
 <article>
  <p>...page content would be here...</p>
 </article>
 <footer>
  <p>Copyright © 2006 The Example Company</p>
  <p><a href="about.html">About</a> -
     <a href="policy.html">Privacy Policy</a> -
     <a href="contact.html">Contact Us</a></p>
 </footer>
</body>

4.3.4 The `article` element

Categories: Flow content .; Sectioning content .
Contexts in which this element may be used:: Where flow content is expected.
Content model:: Flow content .
Element-specific attributes:: None.
DOM interface:: Uses HTMLElement .

The article element represents a section of a page that consists of a composition that forms an independent part of a document, page, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content.

An article element is "independent" in that its contents could stand alone, for example in syndication. However, the element is still associated with its ancestors; for instance, contact information that applies to a parent body element still covers the article as well.

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a Web log entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the Web log entry.

Author information associated with an article element (q.v. the address element) does not apply to nested article elements.

4.3.5 The `aside` element

Categories: Flow content .; Sectioning content .
Contexts in which this element may be used:: Where flow content is expected.
Content model:: Flow content .
Element-specific attributes:: None.
DOM interface:: Uses HTMLElement .

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

The following example shows how an aside is used to mark up background material on Switzerland in a much longer news story on Europe.

<aside>
 <h1>Switzerland</h1>
 <p>Switzerland, a land-locked country in the middle of geographic
 Europe, has not joined the geopolitical European Union, though it is
 a signatory to a number of European treaties.</p>
</aside>

The following example shows how an aside is used to mark up a pull quote in a longer article.

...
<p>He later joined a large company, continuing on the same work.
<q>I love my job. People ask me what I do for fun when I'm not at
work. But I'm paid to do my hobby, so I never know what to
answer. Some people wonder what they would do if they didn't have to
work... but I know what I would do, because I was unemployed for a
year, and I filled that time doing exactly what I do
now.</q></p>
<aside>
 <q> People ask me what I do for fun when I'm not at work. But I'm
 paid to do my hobby, so I never know what to answer. </q>
</aside>
<p>Of course his work — or should that be hobby? —
isn't his only passion. He also enjoys other pleasures.</p>
...

4.3.6 The `h1` , `h2` , `h3` , `h4` , `h5` , and `h6` elements

Categories: Flow content .; Heading content .
Contexts in which this element may be used:: Where flow content is expected.
Content model:: Phrasing content .
Element-specific attributes:: None.
DOM interface:: Uses HTMLElement .

These elements define headers for their sections.

The semantics and meaning of these elements are defined in the section on headings and sections .

These elements have a rank given by the number in their name. The h1 element is said to have the highest rank, the h6 element has the lowest rank, and two elements with the same name have equal rank.

4.3.7 The `header` element

Categories: Flow content .; Heading content .
Contexts in which this element may be used:: Where flow content is expected.
Content model:: Flow content , including at least one descendant that is heading content , but no sectioning content descendants, no header element descendants, and no footer element descendants.
Element-specific attributes:: None.
DOM interface:: Uses HTMLElement .

The header element represents the header of a section. The element is typically used to group a set of h1 – h6 elements to mark up a page's title with its subtitle or tagline. However, header elements may contain more than just the section's headings and subheadings — for example it would be reasonable for the header to include version history information.

For the purposes of document summaries, outlines, and the like, header elements are equivalent to the highest ranked h1 – h6 element descendant of the header element (the first such element if there are multiple elements with that rank ).

Other heading elements in the header element indicate subheadings or subtitles.

The rank of a header element is the same as for an h1 element (the highest rank).

The section on headings and sections defines how header elements are assigned to individual sections.

Here are some examples of valid headers. In each case, the emphasised text represents the text that would be used as the header in an application extracting header data and ignoring subheadings.

<header>
 <h1>The reality dysfunction</h1>
 <h2>Space is not the only void</h2>
</header>

<header>
 <h1>Dr. Strangelove</h1>
 <h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
</header>

<header>
 <p>Welcome to...</p>
 <h1>Voidwars!</h1>
</header>

<header>
 <h1>Scalable Vector Graphics (SVG) 1.2</h1>
 <h2>W3C Working Draft 27 October 2004</h2>
 <dl>
  <dt>This version:</dt>
  <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20041027/">http://www.w3.org/TR/2004/WD-SVG12-20041027/</a></dd>
  <dt>Previous version:</dt>
  <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20040510/">http://www.w3.org/TR/2004/WD-SVG12-20040510/</a></dd>
  <dt>Latest version of SVG 1.2:</dt>
  <dd><a href="http://www.w3.org/TR/SVG12/">http://www.w3.org/TR/SVG12/</a></dd>
  <dt>Latest SVG Recommendation:</dt>
  <dd><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></dd>
  <dt>Editor:</dt>
  <dd>Dean Jackson, W3C, <a href="mailto:dean@w3.org">dean@w3.org</a></dd>
  <dt>Authors:</dt>
  <dd>See <a href="#authors">Author List</a></dd>
 </dl>
 <p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notic ...
</header>

Categories: Flow content .
Contexts in which this element may be used:: Where flow content is expected.
Content model:: Flow content , but with no heading content descendants, no sectioning content descendants, and no footer element descendants.
Element-specific attributes:: None.
DOM interface:: Uses HTMLElement .

The footer element represents the footer for the section it applies to. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

Contact information for the section given in a footer should be marked up using the address element.

Footers don't necessarily have to appear at the end of a section, though they usually do.

Here is a page with two footers, one at the top and one at the bottom, with the same content:

<body>
 <footer><a href="../">Back to index...</a></footer>
 <h1>Lorem ipsum</h1>
 <p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
 ea commodo consequat. Duis aute irure dolor in reprehenderit in
 voluptate velit esse cillum dolore eu fugiat nulla
 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 culpa qui officia deserunt mollit anim id est laborum.</p>
 <footer><a href="../">Back to index...</a></footer>
</body>

4.3.9 The `address` element

Categories: Flow content .
Contexts in which this element may be used:: Where flow content is expected.
Content model:: Flow content , but with no heading content descendants, no sectioning content descendants, no footer element descendants, and no address element descendants.
Element-specific attributes:: None.
DOM interface:: Uses HTMLElement .

The address element represents the contact information for the section it applies to. If it applies to the body element , then it instead applies to the document as a whole.

For example, a page at the W3C Web site related to HTML might include the following contact information:

<ADDRESS>
 <A href="../People/Raggett/">Dave Raggett</A>, 
 <A href="../People/Arnaud/">Arnaud Le Hors</A>, 
 contact persons for the <A href="Activity">W3C HTML Activity</A>
</ADDRESS>

The address element must not be used to represent arbitrary addresses (e.g. postal addresses), unless those addresses are contact information for the section. (The p element is the appropriate element for marking up such addresses.)

The address element must not contain information other than contact information.

For example, the following is non-conforming use of the address element:

<ADDRESS>
Last
Modified:
1999/12/24
23:37:50</ADDRESS>

Typically, the address element would be included with other information in a footer element.

To determine the contact information for a sectioning content element (such as a document's body element, which would give the contact information for the page), UAs must collect all the address elements that apply to that sectioning content element and its ancestor sectioning content elements. The contact information is the collection of all the information given by those elements.

Contact information for one sectioning content element, e.g. an aside element, does not apply to its ancestor elements, e.g. the page's body .

4.3.10 Headings and sections

The h1 – h6 elements and the header element are headings.

The first element of heading content in an element of sectioning content gives the header for that section. Subsequent headers of equal or higher rank start new (implied) sections, headers of lower rank start subsections that are part of the previous one.

Sectioning content elements are always considered subsections of their nearest ancestor element of sectioning content , regardless of what implied sections other headings may have created.

Certain elements are said to be sectioning roots , including blockquote and td elements. These elements can have their own outlines, but the sections and headers inside these elements do not contribute to the outlines of their ancestors.

For the following fragment:

<body>
 <h1>Foo</h1>
 <h2>Bar</h2>
 <blockquote>
  <h3>Bla</h3>
 </blockquote>
 <p>Baz</p>
 <h2>Quux</h2>
 <section>
  <h3>Thud</h3>
 </section>
 <p>Grunt</p>
</body>

...the structure would be:

Foo (heading of explicit body section, containing the "Grunt" paragraph)
1. Bar (heading starting implied section, containing a block quote and the "Baz" paragraph)
2. Quux (heading starting implied section)
3. Thud (heading of explicit section section)

Notice how the section ends the earlier implicit section so that a later paragraph ("Grunt") is back at the top level.

Sections may contain headers of any rank , but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.

Authors are also encouraged to explicitly wrap sections in elements of sectioning content , instead of relying on the implicit sections generated by having multiple heading in one element of sectioning content .

For example, the following is correct:

<body>
 <h4>Apples</h4>
 <p>Apples are fruit.</p>
 <section>
  <h2>Taste</h2>
  <p>They taste lovely.</p>
  <h6>Sweet</h6>
  <p>Red apples are sweeter than green ones.</p>
  <h1>Color</h1>
  <p>Apples come in various colors.</p>
 </section>
</body>

However, the same document would be more clearly expressed as:

<body>
 <h1>Apples</h1>
 <p>Apples are fruit.</p>
 <section>
  <h2>Taste</h2>
  <p>They taste lovely.</p>
  <section>
   <h3>Sweet</h3>
   <p>Red apples are sweeter than green ones.</p>
  </section>
 </section>
 <section>
  <h2>Color</h2>
  <p>Apples come in various colors.</p>
 </section>
</body>

Both of the documents above are semantically identical and would produce the same outline in compliant user agents.

4.3.10.1. Creating an outline

This section defines an algorithm for creating an outline for a sectioning content element or a sectioning root element. It is defined in terms of a walk over the nodes of a DOM tree, in tree order, with each node being visited when it is entered and when it is exited during the walk.

The outline for a sectioning content element or a sectioning root element consists of a list of one or more potentially nested sections . A section is a container that corresponds to some nodes in the original DOM tree. Each section can have one heading associated with it, and can contain any number of further nested sections. The algorithm for the outline also associates each node in the DOM tree with a particular section and potentially a heading. (The sections in the outline aren't section elements, though some may correspond to such elements — they are merely conceptual sections.)

The following markup fragment:

<body>
 <h1>A</h1>
 <p>B</p>
 <h2>C</h2>
 <p>D</p>
 <h2>E</h2>
 <p>F</p>
</body>

...results in the following outline being created for the body node (and thus the entire document):

Section created for body node.

Associated with heading "A".

Also associated with paragraph "B".

Nested sections:
1. Section implied for first h2 element.
  
  Associated with heading "C".
  
  Also associated with paragraph "D".
  
  No nested sections.
2. Section implied for second h2 element.
  
  Associated with heading "E".
  
  Also associated with paragraph "F".
  
  No nested sections.

The algorithm that must be followed during a walk of a DOM subtree rooted at a sectioning content element or a sectioning root element to determine that element's outline is as follows:

Let current outlinee be null. (It holds the element whose outline is being created.)
Let current section be null. (It holds a pointer to a section , so that elements in the DOM can all be associated with a section.)
Create a stack to hold elements, which is used to handle nesting. Initialize this stack to empty.
As you walk over the DOM in tree order , trigger the first relevant step below for each element as you enter and exit it.
If the top of the stack is an element, and you are exiting that element

The element being exited is a heading content element.

Pop that element from the stack.

If the top of the stack is a heading content element

Do nothing.

When entering a sectioning content element or a sectioning root element

If current outlinee is not null, push current outlinee onto the stack.

Let current outlinee be the element that is being entered.

Let current section be a newly created section for the current outlinee element.

Let there be a new outline for the new current outlinee , initialized with just the new current section as the only section in the outline.

When exiting a sectioning content element, if the stack is not empty

Pop the top element from the stack, and let the current outlinee be that element.

Let current section be the last section in the outline of the current outlinee element.

Append the outline of the sectioning content element being exited to the current section . (This does not change which section is the last section in the outline .)

When exiting a sectioning root element, if the stack is not empty
Run these steps:
1. Pop the top element from the stack, and let the current outlinee be that element.
2. Let current section be the last section in the outline of the current outlinee element.
3. Finding the deepest child: If current section has no child sections, stop these steps.
4. Let current section be the last child section of the current current section .
5. Go back to the substep labeled finding the deepest child .
When exiting a sectioning content element or a sectioning root element

The current outlinee is the element being exited.

Let current section be the first section in the outline of the current outlinee element.

Skip to the next step in the overall set of steps. (The walk is over.)

If the current outlinee is null.

Do nothing.

When entering a heading content element
If the current section has no heading, let the element being entered be the heading for the current section .

Otherwise, if the element being entered has a rank equal to or greater than the heading of the last section of the outline of the current outlinee , then create a new section and append it to the outline of the current outlinee element, so that this new section is the new last section of that outline. Let current section be that new section. Let the element being entered be the new heading for the current section .

Otherwise, run these substeps:
1. Let candidate section be current section .
2. If the element being entered has a rank lower than the rank of the heading of the candidate section , then create a new section , and append it to candidate section . (This does not change which section is the last section in the outline.) Let current section be this new section. Let the element being entered be the new heading for the current section . Abort these substeps.
3. Let new candidate section be the section that contains candidate section in the outline of current outlinee .
4. Let candidate section be new candidate section .
5. Return to step 2.
Push the element being entered onto the stack. (This causes the algorithm to skip any descendants of the element.)

Recall that h1 has the highest rank, and h6 has the lowest rank.
Otherwise

Do nothing.
In addition, whenever you exit a node, after doing the steps above, if current section is not null, associate the node with the section current section .
If the current outlinee is null, then there was no sectioning content element or sectioning root element in the DOM. There is no outline . Abort these steps.
Associate any nodes that were not associated a section in the steps above with current outlinee as their section.
Associate all nodes with the heading of the section with which they are associated, if any.
If current outlinee is the body element , then the outline created for that element is the outline of the entire document.

The tree of sections created by the algorithm above, or a proper subset thereof, must be used when generating document outlines, for example when generating tables of contents.

When creating an interactive table of contents, entries should jump the user to the relevant sectioning content element, if the section was created for a real element in the original document, or to the relevant heading content element, if the section in the tree was generated for a heading in the above process.

Selecting the first section of the document therefore always takes the user to the top of the document, regardless of where the first header in the body is to be found.

The following JavaScript function shows how the tree walk could be implemented. The root argument is the root of the tree to walk, and the enter and exit arguments are callbacks that are called with the nodes as they are entered and exited. [ECMA262]

function (root, enter, exit) {
  var node = root;
  start: do while (node) {
    enter(node);
    if (node.firstChild) {
      node = node.firstChild;
      continue start;
    }
    while (node) {
      exit(node);
      if (node.nextSibling) {
        node = node.nextSibling;
        continue start;
      }
      if (node == root)
        node = null;
      else
        node = node.parentNode;
    }
  }
}

4.3.10.2. Distinguishing site-wide headings from page headings

Given the outline of a document, but ignoring any sections created for nav and aside elements, and any of their descendants, if the only root of the tree is the body element 's section , and it has only a single subsection which is created by an article element, then the heading of the body element should be assumed to be a site-wide heading, and the heading of the article element should be assumed to be the page's heading.

If a page starts with a heading that is common to the whole site, the document must be authored such that, in the document's outline , ignoring any sections created for nav and aside elements and any of their descendants, the tree has only one root section , the body element 's section, its heading is the site-wide heading, the body element has just one subsection, that subsection is created by an article element, and that article 's heading is the page heading.

If a page does not contain a site-wide heading, then the page must be authored such that, in the document's outline , ignoring any sections created for nav and aside elements and any of their descendants, either the body element has no subsections, or it has more than one subsection, or it has a single subsection but that subsection is not created by an article element, or there is more than one section at the root of the outline.

Conceptually, a site is thus a document with many articles — when those articles are split into many pages, the heading of the original single page becomes the heading of the site, repeated on every page.

4.4 Grouping content

4.4.1 The `p` element

Categories: Flow content .
Contexts in which this element may be used:: Where flow content is expected.
Content model:: Phrasing content .
Element-specific attributes:: None.
DOM interface:: Uses HTMLElement .

The p element represents a paragraph .

The following examples are conforming HTML fragments:

<p>The little kitten gently seated himself on a piece of
carpet. Later in his life, this would be referred to as the time the
cat
sat
on
the
mat.</p>

<fieldset>
 <legend>Personal information</legend>
 <p>
   <label>Name: <input name="n"></label>
   <label><input name="anon" type="checkbox"> Hide from other users</label>
 </p>
 <p><label>Address: <textarea name="a"></textarea></label></p>
</fieldset>

<p>There was once an example from Femley,<br>
Whose markup was of dubious quality.<br>
The validator complained,<br>
So the author was pained,<br>
To
move
the
error
from
the
markup
to
the
rhyming.</p>

The p element should not be used when a more specific element is more appropriate.

The following example is technically correct:

<section>
 <!-- ... -->
 <p>Last modified: 2001-04-23</p>
 <p>Author: fred@example.com</p>
</section>

However, it would be better marked-up as:

<section>
 <!-- ... -->
 <footer>Last modified: 2001-04-23</footer>
 <address>Author: fred@example.com</address>
</section>

Or:

<section>
 <!-- ... -->
 <footer>
  <p>Last modified: 2001-04-23</p>
  <address>Author: fred@example.com</address>
 </footer>
</section>

4.4.2 The `hr` element

Categories: Flow content .
Contexts in which this element may be used:: Where flow content is expected.
Content model:: Empty.
Element-specific attributes:: None.
DOM interface:: Uses HTMLElement .

The hr element represents a paragraph -level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.

4.4.3 The `br` element

Categories: Phrasing content .
Contexts in which this element may be used:: Where phrasing content is expected.
Content model:: Empty.
Element-specific attributes:: None.
DOM interface:: Uses HTMLElement .

The br element represents a line break.

br elements must be empty. Any content inside br elements must not be considered part of the surrounding text.

br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.

The following example is correct usage of the br element:

<p>P. Sherman<br>
42 Wallaby Way<br>
Sydney</p>

br elements must not be used for separating thematic groups in a paragraph.

The following examples are non-conforming, as they abuse the br element:

<p><a ...>34 comments.</a><br>
<a
...>Add
a
comment.<a></p>

<p>Name: <input name="name"><br>
Address:
<input
name="address"></p>

Here are alternatives to the above, which are correct:

<p><a ...>34 comments.</a></p>
<p><a
...>Add
a
comment.<a></p>

<p>Name: <input name="name"></p>
<p>Address:
<input
name="address"></p>

If a paragraph consists of nothing but a single br element, it represents a placeholder blank line (e.g. as in a template). Such blank lines must not be used for presentation purposes.

4.4.4 The `pre` element

Categories: Flow content .
Contexts in which this element may be used:: Where flow content is expected.
Content model:: Phrasing content .
Element-specific attributes:: None.
DOM interface:: Uses HTMLElement .

The pre element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.

In the HTML serialization , a leading newline character immediately following the pre element start tag is stripped.

Some examples of cases where the pre element could be used:

Including an e-mail, with paragraphs indicated by blank lines, lists indicated by lines prefixed with a bullet, and so on.
Including fragments of computer code, with structure indicated according to the conventions of that language.
Displaying ASCII art.

To represent a block of computer code, the pre element can be used with a code element; to represent a block of computer output the pre element can be used with a samp element. Similarly, the kbd element can be used within a pre element to indicate text that the user is to enter.

In the following snippet, a sample of computer code is presented.

<p>This is the <code>Panel</code> constructor:</p>
<pre><code>function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code>
</pre>

In the following snippet, samp and kbd elements are mixed in the contents of a pre element to show a session of Zork I.

<pre><samp>You are in an open field west of a big white house with a boarded
front door.
There is a small mailbox here.
></samp> <kbd>open mailbox</kbd>
<samp>Opening the mailbox reveals:
A leaflet.
>
</samp>
</pre>

The following shows a contemporary poem that uses the pre element to preserve its unusual formatting, which forms an intrinsic part of the poem itself.

<pre>                maxling
it is with a          heart
               heavy
that i admit loss of a feline
        so           loved
a friend lost to the
        unknown
                                (night)
~cdr
11dec07</pre>

4.4.5 The `dialog` element

Categories: Flow content .
Contexts in which this element may be used:: Where flow content is expected.
Content model:: Zero or more pairs of one dt element followed by one dd element.
Element-specific attributes:: None.
DOM interface:: Uses HTMLElement .

The dialog element represents a conversation.

Each part of the conversation must have an explicit talker (or speaker) given by a dt element, and a discourse (or quote) given by a dd element.

This example demonstrates this using an extract from Abbot and Costello's famous sketch, Who's on first :

<dialog>
 <dt> Costello
 <dd> Look, you gotta first baseman?
 <dt> Abbott
 <dd> Certainly.
 <dt> Costello
 <dd> Who's playing first?
 <dt> Abbott
 <dd> That's right.
 <dt> Costello
 <dd> When you pay off the first baseman every month, who gets the money?
 <dt> Abbott
 <dd> Every dollar of it. 
</dialog>

Text in a dt element in a dialog element is implicitly the source of the text given in the following dd element, and the contents of the dd element are implicitly a quote from that speaker. There is thus no need to include cite , q , or blockquote elements in this markup. Indeed, a q element inside a dd element in a conversation would actually imply the people talking were themselves quoting another work. See the cite , q , and blockquote elements for other ways to cite or quote.

4.4.6 The `blockquote` element

Categories

Sectioning root .

Contexts in which this element may be used:

Where flow content is expected.

Content model:

Element-specific attributes:

cite

DOM interface:

interface HTMLQuoteElement : HTMLElement {
           attribute DOMString cite;
};

The HTMLQuoteElement interface is also used by the q element.

The blockquote element represents a section that is quoted from another source.

Content inside a blockquote must be quoted from another source, whose address, if it has one, should be cited in the cite attribute.

If the cite attribute is present, it must be a valid URL . User agents should allow users to follow such citation links.

If a blockquote element is preceded or followed by a single paragraph that contains a single cite element and that is itself not preceded or followed by another blockquote element and does not itself have a q element descendant, then, the title of the work given by that cite element gives the source of the quotation contained in the blockquote element.

The cite DOM attribute must reflect the element's cite content attribute.

The best way to represent a conversation is not with the cite and blockquote elements, but with the dialog element.

4.4.7 The `ol` element

Categories

Contexts in which this element may be used:

Where flow content is expected.

Content model:

Zero or more li elements.

Element-specific attributes:

reversed

start

DOM interface:

interface HTMLOListElement : HTMLElement {
           attribute boolean reversed;
           attribute long start;
};

The ol element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document.

The items of the list are the li element child nodes of the ol element, in tree order .

The reversed attribute is a boolean attribute . If present, it indicates that the list is a descending list (..., 3, 2, 1). If the attribute is omitted, the list is an ascending list (1, 2, 3, ...).

The start attribute, if present, must be a valid integer giving the ordinal value of the first list item.

If the start attribute is present, user agents must parse it as an integer , in order to determine the attribute's value. The default value, used if the attribute is missing or if the value cannot be converted to a number according to the referenced algorithm, is 1 if the element has no reversed attribute, and is the number of child li elements otherwise.

The first item in the list has the ordinal value given by the ol element's start attribute, unless that li element has a value attribute with a value that can be successfully parsed, in which case it has the ordinal value given by that value attribute.

Each subsequent item in the list has the ordinal value given by its value attribute, if it has one, or, if it doesn't, the ordinal value of the previous item, plus one if the reversed is absent, or minus one if it is present.

The reversed DOM attribute must reflect the value of the reversed content attribute.

The start DOM attribute must reflect the value of the start content attribute.

The following markup shows a list where the order matters, and where the ol element is therefore appropriate. Compare this list to the equivalent list in the ul section to see an example of the same items using the ul element.

<p>I have lived in the following countries (given in the order of when
I first lived there):</p>
<ol>
 <li>Switzerland
 <li>United Kingdom
 <li>United States
 <li>Norway
</ol>

Note how changing the order of the list changes the meaning of the document. In the following example, changing the relative order of the first two items has changed the birthplace of the author:

<p>I have lived in the following countries (given in the order of when
I first lived there):</p>
<ol>
 <li>United Kingdom
 <li>Switzerland
 <li>United States
 <li>Norway
</ol>

4.4.8 The `ul` element

Categories: Flow content .
Contexts in which this element may be used:: Where flow content is expected.
Content model:: Zero or more li elements.
Element-specific attributes:: None.
DOM interface:: Uses HTMLElement .

The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document.

The items of the list are the li element child nodes of the ul element.

The following markup shows a list where the order does not matter, and where the ul element is therefore appropriate. Compare this list to the equivalent list in the ol section to see an example of the same items using the ol element.

<p>I have lived in the following countries:</p>
<ul>
 <li>Norway
 <li>Switzerland
 <li>United Kingdom
 <li>United States
</ul>

Note that changing the order of the list does not change the meaning of the document. The items in the snippet above are given in alphabetical order, but in the snippet below they are given in order of the size of their current account balance in 2007, without changing the meaning of the document whatsoever:

<p>I have lived in the following countries:</p>
<ul>
 <li>Switzerland
 <li>Norway
 <li>United Kingdom
 <li>United States
</ul>

4.4.9 The `li` element

Categories

None.

Contexts in which this element may be used:

Inside ol elements.

Inside ul elements.

Inside menu elements.

Content model:

When the element is a child of a menu element: phrasing content .

Otherwise: flow content .

Element-specific attributes:

If the element is a child of an ol element: value

If the element is not the child of an ol element: None.

DOM interface:

interface HTMLLIElement : HTMLElement {
           attribute long value;
};

The li element represents a list item. If its parent element is an ol , ul , or menu element, then the element is an item of the parent element's list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element.

The value attribute, if present, must be a valid integer giving the ordinal value of the list item.

If the value attribute is present, user agents must parse it as an integer , in order to determine the attribute's value. If the attribute's value cannot be converted to a number, the attribute must be treated as if it was absent. The attribute has no default value.

The value attribute is processed relative to the element's parent ol element (q.v.), if there is one. If there is not, the attribute has no effect.

The value DOM attribute must reflect the value of the value content attribute.

The following example, the top ten movies are listed (in reverse order). Note the way the list is given a title by using a figure element and its legend .

<figure>
 <legend>The top 10 movies of all time</legend>
 <ol>
  <li value="10"><cite>Josie and the Pussycats</cite>, 2001</li>
  <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
  <li value="8"><cite>A Bug's Life</cite>, 1998</li>
  <li value="7"><cite>Toy Story</cite>, 1995</li>
  <li value="6"><cite>Monsters, Inc</cite>, 2001</li>
  <li value="5"><cite>Cars</cite>, 2006</li>
  <li value="4"><cite>Toy Story 2</cite>, 1999</li>
  <li value="3"><cite>Finding Nemo</cite>, 2003</li>
  <li value="2"><cite>The Incredibles</cite>, 2004</li>
  <li value="1"><cite>Ratatouille</cite>, 2007</li>
 </ol>
</figure>

The markup could also be written as follows, using the reversed attribute on the ol element:

<figure>
 <legend>The top 10 movies of all time</legend>
 <ol reversed>
  <li><cite>Josie and the Pussycats</cite>, 2001</li>
  <li><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
  <li><cite>A Bug's Life</cite>, 1998</li>
  <li><cite>Toy Story</cite>, 1995</li>
  <li><cite>Monsters, Inc</cite>, 2001</li>
  <li><cite>Cars</cite>, 2006</li>
  <li><cite>Toy Story 2</cite>, 1999</li>
  <li><cite>Finding Nemo</cite>, 2003</li>
  <li><cite>The Incredibles</cite>, 2004</li>
  <li><cite>Ratatouille</cite>, 2007</li>
 </ol>
</figure>

4.4.10 The `dl` element

Categories: Flow content .
Contexts in which this element may be used:: Where flow content is expected.
Content model:: Zero or more groups each consisting of one or more dt elements followed by one or mode dd elements.
Element-specific attributes:: None.
DOM interface:: Uses HTMLElement .

The dl element introduces an association list consisting of zero or more name-value groups (a description list). Each group must consist of one or more names ( dt elements) followed by one or more values ( dd elements).

Name-value groups may be terms and definitions, metadata topics and values, or any other groups of name-value data.

The values within a group are alternatives; multiple paragraphs forming part of the same value must all be given within the same dd element.

The order of the list of groups, and of the names and values within each group, may be significant.

If a dl element is empty, it contains no groups.

If a dl element contains non- whitespace text nodes , or elements other than dt and dd , then those elements or text nodes do not form part of any groups in that dl .

If a dl element contains only dt elements, then it consists of one group with names but no values.

If a dl element contains only dd elements, then it consists of one group with values but no names.

If a dl element starts with one or more dd elements, then the first group has no associated name.

If a dl element ends with one or more dt elements, then the last group has no associated value.

When a dl element doesn't match its content model, it is often due to accidentally using dd elements in the place of dt elements and vice versa. Conformance checkers can spot such mistakes and might be able to advise authors how to correctly use the markup.

In the following example, one entry ("Authors") is linked to two values ("John" and "Luke").

<dl>
 <dt> Authors
 <dd> John
 <dd> Luke
 <dt> Editor
 <dd> Frank
</dl>

In the following example, one definition is linked to two terms.

<dl>
 <dt lang="en-US"> <dfn>color</dfn> </dt>
 <dt lang="en-GB"> <dfn>colour</dfn> </dt>
 <dd> A sensation which (in humans) derives from the ability of
 the fine structure of the eye to distinguish three differently
 filtered analyses of a view. </dd>
</dl>

The following example illustrates the use of the dl element to mark up metadata of sorts. At the end of the example, one group has two metadata labels ("Authors" and "Editors") and two values ("Robert Rothman" and "Daniel Jackson").

<dl>
 <dt> Last modified time </dt>
 <dd> 2004-12-23T23:33Z </dd>
 <dt> Recommended update interval </dt>
 <dd> 60s </dd>
 <dt> Authors </dt>
 <dt> Editors </dt>
 <dd> Robert Rothman </dd>
 <dd> Daniel Jackson </dd>
</dl>

The following example shows the dl element used to give a set of instructions. The order of the instructions here is important (in the other examples, the order of the blocks was not important).

<p>Determine the victory points as follows (use the
first matching case):</p>
<dl>
 <dt> If you have exactly five gold coins </dt>
 <dd> You get five victory points </dd>
 <dt> If you have one or more gold coins, and you have one or more silver coins </dt>
 <dd> You get two victory points </dd>
 <dt> If you have one or more silver coins </dt>
 <dd> You get one victory point </dd>
 <dt> Otherwise </dt>
 <dd> You get no victory points </dd>
</dl>

The following snippet shows a dl element being used as a glossary. Note the use of dfn to indicate the word being defined.

<dl>
 <dt><dfn>Apartment</dfn>, n.</dt>
 <dd>An execution context grouping one or more threads with one or
 more COM objects.</dd>
 <dt><dfn>Flat</dfn>, n.</dt>
 <dd>A deflated tire.</dd>
 <dt><dfn>Home</dfn>, n.</dt>
 <dd>The user's login directory.</dd>
</dl>

The dl element is inappropriate for marking up dialogue, since dialogue is ordered (each speaker/line pair comes after the next). For an example of how to mark up dialogue, see the dialog element.

4.4.11 The `dt` element

Categories: None.
Contexts in which this element may be used:: Before dd or dt elements inside dl elements.; Before a dd element inside a dialog element.
Content model:: Phrasing content .
Element-specific attributes:: None.
DOM interface:: Uses HTMLElement .

The dt element represents the term, or name, part of a term-description group in a description list ( dl element), and the talker, or speaker, part of a talker-discourse pair in a conversation ( dialog element).

The dt element itself, when used in a dl element, does not indicate that its contents are a term being defined, but this can be indicated using the dfn element.

If the dt element is the child of a dialog element, and it further contains a time element, then that time element represents a timestamp for when the associated discourse ( dd element) was said, and is not part of the name of the talker.

The following extract shows how an IM conversation log could be marked up.

<dialog>
 <dt> <time>14:22</time> egof
 <dd> I'm not that nerdy, I've only seen 30% of the star trek episodes
 <dt> <time>14:23</time> kaj
 <dd> if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy
 <dt> <time>14:23</time> egof
 <dd> it's unarguably
 <dt> <time>14:24</time> kaj
 <dd> you are not helping your case
</dialog>

4.4.12 The `dd` element

Categories: None.
Contexts in which this element may be used:: After dt or dd elements inside dl elements.; After a dt element inside a dialog element.
Content model:: Flow content .
Element-specific attributes:: None.
DOM interface:: Uses HTMLElement .

The dd element represents the description, definition, or value, part of a term-description group in a description list ( dl element), and the discourse, or quote, part in a conversation ( dialog element).

4.5 Text-level semantics

4.5.1 The `a` element

Categories

Interactive content .

Contexts in which this element may be used:

Where phrasing content is expected.

Content model:

Phrasing content , but there must be no interactive content descendant.

Element-specific attributes:

href

target

ping

rel

media

hreflang

type

DOM interface:

[Stringifies=href] interface HTMLAnchorElement : HTMLElement {
           attribute DOMString href;
           attribute DOMString target;
           attribute DOMString ping;
           attribute DOMString rel;
  readonly attribute DOMTokenList relList;
           attribute DOMString media;
           attribute DOMString hreflang;
           attribute DOMString type;
};

The Command interface must also be implemented by this element.

If the a element has an href attribute, then it represents a hyperlink .

If the a element has no href attribute, then the element is a placeholder for where a link might otherwise have been placed, if it had been relevant.

The target , ping , rel , media , hreflang , and type attributes must be omitted if the href attribute is not present.

If a site uses a consistent navigation toolbar on every page, then the link that would normally link to the page itself could be marked up using an a element:

<nav>
 <ul>
  <li> <a href="/">Home</a> </li>
  <li> <a href="/news">News</a> </li>
  <li> <a>Examples</a> </li>
  <li> <a href="/legal">Legal</a> </li>
 </ul>
</nav>

Interactive user agents should allow users to follow hyperlinks created using the a element. The href , target and ping attributes decide how the link is followed. The rel , media , hreflang , and type attributes may be used to indicate to the user the likely nature of the target resource before the user follows the link.

The activation behavior of a elements that represent hyperlinks is to run the following steps:

If the DOMActivate event in question is not trusted (i.e. a click() method call was the reason for the event being dispatched), and the a element's target attribute is ... then raise an INVALID_ACCESS_ERR exception and abort these steps.
If the target of the DOMActivate event is an img element with an ismap attribute specified, then server-side image map processing must be performed, as follows:
1. If the DOMActivate event was dispatched as the result of a real pointing-device-triggered click event on the img element, then let x be the distance in CSS pixels from the left edge of the image to the location of the click, and let y be the distance in CSS pixels from the top edge of the image to the location of the click. Otherwise, let x and y be zero.
2. Let the hyperlink suffix be a U+003F QUESTION MARK character, the value of x expressed as a base-ten integer using ASCII digits (U+0030 DIGIT ZERO to U+0039 DIGIT NINE), a U+002C COMMA character, and the value of y expressed as a base-ten integer using ASCII digits.
Finally, the user agent must follow the hyperlink defined by the a element. If the steps above defined a hyperlink suffix , then take that into account when following the hyperlink.

One way that a user agent can enable users to follow hyperlinks is by allowing a elements to be clicked, or focussed and activated by the keyboard. This will cause the aforementioned activation behavior to be invoked.

The DOM attributes href , ping , target , rel , media , hreflang , and type , must each reflect the respective content attributes of the same name.

The DOM attribute relList must reflect the rel content attribute.

4.5.2 The `q` element

Categories: Phrasing content .
Contexts in which this element may be used:: Where phrasing content is expected.
Content model:: Phrasing content .
Element-specific attributes:: cite
DOM interface:: The q element uses the HTMLQuoteElement interface.

The q element represents some phrasing content quoted from another source.

Quotation punctuation (such as quotation marks), if any, must be placed inside the q element.

Content inside a q element must be quoted from another source, whose address, if it has one, should be cited in the cite attribute.

If the cite attribute is present, it must be a valid URL . User agents should allow users to follow such citation links.

If a q element is contained (directly or indirectly) in a paragraph that contains a single cite element and has no other q element descendants, then, the title of the work given by that cite element gives the source of the quotation contained in the q element.

Here is a simple example of the use of the q element:

<p>The man said <q>"Things that are impossible just take
longer"</q>.
I
disagreed
with
him.</p>

Here is an example with both an explicit citation link in the q element, and an explicit citation outside:

<p>The W3C page <cite>About W3C</cite> says the W3C's
mission is <q cite="http://www.w3.org/Consortium/">"To lead the
World Wide Web to its full potential by developing protocols and
guidelines that ensure long-term growth for the Web"</q>. I
disagree
with
this
mission.</p>

In the following example, the quotation itself contains a quotation:

<p>In <cite>Example One</cite>, he writes <q>"The man
said <q>'Things that are impossible just take longer'</q>. I
disagreed
with
him"</q>.
Well,
I
disagree
even
more!</p>

In the following example, there are no quotation marks:

<p>
His
best
argument:
<q>
I
disagree!</q>
</p>

4.5.3 The `cite` element

Categories: Phrasing content .
Contexts in which this element may be used:: Where phrasing content is expected.
Content model:: Phrasing content .
Element-specific attributes:: None.
DOM interface:: Uses HTMLElement .

The cite element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing.

A person's name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people's names. (In some cases, the b element might be appropriate for names; e.g. in a gossip article where the names of famous people are keywords rendered with a different style to draw attention to them. In other cases, if an element is really needed, the span element can be used.)

A ship is similarly not a work, and the element must not be used to mark up ship names (the i element can be used for that purpose).

This next example shows a typical use of the cite element:

<p>My favourite book is <cite>The Reality Dysfunction</cite> by
Peter F. Hamilton. My favourite comic is <cite>Pearls Before
Swine</cite> by Stephan Pastis. My favourite track is <cite>Jive
Samba</cite>
by
the
Cannonball
Adderley
Sextet.</p>

This is correct usage:

<p>According to the Wikipedia article <cite>HTML</cite>, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe.
This
is
obviously
an
over-simplification.</p>

The following, however, is incorrect usage, as the cite element here is containing far more than the title of the work:

<!-- do not copy this example, it is an example of bad usage! -->
<p>According to <cite>the Wikipedia article on HTML</cite>, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe.
This
is
obviously
an
over-simplification.</p>

The cite element is obviously a key part of any citation in a bibliography, but it is only used to mark the title:

<p><cite>Universal Declaration of Human Rights</cite>, United Nations,
December
1948.
Adopted
by
General
Assembly
resolution
217
A
(III).</p>

A citation is not a quote (for which the q element is appropriate).

This is incorrect usage, because cite is not for quotes:

<p>
<cite>
This
is
wrong!</cite>,
said
Ian.</p>

This is also incorrect usage, because a person is not a work:

<p>
<q>
This
is
still
wrong!</q>,
said
<cite>
Ian</cite>.</p>

The correct usage does not use a cite element:

<p>
<q>
This
is
correct</q>,
said
Ian.</p>

As mentioned above, the b element might be relevant for marking names as being keywords in certain kinds of documents:

<p>And then <b>Ian</b> said <q>this might be right, in a
gossip
column,
maybe!</q>.</p>

The cite element can apply to blockquote and q elements in certain cases described in the definitions of those elements.

This next example shows the use of cite alongside blockquote :

<p>His next piece was the aptly named <cite>Sonnet 130</cite>:</p>
<blockquote>
  <p>My mistress' eyes are nothing like the sun,<br>
  Coral is far more red, than her lips red,
...

4.5.4 The `em` element

Categories: Phrasing content .
Contexts in which this element may be used:: Where phrasing content is expected.
Content model:: Phrasing content .
Element-specific attributes:: None.
DOM interface:: Uses HTMLElement .

The em element represents stress emphasis of its contents.

The level of emphasis that a particular piece of content has is given by its number of ancestor em elements.

The placement of emphasis changes the meaning of the sentence. The element thus forms an integral part of the content. The precise way in which emphasis is used in this way depends on the language.

These examples show how changing the emphasis changes the meaning. First, a general statement of fact, with no emphasis:

<p>
Cats
are
cute
animals.</p>

By emphasizing the first word, the statement implies that the kind of animal under discussion is in question (maybe someone is asserting that dogs are cute):

<p>
<em>
Cats</em>
are
cute
animals.</p>

Moving the emphasis to the verb, one highlights that the truth of the entire sentence is in question (maybe someone is saying cats are not cute):

<p>
Cats
<em>
are</em>
cute
animals.</p>

By moving it to the adjective, the exact nature of the cats is reasserted (maybe someone suggested cats were mean animals):

<p>
Cats
are
<em>
cute</em>
animals.</p>

Similarly, if someone asserted that cats were vegetables, someone correcting this might emphasize the last word:

<p>
Cats
are
cute
<em>
animals</em>.</p>

By emphasizing the entire sentence, it becomes clear that the speaker is fighting hard to get the point across. This kind of emphasis also typically affects the punctuation, hence the exclamation mark here.

<p>
<em>
Cats
are
cute
animals!</em>
</p>

Anger mixed with emphasizing the cuteness could lead to markup such as:

<p>
<em>
Cats
are
<em>
cute</em>
animals!</em>
</p>

4.5.5 The `strong` element

Categories: Phrasing content .
Contexts in which this element may be used:: Where phrasing content is expected.
Content model:: Phrasing content .
Element-specific attributes:: None.
DOM interface:: Uses HTMLElement .

The strong element represents strong importance for its contents.

The relative level of importance of a piece of content is given by its number of ancestor strong elements; each strong element increases the importance of its contents.

Changing the importance of a piece of text with the strong element does not change the meaning of the sentence.

Here is an example of a warning notice in a game, with the various parts marked up according to how important they are:

<p><strong>Warning.</strong> This dungeon is dangerous.
<strong>Avoid the ducks.</strong> Take any gold you find.
<strong><strong>Do not take any of the diamonds</strong>,
they are explosive and <strong>will destroy anything within
ten
meters.</strong>
</strong>
You
have
been
warned.</p>

4.5.6 The `small` element

Categories: Phrasing content .
Contexts in which this element may be used:: Where phrasing content is expected.
Content model:: Phrasing content .
Element-specific attributes:: None.
DOM interface:: Uses HTMLElement .

The small element represents small print (part of a document often describing legal restrictions, such as copyrights or other disadvantages), or other side comments.

The small element does not "de-emphasize" or lower the importance of text emphasised by the em element or marked as important with the strong element.

In this example the footer contains contact information and a copyright.

<footer>
 <address>
  For more details, contact
  <a href="mailto:js@example.com">John Smith</a>.
 </address>
 <p><small>© copyright 2038 Example Corp.</small></p>
</footer>

In this second example, the small element is used for a side comment.

<p>Example Corp today announced record profits for the
second quarter <small>(Full Disclosure: Foo News is a subsidiary of
Example Corp)</small>, leading to speculation about a third quarter
merger
with
Demo
Group.</p>

In this last example, the small element is marked as being important small print.

<p>
<strong>
<small>
Continued
use
of
this
service
will
result
in
a
kiss.</small>
</strong>
</p>

4.5.7 The `mark` element

Categories: Phrasing content .
Contexts in which this element may be used:: Where phrasing content is expected.
Content model:: Phrasing content .
Element-specific attributes:: None.
DOM interface:: Uses HTMLElement .

The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader's attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user's current activity.

The rendering section will eventually suggest that user agents provide a way to let users jump between mark elements. Suggested rendering is a neon yellow background highlight, though UAs maybe should allow this to be toggled.

This example shows how the mark example can be used to bring attention to a particular part of a quotation:

<p lang="en-US">Consider the following quote:</p>
<blockquote lang="en-GB">
 <p>Look around and you will find, no-one's really
 <mark>colour</mark> blind.</p>
</blockquote>
<p lang="en-US">As we can tell from the <em>spelling</em> of the word,
the
person
writing
this
quote
is
clearly
not
American.</p>

Another example of the mark element is highlighting parts of a document that are matching some search string. If someone looked at a document, and the server knew that the user was searching for the word "kitten", then the server might return the document with one paragraph modified as follows:

<p>I also have some <mark>kitten</mark>s who are visiting me
these days. They're really cute. I think they like my garden! Maybe I
should
adopt
a
<mark>
kitten</mark>.</p>

In the following snippet, a paragraph of text refers to a specific part of a code fragment.

<p>The highlighted part below is where the error lies:</p>
<pre><code>var i: Integer;
begin
   i := <mark>1.1</mark>;
end.</code>
</pre>

This is another example showing the use of mark to highlight a part of quoted text that was originally not emphasised. In this example, common typographic conventions have led the author to explicitly style mark elements in quotes to render in italics.

<article>
 <style>
  blockquote mark, q mark {
    font: inherit; font-style: italic;
    text-decoration: none;
    background: transparent; color: inherit;
  }
  .bubble em {
    font: inherit; font-size: larger;
    text-decoration: underline;
  }
 </style>
 <h1>She knew</h1>
 <p>Did you notice the subtle joke in the joke on panel 4?</p>
 <blockquote>
  <p class="bubble">I didn't <em>want</em> to believe. <mark>Of course
  on some level I realized it was a known-plaintext attack.</mark> But I
  couldn't admit it until I saw for myself.</p>
 </blockquote>
 <p>(Emphasis mine.) I thought that was great. It's so pedantic, yet it
 explains everything neatly.</p>
</article>

Note, incidentally, the distinction between the em element in this example, which is part of the original text being quoted, and the mark element, which is highlighting a part for comment.

The following example shows the difference between denoting the importance of a span of text ( strong ) as opposed to denoting the relevance of a span of text ( mark ). It is an extract from a textbook, where the extract has had the parts relevant to the exam highlighted. The safety warnings, important though they may be, are apparently not relevant to the exam.

<h3>Wormhole Physics Introduction</h3>
<p><mark>A wormhole in normal conditions can be held open for a
maximum of just under 39 minutes.</mark> Conditions that can increase
the time include a powerful energy source coupled to one or both of
the gates connecting the wormhole, and a large gravity well (such as a
black hole).</p>
<p><mark>Momentum is preserved across the wormhole. Electromagnetic
radiation can travel in both directions through a wormhole,
but matter cannot.</mark></p>
<p>When a wormhole is created, a vortex normally forms.
<strong>Warning: The vortex caused by the wormhole opening will
annihilate anything in its path.</strong> Vortexes can be avoided when
using sufficiently advanced dialing technology.</p>
<p><mark>An obstruction in a gate will prevent it from accepting a
wormhole
connection.</mark>
</p>

4.5.8 The `dfn` element

Categories: Phrasing content .
Contexts in which this element may be used:: Where phrasing content is expected.
Content model:: Phrasing content , but there must be no descendant dfn elements.
Element-specific attributes:: None, but the title attribute has special semantics on this element.
DOM interface:: Uses HTMLElement .

The dfn element represents the defining instance of a term. The paragraph , description list group , or section that is the nearest ancestor of the dfn element must also contain the definition(s) for the term given by the dfn element.

Defining term : If the dfn element has a title attribute, then the exact value of that attribute is the term being defined. Otherwise, if it contains exactly one element child node and no child text nodes , and that child element is an abbr element with a title attribute, then the exact value of that attribute is the term being defined. Otherwise, it is the exact textContent of the dfn element that gives the term being defined.

If the title attribute of the dfn element is present, then it must contain only the term being defined.

The title attribute of ancestor elements does not affect dfn elements.

An a element that links to a dfn element represents an instance of the term defined by the dfn element.

In the following fragment, the term "GDO" is first defined in the first paragraph, then used in the second.

<p>The <dfn><abbr title="Garage Door Opener">GDO</abbr></dfn>
is a device that allows off-world teams to open the iris.</p>
<!-- ... later in the document: -->
<p>Teal'c activated his <abbr title="Garage Door Opener">GDO</abbr>
and
so
Hammond
ordered
the
iris
to
be
opened.</p>

With the addition of an a element, the reference can be made explicit:

<p>The <dfn id=gdo><abbr title="Garage Door Opener">GDO</abbr></dfn>
is a device that allows off-world teams to open the iris.</p>
<!-- ... later in the document: -->
<p>Teal'c activated his <a href=#gdo><abbr title="Garage Door Opener">GDO</abbr></a>
and
so
Hammond
ordered
the
iris
to
be
opened.</p>

4.5.9 The `abbr` element

Categories: Phrasing content .
Contexts in which this element may be used:: Where phrasing content is expected.
Content model:: Phrasing content .
Element-specific attributes:: None, but the title attribute has special semantics on this element.
DOM interface:: Uses HTMLElement .

The abbr element represents an abbreviation or acronym, optionally with its expansion. The title attribute may be used to provide an expansion of the abbreviation. The attribute, if specified, must contain an expansion of the abbreviation, and nothing else.

The paragraph below contains an abbreviation marked up with the abbr element. This paragraph defines the term "Web Hypertext Application Technology Task Force".

<p>The <dfn id=whattf><abbr title="Web Hypertext Application
Technology Task Force">WHATTF</abbr></dfn> is a loose
unofficial collaboration of Web browser manufacturers and interested
parties who wish to develop new technologies designed to allow authors
to
write
and
deploy
Applications
over
the
World
Wide
Web.</p>

This paragraph has two abbreviations. Notice how only one is defined; the other, with no expansion associated with it, does not use the abbr element.

<p>The <abbr title="Web Hypertext Application Technology Working
Group">
WHATTF</abbr>
started
working
on
HTML5
in
2004.</p>

This paragraph links an abbreviation to its definition.

<p>The <a href="#whattf"><abbr title="Web Hypertext Application
Technology Task Force">WHATTF</abbr></a> community does not
have
much
representation
from
Asia.</p>

This paragraph marks up an abbreviation without giving an expansion, possibly as a hook to apply styles for abbreviations (e.g. smallcaps).

<p>Philip` and Dashiva both denied that they were going to
get the issue counts from past revisions of the specification to
backfill
the
<abbr>
WHATTF</abbr>
issue
graph.</p>

If an abbreviation is pluralized, the expansion's grammatical number (plural vs singular) must match the grammatical number of the contents of the element.

Here the plural is outside the element, so the expansion is in the singular:

<p>Two <abbr title="Task Force">WG</abbr>s worked on
this specification: the <abbr>WHATTF</abbr> and the
<abbr>
HTMLWG</abbr>.</p>

Here the plural is inside the element, so the expansion is in the plural:

<p>Two <abbr title="Task Forces">WGs</abbr> worked on
this specification: the <abbr>WHATTF</abbr> and the
<abbr>
HTMLWG</abbr>.</p>

4.5.10 The `time` element

Categories

Contexts in which this element may be used:

Where phrasing content is expected.

Content model:

Element-specific attributes:

datetime

DOM interface:

interface HTMLTimeElement : HTMLElement {
           attribute DOMString dateTime;
  readonly attribute DOMTimeStamp date;
  readonly attribute DOMTimeStamp time;
  readonly attribute DOMTimeStamp timezone;
};

The time element represents a date and/or a time.

The datetime attribute, if present, must contain a date or time string that identifies the date or time being specified.

If the datetime attribute is not present, then the date or time must be specified in the content of the element, such that parsing the element's textContent according to the rules for parsing date or time strings in content successfully extracts a date or time.

The dateTime DOM attribute must reflect the datetime content attribute.

User agents, to obtain the date , time , and timezone represented by a time element, must follow these steps:

If the datetime attribute is present, then parse it according to the rules for parsing date or time strings in attributes , and let the result be result .
Otherwise, parse the element's textContent according to the rules for parsing date or time strings in content , and let the result be result .
If result is empty (because the parsing failed), then the date is unknown, the time is unknown, and the timezone is unknown.
Otherwise: if result contains a date, then that is the date ; if result contains a time, then that is the time ; and if result contains a timezone, then the timezone is the element's timezone . (A timezone can only be present if both a date and a time are also present.)

The date DOM attribute must return null if the date is unknown, and otherwise must return the time corresponding to midnight UTC (i.e. the first second) of the given date .

The time DOM attribute must return null if the time is unknown, and otherwise must return the time corresponding to the given time of 1970-01-01, with the timezone UTC.

The timezone DOM attribute must return null if the timezone is unknown, and otherwise must return the time corresponding to 1970-01-01 00:00 UTC in the given timezone , with the timezone set to UTC (i.e. the time corresponding to 1970-01-01 at 00:00 UTC plus the offset corresponding to the timezone).

In the following snippet:

<p>
Our
first
date
was
<time
datetime="2006-09-23">
a
Saturday</time>.</p>

...the time element's date attribute would have the value 1,158,969,600,000ms, and the time and timezone attributes would return null.

In the following snippet:

<p>
We
stopped
talking
at
<time
datetime="2006-09-24
05:00
-7">
5am
the
next
morning</time>.</p>

...the time element's date attribute would have the value 1,159,056,000,000ms, the time attribute would have the value 18,000,000ms, and the timezone attribute would return −25,200,000ms. To obtain the actual time, the three attributes can be added together, obtaining 1,159,048,800,000, which is the specified date and time in UTC.

Finally, in the following snippet:

<p>
Many
people
get
up
at
<time>
08:00</time>.</p>

...the time element's date attribute would have the value null, the time attribute would have the value 28,800,000ms, and the timezone attribute would return null.

These APIs may be suboptimal. Comments on making them more useful to JS authors are welcome. The primary use cases for these elements are for marking up publication dates e.g. in blog entries, and for marking event dates in hCalendar markup. Thus the DOM APIs are likely to be used as ways to generate interactive calendar widgets or some such.

4.5.11 The `progress` element

Categories

Contexts in which this element may be used:

Where phrasing content is expected.

Content model:

Element-specific attributes:

value

max

DOM interface:

interface HTMLProgressElement : HTMLElement {
           attribute float value;
           attribute float max;
  readonly attribute float position;
};

The progress element represents the completion progress of a task. The progress is either indeterminate, indicating that progress is being made but that it is not clear how much more work remains to be done before the task is complete (e.g. because the task is waiting for a remote host to respond), or the progress is a number in the range zero to a maximum, giving the fraction of work that has so far been completed.

There are two attributes that determine the current task completion represented by the element.

The value attribute specifies how much of the task has been completed, and the max attribute specifies how much work the task requires in total. The units are arbitrary and not specified.

Instead of using the attributes, authors are recommended to include the current value and the maximum value inline as text inside the element.

Here is a snippet of a Web application that shows the progress of some automated task:

<section>
 <h2>Task Progress</h2>
 <p>Progress: <progress><span id="p">0</span>%</progress></p>
 <script>
  var progressBar = document.getElementById('p');
  function updateProgress(newValue) {
    progressBar.textContent = newValue;
  }
 </script>
</section>

(The updateProgress() method in this example would be called by some other code on the page to update the actual progress bar as the task progressed.)

Author requirements : The max and value attributes, when present, must have values that are valid floating point numbers . The max attribute, if present, must have a value greater than zero. The value attribute, if present, must have a value equal to or greater than zero, and less than or equal to the value of the max attribute, if present.

The progress element is the wrong element to use for something that is just a gauge, as opposed to task progress. For instance, indicating disk space usage using progress would be inappropriate. Instead, the meter element is available for such use cases.

User agent requirements : User agents must parse the max and value attributes' values according to the rules for parsing floating point number values .

If the value attribute is omitted, then user agents must also parse the textContent of the progress element in question using the steps for finding one or two numbers of a ratio in a string . These steps will return nothing, one number, one number with a denominator punctuation character, or two numbers.

Using the results of this processing, user agents must determine whether the progress bar is an indeterminate progress bar, or whether it is a determinate progress bar, and in the latter case, what its current and maximum values are, all as follows:

If the max attribute is omitted, and the value is omitted, and the results of parsing the textContent was nothing, then the progress bar is an indeterminate progress bar. Abort these steps.
Otherwise, it is a determinate progress bar.
If the max attribute is included, then, if a value could be parsed out of it, then the maximum value is that value.
Otherwise, if the max attribute is absent but the value attribute is present, or, if the max attribute is present but no value could be parsed from it, then the maximum is 1.
Otherwise, if neither attribute is included, then, if the textContent contained one number with an associated denominator punctuation character, then the maximum value is the value associated with that denominator punctuation character ; otherwise, if the textContent contained two numbers, the maximum value is the higher of the two values; otherwise, the maximum value is 1.
If the value attribute is present on the element and a value could be parsed out of it, that value is the current value of the progress bar. Otherwise, if the attribute is present but no value could be parsed from it, the current value is zero.
Otherwise if the value attribute is absent and the max attribute is present, then, if the textContent was parsed and found to contain just one number, with no associated denominator punctuation character, then the current value is that number. Otherwise, if the value attribute is absent and the max attribute is present then the current value is zero.
Otherwise, if neither attribute is present, then the current value is the lower of the one or two numbers that were found in the textContent of the element.
If the maximum value is less than or equal to zero, then it is reset to 1.
If the current value is less than zero, then it is reset to zero.
Finally, if the current value is greater than the maximum value, then the current value is reset to the maximum value.

UA requirements for showing the progress bar : When representing a progress element to the user, the UA should indicate whether it is a determinate or indeterminate progress bar, and in the former case, should indicate the relative position of the current value relative to the maximum value.

The max and value DOM attributes must reflect the elements' content attributes of the same name. When the relevant content attributes are absent, the DOM attributes must return zero. The value parsed from the textContent never affects the DOM values.

Would be cool to have the value DOM attribute update the textContent in-line...

If the progress bar is an indeterminate progress bar, then the position DOM attribute must return −1. Otherwise, it must return the result of dividing the current value by the maximum value.

4.5.12 The `meter` element

Categories

Contexts in which this element may be used:

Where phrasing content is expected.

Content model: