html elementhead element followed by a
body element.manifestHTMLElement .The html element represents the
root of an HTML document.
The manifest attribute gives
the address of the document's application
cache manifest , if there is one. If the
attribute is present, the attribute's value must be a valid URI (or
IRI).
The manifest attribute only has an
effect during the early stages of document load. Changing the
attribute dynamically thus has no effect (and thus, no DOM API is
provided for this attribute). Furthermore, as
it is processed before any
Later base elements are seen,
its value is not subject to being made relative to any base URI.
Though it has absolutely no effect and no meaning,
can't affect the resolving of relative URIs in html manifestelement, in HTML documents , may have an
xmlns attribute specified, if, and only if, it has the exact value
" http://www.w3.org/1999/xhtml ". This does not apply to XML
documents . In HTML, the xmlns attribute has absolutely no effect.
It is basically a talisman. It is allowed merely to make migration
to and from XHTML mildly easier. When parsed by an HTML parser ,
the attribute ends up in the null namespace, not attributes, as the "
http://www.w3.org/2000/xmlns/ " namespace like namespace
declaration attributes in XML do. In
XML, an xmlns attribute is part of the namespace declaration
mechanism, and an element cannot actually have an xmlns attribute
in the null namespace specified. are
processed before those elements are seen.
head elementhtml element.title element.HTMLElement .The head element collects the
document's metadata.
title elementhead element containing
no other title elements.HTMLElement .The title element represents
the document's title or name. Authors should use titles that
identify their documents even when they are used out of context,
for example in a user's history or bookmarks, or in search results.
The document's title is often different from its first header,
since the first header does not have to stand alone when taken out
of context.
There must be no more than one title element per document.
The title element must not
contain any elements.
Here are some examples of appropriate titles, contrasted with the top-level headers that might be used on those same pages.
<title>Introduction to The Mating Rituals of Bees</title>
...
<h1>Introduction</h1>
<p>This companion guide to the highly successful
<cite>Introduction to Medieval Bee-Keeping</cite> book is...
The next page might be a part of the same site. Note how the title describes the subject matter unambiguously, while the first header assumes the reader knowns what the context is and therefore won't wonder if the dances are Salsa or Waltz:
<title>Dances used during bee mating rituals</title>
...
<h1>
The
Dances</h1>
The string to use as the document's title is given by the
document.title DOM attribute. User
agents should use the document's title when referring to the
document in their user interface.
base elementhead element containing
no other base elements.hreftargetinterface HTMLBaseElement : HTMLElement {
attribute DOMString href;
attribute DOMString target;
};
The base element allows authors
to specify the document's base URI for the purposes of resolving
relative URIs, 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 URI (or IRI).
A base element, if it has an
href
attribute, must come before any other elements in the tree that
have attributes with URIs (except the html element and its manifest
attribute).
User agents must use the value of the href attribute of the first base element that is both a child of the head element and has an
href attribute, if there is such
an element, as the document entity's base URI for the purposes of
section 5.1.1 of RFC 3986 ("Establishing a Base URI": "Base URI
Embedded in Content"). This base URI from RFC 3986 is referred to
by the algorithm given in XML Base, which is a
normative part of this specification . [RFC3986]
If the base URI given by this attribute is a relative URI, it
must be resolved relative to the higher-level base URIs (i.e. the
base URI from the encapsulating entity or the URI used to retrieve
the entity) to obtain an absolute base URI. All xml:base attributes
must be ignored when resolving relative URIs in this href attribute.
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 .
The href and target DOM attributes
must reflect the content attributes of the
same name.
link elementnoscript element that
is a child of a head element.hrefrelmediahreflangtypesizestitle attribute has special semantics on this
element.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 URI (or IRI). 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). hyperlinks); exactly which and how many links are
created depends on the keywords given in the rel attribute. User agents should must process
the links on a per-link basis, not a per-element basis.
The exact behaviour 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:
rel
attribute)title
attribute).href attribute).hreflang
attribute).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. 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 only apply the external
resource to views while their state match the listed
media. media, 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 , user agents may use the type given in this attribute to decide whether or not to consider using the resource at all. If the UA does not support the given MIME type for the given link relationship, then the UA may opt not to download and apply the resource.
User agents must not consider the type attribute
authoritative — upon fetching the resource, user agents must not
use metadata included in the link to the resource to determine its
type.
If the attribute is omitted, but the user
agent would fetch the resource if the type was known and
supported, then the UA
user agent must fetch the resource
to and
determine its type and thus from
its Content-Type metadata to
determine if it supports (and can apply) that external resource.
If no type metadata is specified, 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 a document contains three
four style sheet links labelled 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 A B and C files, and skip the B A file (since
text/plain is not the MIME type for CSS style
sheets).
For these two files, files B and C, it would then check the actual
types returned by the UA. server. For those that are sent as
text/css , it would apply the styles, but for those
labelled 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. When
processing links, those must be taken into consideration as well.
For If supported, for the
purposes of ordering, 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. Relative URIs in these
headers must be are resolved according to the rules given in HTTP,
not relative to base URIs set by the document (e.g. using a
base element or xml:base attributes).
[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.
meta elementcharset attribute is head element.http-equiv attribute is head element.http-equiv attribute is noscript element that is a child of a
head element.name attribute is present: where metadata content is expected.namehttp-equivcontentcharset ( HTML only)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 serialised 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 only 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
.
This specification defines a few names for the name attribute of the
meta element.
The value must be a short free-form
string that identifies giving the software used to
generate name of the document. This value Web
application that the page represents. If the page is not a Web
application, the application-name metadata name must not be used on hand-authored pages. WYSIWYG editors have
additional constraints used. User
agents may use the application name in UI in preference to the
page's title ,
since the onvalue
used with this metadata name. 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.
The value must be an ordered set of unique
space-separated tokens , each word of which is a host name. The list allows authors to provide a list of
host names free-form string that
describes the user is expected to subsequently need. User agents may,
according to user preferences and prevailing network conditions,
pre-emptively resolve the given DNS names (extracting the names
from the page. The value
using the rules must be appropriate for splitting use in a
directory of pages, e.g. in a search
engine.
The value must be a free-form string
on spaces ), thus precaching the DNS
information for those hosts and potentially reducing
that identifies the time between page loads for subsequent user
interactions. Higher priority should be given software used to host names
given earlier in generate the
list. document.
This value must not be used on hand-authored pages.
Extensions to the predefined set of metadata names may be registered in the WHATWG Wiki MetaExtensions page .
Anyone is free to edit the WHATWG Wiki MetaExtensions page at any time to add a type. These new names must be specified with the following information:
The actual name being defined. The name should not be confusingly similar to any other defined name (e.g. differing only in case).
A short description of what the metadata name's meaning is, including the format the value is required to be in.
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.
One of the following:
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 WHATWG 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 URIs must not be proposed
or accepted. Links must be represented using the link element, not the meta element.
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 the rows
with keywords give the states to which those keywords map.
| State | Keywords |
|---|---|
|
|
| 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:
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 .
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 .
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.
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.
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.
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.
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 URI
using the base
URI of the meta element.
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:
; ), 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 URI (or IRI).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 URI.
There must not be more than one
Default style meta... in the document at a
time.
The meta element may also be used to
provide UAs with A character encoding information
for HTML files, by setting the charset declaration attribute
to the name of a character encoding. This is called a mechanism by which
the character encoding declaration. used to store
or transmit a document is specified.
The following restrictions apply to character encoding declarations:
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 a superset of US-ASCII
(specifically, ANSI_X3.4-1968) for bytes in the range 0x09 - 0x0D,
0x20, 0x21, 0x22, 0x26, 0x27, 0x2C - 0x3F, 0x41 - 0x5A, and 0x61 -
0x7A , 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. 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 range 0x09 - 0x0D, 0x20, 0x21, 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.
style elementscoped attribute is present: scoped attribute is absent: where metadata content is expected.scoped attribute is absent: in a
noscript element that is a
child of a head element.scoped attribute is present: where style elements and before any text nodes other
than inter-element whitespace .type attribute.mediatypescopedtitle attribute has special semantics on this
element.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. query . [MQ] User
agents must only apply the styles to
views while their state match the listed media. 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 only
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. If the scoped attribute is not specified, the style
element must be the child of a head element or of a noscript
element that is a child of a head element. If the scoped attribute
is specified, then the style element must be the child of a prose
content element, before any text nodes other than inter-element
whitespace , and before any elements other than other style
elements.
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 .
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]
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 .
href
DOM attribute)For link elements, the location
must be the URI given by the element's href content
attribute. For style elements,
there is no location.
media DOM attribute)The media must be the same as the value of the element's
media content attribute.
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.
Some elements, for example address elements, are scoped to their nearest
ancestor sectioning content. 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 .
body elementhtml element.class=idl> 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.
section elementHTMLElement .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.
nav elementHTMLElement .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>
article elementHTMLElement .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. 3.8.5. The blockquote element Categories Prose content .
Sectioning content . Contexts in which this element may be used:
Where prose content is expected. Content model: Prose content .
Element-specific attributes: cite DOM interface: <pre
class=idl>interface { attribute DOMString ; }; 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 URI, if it has one, should be cited in the cite
attribute. If the cite attribute is present, it must be a URI (or
IRI). User agents should allow users to follow such citation links.
If a blockquote element is preceded or followed by a paragraph that
contains a single cite element and is itself not preceded or
followed by another blockquote element and does not itself have a q
element descendant, then, the citation given by that cite element
gives the source of the quotation contained in the blockquote
element. The cite DOM attribute reflects the element's cite content
attribte. The best way to represent a conversation is not with the
cite and blockquote elements, but with the dialog
element.
aside elementHTMLElement .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> ...
h1 , h2 , h3 ,
h4 , h5 , and h6
elementsHTMLElement .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.
header elementheader element descendants, and
no footer element
descendants.HTMLElement .The header element represents
the header of a section. Headers
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
heading 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>
footer elementfooter element descendants.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>
address elementfooter element descendants, and
no address element
descendants.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 .
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 elements other than
blockquote Sectioning content
elements are always considered
subsections of their nearest ancestor element of sectioning content,
content , regardless of what
implied sections other headings may have created. However,
Certain elements are said to be
sectioning roots ,including blockquote elements
are associated with implied sections. Effectively,
and blockquote tdact like sections
on can have their own outlines,
but the inside, sections and act opaquely
on headers inside these elements do not
contribute to the outside.
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:
body
section section)Notice how the blockquote nests
inside an implicit section while the sectiondoes not (and
in fact, ends the earlier implicit section so that a later
paragraph ("Grunt") is back at the top
level). 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 explictly 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.
This section will be rewritten at some
point. The defines an algorithm
likely won't change, but its description will
be dramatically simplified. Documents can be viewed as
for creating an outline for a tree of sections,
which defines how each sectioning content element in the tree or a
sectioning
root element. It is
semantically related to the others,
defined in terms of the overall section structure. This tree is related to
the document tree, but there is not a one-to-one relationship between elements in
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 document's
sections. walk.
The tree of sections should be used when
generating document outlines, outline for example when
generating tables of contents. To derive the tree of sections from
the document tree, a hypothetical tree
is used, consisting of a view of the document tree containing only
the elements of heading content and the elements of sectioning content other
than blockquote element or a
sectioning
root . Descendants
element consists of h1 - h6 , header , a list of
one or more potentially nested sections. Each section can have one
heading associated with it. 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 blockquote sectionmust be removed from this view. — they are merely conceptual sections.)
The hypothetical tree algorithm that must be followed during a walk of a DOM subtree rooted at
the root element or at an element of
a sectioning
content . In particular, while the sections
inside blockquote s do not
contribute element or a sectioning root
element to determine that element's outline is as
follows:
Let current outlinee be
null. (It holds the document's tree of
sections, blockquote s 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 have outlines of their
own. all be associated with a
section.)
UAs must take Create a stack to hold elements, which is used to handle
nesting. Initialize this hypothetical
tree (which will become stack to
empty.
As you walk over the outline) and mutate it by walking it depth first
DOM in tree order
and, for each element of heading content that
is not , trigger the first
relevant step below for each element
of its parent sectioning content element,
inserting a new element of sectioning content , as
follows: you
enter and exit it.
The element of sectioning being exited
is a heading
content as the immediately following
sibling of the parent element.
Pop that element of sectioning content , and move all the elements
from the current element stack.
Do nothing.
If current outlinee is not null, push current outlinee onto the stack.
Let current
heading element, and all subsequent siblings
up to but excluding outlinee be the
next element of
sectioning content , header element, or h1 - h6 of equal or higher
rank , whichever comes first, into that
is being entered.
Let current section be a newly created section for the current outlinee element.
Let there be a new element of sectioning content , then insert
outline for the new element of sectioning content where current outlinee ,initialized with just the new current header was. The outline is then section as the
resulting hypothetical tree. The ranks
of only section in the
headers become irrelevant at this point: each
element of outline.
Sections are nested as in
Pop the hypothetical tree. If a sectioning top element is a child of
another, that means it is a subsection of from the stack, and let the current outlinee be that other section.
element.
When creating an interactive table of
contents, entries should jump the user to Let current
section be the relevant last section
element, if it was a real element in
the original document, or to the heading, if
the section element was one outline of those created
during the above process.
Selecting current
outlinee element.
Append the first section outline
of the document therefore always takes the
user sectioning
content element being exited
to the top of the document, regardless of
where current
section .(This does not change
which section is the first header
last section in the body is to be found. outline.)
Run these steps:
Given a particular node, user agents must
use Pop the following algorithm, in top
element from the given order , to
determine which heading stack,
and section the node is most closely
associated with. The processing of this algorithm must stop as soon
as let the associated section and heading are established (even if
they are established to current outlinee be nothing). that
element.
Let current section be the node has an ancestor
that is a header element, then last
section in the associated heading
is outline of the most distant such ancestor. The associated section is
that header 's associated section (i.e. repeat this algorithm for
that header ). current
outlinee element.
Loop: If the node current section has an
ancestor that is an h1 - h6 element, then the associated heading
is no child sections, stop these
steps.
Let current section be the most distant such
ancestor. The associated last
child section is that heading's
of the current current section (i.e. repeat this algorithm for that heading
element). .
Go back to the node is an h1 - h6 substep
labeled Loop .
The UA must then
generate current
outlinee is the hypothetical element being
exited.
Let current section tree
described in the previous section, rooted at
be the nearest first section
ancestor (or the root element if there is no
such ancestor). If in the
parent outline of the heading in
that hypothetical tree is an element in current outlinee element.
Skip to the real document tree, then that element is
next step in the associated section. Otherwise, there overall set of steps. (The walk is no associated section element. over.)
Do nothing.
If the associated current section is itself.
The UA must then generate has no
heading, let the hypothetical section
tree described in element being entered
be the previous section, rooted
at heading for the current section itself. If .
Otherwise, if the section element, in that hypothetical tree,
element being entered has a child element that is an h1 - h6 element
rank equal to or a header element, then that element is greater than the associated
heading. Otherwise, there is no associated heading
element. If of the node is a footer or
address element, current
section , then the
associated create a new section
is and append it
to the nearest ancestor element
outline of sectioning content , if there is one. The node's
associated heading is the same as
current outlinee
element, so that element of sectioning content 's associated heading
(i.e. repeat this algorithm for that
element of sectioning content ). If there new section is no ancestor
element the new last section of
sectioning content , that outline. Let current section be
that new section. Let the element has
no associated section nor an associated heading. Otherwise,
being entered be the node is just a normal node, and new heading for the document
has to current
section .
Otherwise, run these substeps:
Let candidate section be examined more closely to determine its current section and heading. Create a view rooted at the nearest
ancestor element of sectioning content (or .
If the root element if there is
none) that being entered has
just h1 - h6 elements, header elements, the
node itself, and elements of sectioning content other
a rank lower than blockquote elements. (Descendants of any
the rank of the nodes in this view can be ignored, as can any node later
in heading of the tree than candidate section ,then create a new section, and append it to
candidate section
.(This does not change which section is
the node last
section in question, as the
algorithm below merely walks backwards up
this view.) outline.) Let
n current section be an
iterator for this view, initialised at
the node in question. new
section. Let c the element being entered be the current best candidate heading, initially null, and
initially not used. It is used when top-level new heading candidates are
to be searched for (see below). Repeat
these steps (which effectively goes backwards through the
node's previous siblings) until an answer is
found: current
section .Abort these
substeps.
Let n candidate
section points to a node with
no be the section that contains
the previous sibling, and
c candidate section is
null, then return in the
node's parent node as outline of current outlinee .
Return to step 2.
Push the answer. If element being
entered onto the node has no
parent stack. (This causes the
algorithm to skip any descendants of the element.)
Do nothing.
In addition,
whenever you exit a node, return null
as after doing the answer. Otherwise, steps
above, if n
current section points to a is not null,
associate the node with no previous
sibling, return c as the answer.
Adjust section n so that it points to the previous
sibling of the current position.
section .
If the n current
outlinee is pointing at an
h1 null, then there was no
sectioning
content element or
header sectioning root
element, then return that element
as in the
answer. If n DOM.
There is pointing at an h2 - h6
element, and heading candidates are not being searched for, then
return no outline. Abort these
steps.
Associate any nodes that element as were not
associated a section in the answer.
Otherwise, if n is pointing at an h2 - h6 element, and either c is
still null, or steps above with
c current outlinee is
a as their section.
Associate all nodes with the heading
of lower rank than this one, then set c to be
this element, and continue going backwards through the
previous siblings. section which which they are associated, if
any.
If n current outlinee is pointing at an the body
element of sectioning content ,
then from this point on top-level heading
candidates are being searched for. (Specifically, we are looking
for the nearest top-level header
outline created for that element is the current
section.) Continue going backwards through outline of the previous
siblings. entire document.
The tree of sections created by the
node has no preceeding headings and is not
contained in algorithm above, or a
proper subset thereof, must be used when generating document
outlines, for example when generating tables of contents.
When creating an element interactive
table of sectioning content , then
there is no associated heading and no associated section.
Otherwise, if contents, entries should
jump the answer from user to the earlier loop
step is an element of relevant
sectioning content ,
then element, if the
associated section is that was created for a
real element and in the associated
original document, or to the relevant
heading is that element
of sectioning content 's associated
heading (i.e. repeat this algorithm for that section).
Otherwise, element, if the
answer from that same earlier step is an h1 -
h6 element or 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
header bodyelement, then the associated heading is
that element and to be found.
The following JavaScript function shows
how the associated section is that
heading element's associated section (i.e. repeat this algorithm
for that heading). Not all nodes have an associated header or
section. For example, if a section tree
walk could be implemented. The root argument is
implied, as when multiple headers are found
in one element the root of
sectioning content , then a node in that
section has an anonymous associated section (its section is not
represented by a real element), the
tree to walk, and the algorithm above
does not associate enter and
exit arguments are callbacks that node are called with
any particular element of sectioning content
. For the following fragment:
<body> <h1>X</h1> <h2>X</h2>
<blockquote> <h3>X</h3> </blockquote> <p
id="a">X</p> <h4>Text Node A</h4>
<section> <h5>X</h5> </section>
<p>Text Node B</p> </body> The associations
are nodes as follows (not all associations they are shown): Node
Associated heading Associated section <body> <h1>
<body> <h1> <h1> <body> <h2>
<h2> None. <blockquote> <h2> None. <h3>
<h3> <blockquote> <p id="a"> <h2> None.
Text Node A <h4> None. Text Node B <h1>
entered and exited. [ECMA262] <body>
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;
}
}
}
Given the hypothetical section tree
, 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
header heading of the
body element should be assumed to be a site-wide
header, heading, and the header heading of the
article element should be
assumed to be the page's header.
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
hypothetical section tree outline , ignoring any
sections created for nav and
aside elements and any of their
descendants, the root of the tree
is 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 header
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 hypothetical section tree 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. 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.
p elementHTMLElement .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>
hr elementHTMLElement .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.
br elementHTMLElement .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 only 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.
pre
elementHTMLElement
.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:
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>
dialog elementdt dd 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
someone else. another work. See the cite , q , and
blockquote elements for
other ways to cite or quote. 3.10.
Preformatted text
pre
blockquotecite class=idl>interface HTMLQuoteElement : HTMLElement {
attribute DOMString cite;
};
The HTMLElement HTMLQuoteElement
.q element.
The pre blockquoteblock of preformatted
text, in which structure section
that is represented by typographic
conventions rather than by elements. quoted from another source.
Some examples of cases where the
Content inside a pre blockquoteelement could must 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 quoted
from another source, whose URI, if it has one, should be cited
in the conventions of that language.
Displaying ASCII art. cite attribute.
To represent a block of computer
code, If the pre citeelement can attribute is
present, it must be used with a
code element; URI
(or IRI). User agents should allow users to represent follow such
citation links.
If a block of
computer output the pre
blockquotecan be used with is
preceded or
followed by a single paragraph that contains a single
samp citeelement.
Similarly, the element and that is
itself not preceded
or followed by another
kbd blockquotecan be used within and does not itself have a pre qto
indicate text that the user is to enter. In descendant, then, the following snippet, a sample title of computer code is
presented. <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 work given by that kbd citeelements are
mixed in element gives the
contents source of a
the quotation contained in the
pre blockquoteelement to show a session of Zork I. 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>
element.
The following shows a contemporary poem
that uses the cite
pre DOM
attribute must reflect the
element's cite element
content attribute.
The best way to
preserve its unusual formatting, which forms
an intrinsic part of represent a
conversation is not with the poem
itself. maxling it is with a
heart heavy cite that i admit loss
of a feline so loveda friend lost to the unknown
(night) blockquote ~cdr
11dec07</pre>dialog element.3.11.
Lists
ol elementli elements.reversedstartinterface HTMLOListElement : HTMLElement {
attribute boolean reversed;
attribute long start;
};
The ol element represents
an ordered a list of items, where
the items (which have been intentionally ordered, such that changing the
order would change the meaning of the document.
The items of the list are
represented by the li elements). 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. The items of the list
are 1 if the element has no li reversedelement child nodes of attribute, and is the number
of child ol lielement, in tree order . 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.
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>
ul elementli elements.HTMLElement .The ul element represents
an unordered a list of items, where the
order of the items (which are
represented by li elements). 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>
li elementol elements.ul elements.menu elements.menu element: phrasing
content .ol element: valueol element: None.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 first 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 Bugs 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 Bugs 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>
dl elementdt elements followed by one or mode
dd elements.HTMLElement .The dl element introduces an
unordered 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 following are all conforming HTML
fragments. 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 within a group are alternatives; multiple paragraphs
forming part of the same value must all
be given within the same dl
ddelement to mark up metadata element.
The order of sorts. At the end
list of the
example, one group has two metadata labels ("Authors"
groups, and "Editors") of the
names 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> 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 ., and the
document is non-conforming.
If a dl element contains only
dt elements, then it consists of one
group with names but no values, and the
document is non-conforming. values.
If a dl element contains only
dd elements, then it consists of one
group with values but no names,
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 document
markup.
In the following example, one entry
("Authors") is non-conforming.
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.
dt elementdd or dt elements inside dl elements.dd element inside a
dialog element.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>
dd elementdt or dd elements inside dl elements.dt element inside a
dialog element.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).