a elementInteractive, strictly inline-level content.
href
target
ping
rel
media
hreflang
type
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:
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.
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 a element must not be empty.
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.
q elementStrictly inline-level content.
cite
q element uses the HTMLQuoteElement interface.
The q element represents a part of a
paragraph quoted from another source.
Content inside a q element 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 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 citation given by
that cite element gives the source of
the quotation contained in the q element.
cite elementStrictly inline-level content.
HTMLElement.The cite element represents a
citation: the source, or reference, for a quote or statement made in the
document.
A citation is not a quote (for which the
q element is appropriate).
This is incorrect usage:
<p><cite>This is wrong!</cite>, said Ian.</p>
This is the correct way to do it:
<p><q>This is correct!</q>, said <cite>Ian</cite>.</p>
This is also wrong, because the title and the name are not references or citations:
<p>My favourite book is <cite>The Reality Dysfunction</cite> by <cite>Peter F. Hamilton</cite>.</p>
This is correct, because even though the source is not quoted, it is cited:
<p>According to <cite>the Wikipedia article on HTML</cite>, HTML is defined in formal specifications that were developed and published throughout the 1990s.</p>
The cite element can apply
to blockquote and q elements in certain cases described in the
definitions of those elements.
em elementStrictly inline-level content.
HTMLElement.
The em element represents stress emphasis
of its contents.
The level of emphasis that a particlar 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 emphasising 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 emphasise the last word:
<p>Cats are cute <em>animals</em>.</p>
By emphasising 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 emphasising the cuteness could lead to markup such as:
<p><em>Cats are <em>cute</em> animals!</em></p>
strong elementStrictly inline-level content.
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>
small elementStrictly inline-level content.
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-emphasise" 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>
m elementStrictly inline-level content.
HTMLElement.
This section has a large number of outstanding comments and will likely be rewritten or removed from the spec.
The m element represents a run of text
marked or highlighted.
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 := <m>1.1</m>; end.</code></pre>
Another example of the m 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 <m>kitten</m>s who are visiting me these days. They're really cute. I think they like my garden!</p>
dfn elementStrictly inline-level content.
dfn
elements.
dfn elements.
title attribute has special semantics on this
element.
HTMLElement.
The dfn element represents the defining
instance of a term. The paragraph, description list group, or section that contains the dfn element contains the definition for the term
given by the contents of the dfn element.
dfn elements must not be nested.
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 only contain the term being defined.
There must only be one dfn element per
document for each term defined (i.e. there must not be any duplicate terms).
The title
attribute of ancestor elements does not affect dfn elements.
The dfn element enables automatic
cross-references. Specifically, any span,
abbr, code, var,
samp, or i
element that has a non-empty title attribute whose value exactly equals the term of a dfn element in the same document, or which has no
title attribute but
whose textContent exactly equals
the term of a dfn element in the document, and that has no interactive elements or dfn elements either as ancestors or descendants,
and has no other elements as ancestors that are themselves matching these
conditions, should be presented in such a way that the user can jump from
the element to the first dfn element
giving the defining instance of that term.
In the following fragment, the term "GDO" is first defined in the first
paragraph, then used in the second. A compliant UA could provide a link
from the abbr element in the second
paragraph to the dfn element in the
first.
<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>
abbr elementStrictly inline-level content.
title attribute has special semantics on this
element.
HTMLElement.
The abbr element represents an
abbreviation or acronym. The title attribute should be used to
provide an expansion of the abbreviation. If present, the attribute must
only contain an expansion of the abbreviation.
The paragraph below contains an abbreviation marked up with the
abbr element.
<p>The <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr> 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>
The title
attribute may be omitted if there is a dfn
element in the document whose defining term is the
abbreviation (the textContent of
the abbr element).
In the example below, the word "Zat" is used as an abbreviation in the
second paragraph. The abbreviation is defined in the first, so the
explanatory title attribute has been omitted. Because of
the way dfn elements are defined, the
second abbr element in this example
would be connected (in some UA-specific way) to the first.
<p>The <dfn><abbr>Zat</abbr></dfn>, short for Zat'ni'catel, is a weapon.</p> <p>Jack used a <abbr>Zat</abbr> to make the boxes of evidence disappear.</p>
time elementStrictly inline-level content.
datetime
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:
datetime attribute is present, then parse it
according to the rules for parsing date or time strings in content, and let
the result be result.
textContent according to the rules for
parsing date or time strings in content, and let the result be
result.
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.
progress elementStrictly inline-level content.
value
max
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 simply 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><label>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.
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:
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.
max
attribute is included, then, if a value could be parsed out of it, then
the maximum value is that value.
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.
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.
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.
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.
textContent of the element.
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.
meter elementStrictly inline-level content.
value
min
low
high
max
optimum
interface HTMLMeterElement : HTMLElement {
attribute long value;
attribute long min;
attribute long max;
attribute long low;
attribute long high;
attribute long optimum;
};
The meter element represents a scalar
measurement within a known range, or a fractional value; for example disk
usage, the relevance of a query result, or the fraction of a voting
population to have selected a particular candidate.
This is also known as a gauge.
The meter element should
not be used to indicate progress (as in a progress bar). For that role,
HTML provides a separate progress
element.
The meter element also does
not represent a scalar value of arbitrary range — for example, it
would be wrong to use this to report a weight, or height, unless there is
a known maximum value.
There are six attributes that determine the semantics of the gauge represented by the element.
The min attribute
specifies the lower bound of the range, and the max attribute specifies the upper
bound. The value
attribute specifies the value to have the gauge indicate as the "measured"
value.
The other three attributes can be used to segment the gauge's range into
"low", "medium", and "high" parts, and to indicate which part of the gauge
is the "optimum" part. The low attribute specifies the range
that is considered to be the "low" part, and the high attribute specifies the
range that is considered to be the "high" part. The optimum attribute gives the
position that is "optimum"; if that is higher than the "high" value then
this indicates that the higher the value, the better; if it's lower than
the "low" mark then it indicates that lower values are better, and
naturally if it is in between then it indicates that neither high nor low
values are good.
Authoring requirements: The recommended way of giving the value is to include it as contents of the element, either as two numbers (the higher number represents the maximum, the other number the current value), or as a percentage or similar (using one of the characters such as "%"), or as a fraction.
The value,
min, low, high, max, and optimum attributes
are all optional. When present, they must have values that are valid floating point
numbers.
The following examples all represent a measurement of three quarters (of the maximum of whatever is being measured):
<meter>75%</meter> <meter>750‰</meter> <meter>3/4</meter> <meter>6 blocks used (out of 8 total)</meter> <meter>max: 100; current: 75</meter> <meter><object data="graph75.png">0.75</object></meter> <meter min="0" max="100" value="75"></meter>
The following example is incorrect use of the element, because it doesn't give a range (and since the default maximum is 1, both of the gauges would end up looking maxed out):
<p>The grapefruit pie had a radius of <meter>12cm</meter> and a height of <meter>2cm</meter>.</p> <!-- BAD! -->
Instead, one would either not include the meter element, or use the meter element with a defined range to give the dimensions in context compared to other pies:
<p>The grapefruit pie had a radius of 12cm and a height of 2cm.</p> <dl> <dt>Radius: <dd> <meter min=0 max=20 value=12>12cm</meter> <dt>Height: <dd> <meter min=0 max=10 value=2>2cm</meter> </dl>
There is no explicit way to specify units in the meter element, but the units may be specified in
the title attribute in
freeform text.
The example above could be extended to mention the units:
<dl> <dt>Radius: <dd> <meter min=0 max=20 value=12 title="centimeters">12cm</meter> <dt>Height: <dd> <meter min=0 max=10 value=2 title="centimeters">2cm</meter> </dl>
User agent requirements: User agents must parse the
min, max, value, low, high, and optimum attributes
using the rules for parsing floating point number
values.
If the value
attribute has been omitted, the user agent must also process the textContent of the element according to 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.
User agents must then use all these numbers to obtain values for six points on the gauge, as follows. (The order in which these are evaluated is important, as some of the values refer to earlier ones.)
If the min
attribute is specified and a value could be parsed out of it, then the
minimum value is that value. Otherwise, the minimum value is zero.
If the max
attribute is specified and a value could be parsed out of it, the
maximum value is that value.
Otherwise, if the max attribute is specified but no value could be
parsed out of it, or if it was not specified, but either or both of the
min or value attributes
were specified, then the maximum value is 1.
Otherwise, none of the max, min, and value attributes were specified. If the result
of processing the textContent of
the element was either nothing or just one number with no denominator
punctuation character, then the maximum value is 1; if the result was
one number but it had an associated denominator punctuation character,
then the maximum value is the value associated
with that denominator punctuation character; and finally, if there
were two numbers parsed out of the textContent, then the maximum is the
higher of those two numbers.
If the above machinations result in a maximum value less than the minimum value, then the maximum value is actually the same as the minimum value.
If the value
attribute is specified and a value could be parsed out of it, then that
value is the actual value.
If the value
attribute is not specified but the max attribute is specified and the
result of processing the textContent of the element was one number
with no associated denominator punctuation character, then that number
is the actual value.
If neither of the value and max attributes are specified, then, if the
result of processing the textContent of the element was one number
(with or without an associated denominator punctuation character), then
that is the actual value, and if the result of processing the textContent of the element was two
numbers, then the actual value is the lower of the two numbers found.
Otherwise, if none of the above apply, the actual value is zero.
If the above procedure results in an actual value less than the minimum value, then the actual value is actually the same as the minimum value.
If, on the other hand, the result is an actual value greater than the maximum value, then the actual value is the maximum value.
If the low
attribute is specified and a value could be parsed out of it, then the
low boundary is that value. Otherwise, the low boundary is the same as
the minimum value.
If the above results in a low boundary that is less than the minimum value, the low boundary is the minimum value.
If the high
attribute is specified and a value could be parsed out of it, then the
high boundary is that value. Otherwise, the high boundary is the same as
the maximum value.
If the above results in a high boundary that is higher than the maximum value, the high boundary is the maximum value.
If the optimum attribute is specified and a value
could be parsed out of it, then the optimum point is that value.
Otherwise, the optimum point is the midpoint between the minimum value
and the maximum value.
If the optimum point is then less than the minimum value, then the optimum point is actually the same as the minimum value. Similarly, if the optimum point is greater than the maximum value, then it is actually the maximum value instead.
All of which should result in the following inequalities all being true:
UA requirements for regions of the gauge: If the optimum point is equal to the low boundary or the high boundary, or anywhere in between them, then the region between the low and high boundaries of the gauge must be treated as the optimum region, and the low and high parts, if any, must be treated as suboptimal. Otherwise, if the optimum point is less than the low boundary, then the region between the minimum value and the low boundary must be treated as the optimum region, the region between the low boundary and the high boundary must be treated as a suboptimal region, and the region between the high boundary and the maximum value must be treated as an even less good region. Finally, if the optimum point is higher than the high boundary, then the situation is reversed; the region between the high boundary and the maximum value must be treated as the optimum region, the region between the high boundary and the low boundary must be treated as a suboptimal region, and the remaining region between the low boundary and the minimum value must be treated as an even less good region.
UA requirements for showing the gauge: When
representing a meter element to the
user, the UA should indicate the relative position of the actual value to
the minimum and maximum values, and the relationship between the actual
value and the three regions of the gauge.
The following markup:
<h3>Suggested groups</h3>
<menu type="toolbar">
<a href="?cmd=hsg" onclick="hideSuggestedGroups()">Hide suggested groups</a>
</menu>
<ul>
<li>
<p><a href="/group/comp.infosystems.www.authoring.stylesheets/view">comp.infosystems.www.authoring.stylesheets</a> -
<a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe">join</a></p>
<p>Group description: <strong>Layout/presentation on the WWW.</strong></p>
<p><meter value="0.5">Moderate activity,</meter> Usenet, 618 subscribers</p>
</li>
<li>
<p><a href="/group/netscape.public.mozilla.xpinstall/view">netscape.public.mozilla.xpinstall</a> -
<a href="/group/netscape.public.mozilla.xpinstall/subscribe">join</a></p>
<p>Group description: <strong>Mozilla XPInstall discussion.</strong></p>
<p><meter value="0.25">Low activity,</meter> Usenet, 22 subscribers</p>
</li>
<li>
<p><a href="/group/mozilla.dev.general/view">mozilla.dev.general</a> -
<a href="/group/mozilla.dev.general/subscribe">join</a></p>
<p><meter value="0.25">Low activity,</meter> Usenet, 66 subscribers</p>
</li>
</ul>
Might be rendered as follows:
User agents may combine the value of the title attribute and the other attributes to
provide context-sensitive help or inline text detailing the actual values.
For example, the following snippet:
<meter min=0 max=60 value=23.2 title=seconds></meter>
...might cause the user agent to display a gauge with a tooltip saying "Value: 23.2 out of 60." on one line and "seconds" on a second line.
The min, max, value, low, high, and optimum 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...
code elementStrictly inline-level content.
title
attribute has special semantics on this element when used with the
dfn element.
HTMLElement.
The code element represents a fragment
of computer code. This could be an XML element name, a filename, a
computer program, or any other string that a computer would recognise.
See the pre element for more
detais.
The following example shows how a block of code could be marked up
using the pre and code elements.
<pre><code>var i: Integer; begin i := 1; end.</code></pre>
var elementStrictly inline-level content.
title
attribute has special semantics on this element when used with the
dfn element.
HTMLElement.
The var element represents a variable.
This could be an actual variable in a mathematical expression or
programming context, or it could just be a term used as a placeholder in
prose.
In the paragraph below, the letter "n" is being used as a variable in prose:
<p>If there are <var>n</var> pipes leading to the ice cream factory then I expect at <em>least</em> <var>n</var> flavours of ice cream to be available for purchase!</p>
samp elementStrictly inline-level content.
title
attribute has special semantics on this element when used with the
dfn element.
HTMLElement.
The samp element represents (sample)
output from a program or computing system.
See the pre and kbd elements for more detais.
This example shows the samp element
being used inline:
<p>The computer said <samp>Too much cheese in tray two</samp> but I didn't know what that meant.</p>
This second example shows a block of sample output. Nested samp and kbd
elements allow for the styling of specific elements of the sample output
using a style sheet.
<pre><samp><samp class="prompt">jdoe@mowmow:~$</samp> <kbd>ssh demo.example.com</kbd> Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1 Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown <samp class="prompt">jdoe@demo:~$</samp> <samp class="cursor">_</samp></samp></pre>
kbd elementStrictly inline-level content.
HTMLElement.
The kbd element represents user input
(typically keyboard input, although it may also be used to represent other
input, such as voice commands).
When the kbd element is nested inside a
samp element, it represents the input as
it was echoed by the system.
When the kbd element contains a
samp element, it represents input based
on system output, for example invoking a menu item.
When the kbd element is nested inside
another kbd element, it represents an
actual key or other single unit of input as appropriate for the input
mechanism.
Here the kbd element is used to
indicate keys to press:
<p>To make George eat an apple, press <kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd></p>
In this second example, the user is told to pick a particular menu
item. The outer kbd element marks up a
block of input, with the inner kbd
elements representing each individual step of the input, and the samp elements inside them indicating that the
steps are input based on something being displayed by the system, in this
case menu labels:
<p>To make George eat an apple, select
<kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd>
</p>
sup and sub
elementsStrictly inline-level content.
HTMLElement.
The sup element represents a superscript
and the sub element represents a
subscript.
These elements must only be used to mark up typographical conventions
with specific meanings, not for typographical presentation for
presentation's sake. For example, it would be inappropriate for the
sup and sub elements to be used in the name of the LaTeX
document preparation system. In general, authors should not use these
elements if the absence of those elements would not change the
meaning of the content.
When the sub element is used inside a
var element, it represents the subscript
that identifies the variable in a family of variables.
<p>The coordinate of the <var>i</var>th point is (<var>x<sub><var>i</var></sub></var>, <var>y<sub><var>i</var></sub></var>). For example, the 10th point has coordinate (<var>x<sub>10</sub></var>, <var>y<sub>10</sub></var>).</p>
In certain languages, superscripts are part of the typographical conventions for some abbreviations.
<p>The most beautiful women are <span lang="fr"><abbr>M<sup>lle</sup></abbr> Gwendoline</span> and <span lang="fr"><abbr>M<sup>me</sup></abbr> Denise</span>.</p>
Mathematical expressions often use subscripts and superscripts.
<var>E</var>=<var>m</var><var>c</var><sup>2</sup>
f(<var>x</var>, <var>n</var>) = log<sub>4</sub><var>x</var><sup><var>n</var></sup>
span elementStrictly inline-level content.
title
attribute has special semantics on this element when used with the
dfn element.
HTMLElement.
The span element doesn't mean anything
on its own, but can be useful when used together with other attributes,
e.g. class, lang, or dir, or when used in conjunction
with the dfn element.
i elementStrictly inline-level content.
title
attribute has special semantics on this element when used with the
dfn element.
HTMLElement.
The i element represents a span of text in
an alternate voice or mood, or otherwise offset from the normal prose,
such as a taxonomic designation, a technical term, an idiomatic phrase
from another language, a thought, a ship name, or some other prose whose
typical typographic presentation is italicized.
Terms in languages different from the main text should be annotated with
lang attributes (xml:lang in XML).
The examples below show uses of the i
element:
<p>The <i>felis silvestris catus</i> is cute.</p> <p>The <i>block-level elements</i> are defined above.</p> <p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>
In the following example, a dream sequence is marked up using i elements.
<p>Raymond tried to sleep.</p> <p><i>The ship sailed away on Thursday</i>, he dreamt. <i>The ship had many people aboard, including a beautiful princess called Carey. He watched her, day-in, day-out, hoping she would notice him, but she never did.</i></p> <p><i>Finally one night he picked up the courage to speak with her—</i></p> <p>Raymond woke with a start as the fire alarm rang out.</p>
The i element should be used as a last
resort when no other element is more appropriate. In particular, citations
should use the cite element, defining
instances of terms should use the dfn
element, stress emphasis should use the em
element, importance should be denoted with the strong element, quotes should be marked up with
the q element, and small print should use
the small element.
Style sheets can be used to format i elements, just like any other element can be
restyled. Thus, it is not the case that content in i elements will necessarily be italicised.
b elementStrictly inline-level content.
HTMLElement.
The b element represents a span of text to
be stylistically offset from the normal prose without conveying any extra
importance, such as key words in a document abstract, product names in a
review, or other spans of text whose typical typographic presentation is
boldened.
The following example shows a use of the b element to highlight key words without marking
them up as important:
<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>
The following would be incorrect usage:
<p><b>WARNING!</b> Do not frob the barbinator!</p>
In the previous example, the correct element to use would have been
strong, not b.
In the following example, objects in a text adventure are highlighted
as being special by use of the b element.
<p>You enter a small room. Your <b>sword</b> glows brighter. A <b>rat</b> scurries past the corner wall.</p>
The b element should be used as a last
resort when no other element is more appropriate. In particular, headers
should use the h1 to h6 elements, stress emphasis should use the em element, importance should be denoted with the
strong element, and text marked or
highlighted should use the m element.
Style sheets can be used to format b elements, just like any other element can be
restyled. Thus, it is not the case that content in b elements will necessarily be boldened.
bdo elementStrictly inline-level content.
dir
global attribute is required on this element.
HTMLElement.
The bdo element allows authors to
override the Unicode bidi algorithm by explicitly specifying a direction
override. [BIDI]
Authors must specify the dir attribute on this element, with the value
ltr to specify a left-to-right override and with the value
rtl to specify a right-to-left override.
If the element has the dir attribute set to the exact value
ltr, then for the purposes of the bidi algorithm, the user
agent must act as if there was a U+202D LEFT-TO-RIGHT OVERRIDE character
at the start of the element, and a U+202C POP DIRECTIONAL FORMATTING at
the end of the element.
If the element has the dir attribute set to the exact value
rtl, then for the purposes of the bidi algorithm, the user
agent must act as if there was a U+202E RIGHT-TO-LEFT OVERRIDE character
at the start of the element, and a U+202C POP DIRECTIONAL FORMATTING at
the end of the element.
The requirements on handling the bdo
element for the bidi algorithm may be implemented indirectly through the
style layer. For example, an HTML+CSS user agent should implement these
requirements by implementing the CSS unicode-bidi property.
[CSS21]