Living Standard — Last Updated 30 May 2023
a elementem elementstrong elementsmall elements elementcite elementq elementdfn elementabbr elementruby elementrt elementrp elementdata elementtime elementcode elementvar elementsamp elementkbd elementsub and sup elementsi elementb elementu elementmark elementbdi elementbdo elementspan elementbr elementwbr elementa elementSupport in all current engines.
Support in all current engines.
href attribute: Interactive content.a element descendant, or descendant with the tabindex attribute specified.href — Address of the hyperlinktarget — Navigable for hyperlink navigationdownload — Whether to download the resource instead of navigating to it, and its filename if soping — URLs to pingrel — Relationship between the location in the document containing the hyperlink and the destination resourcehreflang — Language of the linked resourcetype — Hint for the type of the referenced resourcereferrerpolicy — Referrer policy for fetches initiated by the elementhref attribute: for authors; for implementers.[Exposed =Window ]
interface HTMLAnchorElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute DOMString target ;
[CEReactions ] attribute DOMString download ;
[CEReactions ] attribute USVString ping ;
[CEReactions ] attribute DOMString rel ;
[SameObject , PutForwards =value ] readonly attribute DOMTokenList relList ;
[CEReactions ] attribute DOMString hreflang ;
[CEReactions ] attribute DOMString type ;
[CEReactions ] attribute DOMString text ;
[CEReactions ] attribute DOMString referrerPolicy ;
// also has obsolete members
};
HTMLAnchorElement includes HTMLHyperlinkElementUtils ;If the a element has an href attribute,
then it represents a hyperlink (a hypertext anchor) labeled by its
contents.
If the a element has no href attribute,
then the element represents a placeholder for where a link might otherwise have been
placed, if it had been relevant, consisting of just the element's contents.
The target, download, ping,
rel, hreflang, type,
and referrerpolicy attributes must be omitted
if the href attribute is not present.
If the itemprop attribute is specified on an a element,
then the href attribute must also be specified.
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 > The href, target, download, ping,
and referrerpolicy attributes affect what
happens when users follow hyperlinks or download hyperlinks created using the a
element. The rel, 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 an a element element given an
event event is:
If element has no href attribute,
then return.
Let hyperlinkSuffix be null.
If event's target is an
img with an ismap attribute specified,
then:
Let x and y be 0.
If event's If x is negative, set x to 0. If y is negative, set y to 0. Set hyperlinkSuffix to the concatenation of U+003F (?), the value of
x expressed as a base-ten integer using ASCII digits, U+002C (,), and
the value of y expressed as a base-ten integer using ASCII
digits.x to the distance in CSS
pixels from the left edge of the image to the location of the click, and set
y to the distance in CSS pixels from the top edge of the
image to the location of the click.
If element has a download
attribute, or if the user has expressed a preference to download the hyperlink, then download the hyperlink created by element given
hyperlinkSuffix.
Otherwise, follow the hyperlink created by element given hyperlinkSuffix.
a.textSame as Support in all current engines. Support in all current engines. The IDL attributes Support in all current engines. The IDL attribute HTMLAnchorElement/referrerPolicy Support in all current engines. The IDL attribute The The The The following example shows how a bit of script can be used to effectively make an entire row
in a job listing table a hyperlink: Support in all current engines. The The level of stress that a particular piece of content has is given by its number of ancestor
The placement of stress emphasis changes the meaning of the sentence. The element thus forms an
integral part of the content. The precise way in which stress is used in this way depends on the
language. These examples show how changing the stress emphasis changes the meaning. First, a general
statement of fact, with no stress: By emphasizing the first word, the statement implies that the kind of animal under discussion
is in question (maybe someone is asserting that dogs are cute): Moving the stress to the verb, one highlights that the truth of the entire sentence is in
question (maybe someone is saying cats are not cute): By moving it to the adjective, the exact nature of the cats is reasserted (maybe someone
suggested cats were mean animals): Similarly, if someone asserted that cats were vegetables, someone correcting this might
emphasize the last word: By emphasizing the entire sentence, it becomes clear that the speaker is fighting hard to get
the point across. This kind of stress emphasis also typically affects the punctuation, hence the
exclamation mark here. Anger mixed with emphasizing the cuteness could lead to markup such as: The The Support in all current engines. The Importance: the For example, the first word of the previous paragraph is marked up with
Seriousness: the Urgency: the The relative level of importance of a piece of content is given by its number of ancestor
Changing the importance of a piece of text with the Here, the word "chapter" and the actual chapter number are mere boilerplate, and the actual
name of the chapter is marked up with In the following example, the name of the diagram in the caption is marked up with
In this example, the heading is really "Flowers, Bees, and Honey", but the author has added a
light-hearted addition to the heading. The Here is an example of a warning notice in a game, with the
various parts marked up according to how important they are: In this example, the Support in all current engines. The Small print typically features disclaimers, caveats, legal restrictions, or
copyrights. Small print is also sometimes used for attribution, or for satisfying licensing
requirements. The The The In this example, the In this second example, the This is distinct from a sidebar, which might be multiple paragraphs long and is removed from
the main flow of text. In the following example, we see a sidebar from the same article. This
sidebar also has small print, indicating the source of the information in the sidebar. In this last example, the Support in all current engines. The The In this example a recommended retail price has been marked as no longer relevant as the
product in question has a new sale price. Support in all current engines. The A person's name is not the title of a work — even if people call that person a piece of
work — and the element must therefore not be used to mark up people's names. (In some cases,
the This next example shows a typical use of the This is correct usage: The following, however, is incorrect usage, as the The A citation is not a quote (for which the This is incorrect usage, because This is also incorrect usage, because a person is not a work: The correct usage does not use a As mentioned above, the Support in all current engines. The Quotation punctuation (such as quotation marks) that is quoting the contents of the element
must not appear immediately before, after, or inside Content inside a If the The The use of Here is a simple example of the use of the Here is an example with both an explicit citation link in the In the following example, the quotation itself contains a quotation: In the following example, quotation marks are used instead of the In the following example, there is no quote — the quotation marks are used to name a
word. Use of the Support in all current engines. The Defining term: if the If the The An In the following fragment, the term "Garage Door Opener" is first defined in the first
paragraph, then used in the second. In both cases, its abbreviation is what is actually
displayed. With the addition of an Support in all current engines. The The paragraph below contains an abbreviation marked up with the An alternative way to write this would be: This paragraph has two abbreviations. Notice how only one is defined; the other, with no
expansion associated with it, does not use the This paragraph links an abbreviation to its definition. This paragraph marks up an abbreviation without giving an expansion, possibly as a hook to
apply styles for abbreviations (e.g. smallcaps). If an abbreviation is pluralized, the expansion's grammatical number (plural vs singular) must
match the grammatical number of the contents of the element. Here the plural is outside the element, so the expansion is in the singular: Here the plural is inside the element, so the expansion is in the plural: Abbreviations do not have to be marked up using this element. It is expected to be useful in
the following cases: Providing an expansion in a Support in all current engines. The The content model of The At the time of writing, CSS does not yet provide a way to fully control the
rendering of the HTML One or more hiragana or katakana characters (the ruby annotation) are placed with each
ideographic character (the base text). This is used to provide readings of kanji characters.
In this example, notice how each annotation corresponds to a single base character.
君子は和して同ぜず。
This example can also be written as follows, using one This is similar to the previous case: each ideographic character in the compound word (the
base text) has its reading given in hiragana or katakana characters (the ruby annotation). The
difference is that the base text segments form a compound word rather than being separate from
each other.
In this example, notice again how each annotation corresponds to a single base character. In this example, each compound word (jukugo) corresponds to a single The rendering here is expected to be that each annotation be placed over (or next to, in vertical text) the corresponding base character, with the annotations not overhanging any of the adjacent characters. 鬼門の方角を凝視する
This is semantically identical to the previous case (each individual ideographic character in
the base compound word has its reading given in an annotation in hiragana or katakana
characters), but the rendering is the more complicated Jukugo Ruby rendering.
This is the same example as above for mono-ruby for compound words. The different rendering is expected to be achieved using different styling (e.g. in CSS), and is not shown here. For more details on Jukugo Ruby rendering, see
Appendix F in the Requirements for Japanese Text Layout. [JLREQ] The annotation describes the meaning of the base text, rather than (or in addition to) the
pronunciation. As such, both the base text and the annotation can be multiple characters long.
Here a compound ideographic word has its corresponding katakana given as an annotation.
境界面
Here a compound ideographic word has its translation in English provided as an annotation.
編集者
A phonetic reading that corresponds to multiple base characters, because a one-to-one mapping
would be difficult. (In English, the words "Colonel" and "Lieutenant" are examples of words
where a direct mapping of pronunciation to individual letters is, in some dialects, rather
unclear.)
In this example, the name of a species of flowers has a phonetic reading provided using group ruby:
紫陽花
Sometimes, ruby styles described above are combined.
If this results in two annotations covering the same single base segment, then the
annotations can just be placed back to back.
In this contrived example, some symbols are given names in English and French.
In more complicated situations such as the following examples, a nested Here both a phonetic reading and the meaning are given in ruby annotations. The annotation on the nested 東南の方角
This is the same example, but the meaning is given in English instead of Japanese:
東南の方角
Within a At any particular time, the segmentation and categorization of content of a Let base text segments be an empty list of base text segments, each
potentially with a list of base text subsegments. Let annotation segments be an empty list of annotation segments, each
potentially being associated with a base text segment or subsegment. Let root be the If root has a Let current parent be root. Let index be 0. Let start index be null. Let parent start index be null. Let current base text be null. Start mode: If index is equal to or greater than the number of
child nodes in current parent, then jump to the step labeled end
mode. If the indexth node in current parent is an
Set start index to the value of index. Base mode: If the indexth node in current
parent is a If the indexth node in current parent is an
Increment index by one. Base mode post-increment: If index is equal to or greater than
the number of child nodes in current parent, then jump to the step labeled
end mode. Jump back to the step labeled base mode. Annotation mode: If the indexth node in current
parent is an If the indexth node in current parent is an
If the indexth node in current parent is not a
Annotation mode increment: Let lookahead index be index plus one. Annotation mode white-space skipper: If lookahead index is
equal to the number of child nodes in current parent then jump to the step
labeled end mode. If the lookahead indexth node in current parent is
an If the lookahead indexth node in current parent is
not a Increment lookahead index by one. Jump to the step labeled annotation mode white-space skipper. End mode: If current parent is not the same element as root, then pop a ruby level and jump to the step labeled base mode
post-increment. End: Return base text segments and annotation
segments. Any content of the When the steps above say to set the current base text, it means to run the following
steps at that point in the algorithm: Let text range be a DOM range whose start is the boundary
point (current parent, start index) and whose
end is the boundary
point (current parent, index). Let new text segment be a base text segment described by the range
annotation range. Add new text segment to base text
segments. Let current base text be new text
segment. Let start index be null. When the steps above say to push a ruby level, it means to run the following steps
at that point in the algorithm: Let current parent be the indexth node in current parent. Let index be 0. Set saved start index to the value of start
index. Let start index be null. When the steps above say to pop a ruby level, it means to run the following steps at
that point in the algorithm: Let index be the position of current parent in
root. Let current parent be root. Increment index by one. Set start index to the value of saved start
index. Let saved start index be null. When the steps above say to push a ruby annotation, it means to run the following
steps at that point in the algorithm: Let rt be the Let annotation range be a DOM range whose start is the boundary
point (current parent, index) and whose end is the boundary point
(current parent, index plus one) (i.e. that contains only
rt). Let new annotation segment be an annotation segment described by the
range annotation range. If current base text is not null, associate new
annotation segment with current base text. Add new annotation segment to annotation
segments. In this example, each ideograph in the Japanese text 漢字 is annotated with its reading in hiragana. This might be rendered as: In this example, each ideograph in the traditional Chinese text 漢字 is annotated with its bopomofo reading. This might be rendered as: In this example, each ideograph in the simplified Chinese text 汉字 is annotated with its pinyin reading. This might be rendered as: In this more contrived example, the acronym "HTML" has four annotations: one for the whole
acronym, briefly describing what it is, one for the letters "HT" expanding them to "Hypertext",
one for the letter "M" expanding it to "Markup", and one for the letter "L" expanding it to
"Language". Support in all current engines. The An Support in all current engines. The An The example above, in which each ideograph in the text 漢字 is annotated with its phonetic reading, could be expanded to
use In conforming user agents the rendering would be as above, but in user agents that do not
support ruby, the rendering would be: When there are multiple annotations for a segment, This would make the example render as follows in non-ruby-capable user agents:
Support in all current engines. Support in all current engines. The The When the value is date- or time-related, the more specific The element can be used for several purposes. When combined with microformats or the microdata attributes defined in
this specification, the element serves to provide both a machine-readable value for the purposes
of data processors, and a human-readable value for the purposes of rendering in a web browser. In
this case, the format to be used in the The element can also, however, be used in conjunction with scripts in the page, for when a
script has a literal value to store alongside a human-readable value. In such cases, the format to
be used depends only on the needs of the script. (The Support in all current engines. The Here, a short table has its numeric values encoded using the Support in all current engines. Support in all current engines. The The A The datetime value of a The datetime value of a Times with dates but without a time zone offset are useful for specifying events
that are observed at the same specific time in each time zone, throughout a day. For example,
the 2020 new year is celebrated at 2020-01-01 00:00 in each time zone, not at the same precise
moment across all time zones. For events that occur at the same time across all time zones, for
example a videoconference meeting, a valid global date and time string is likely
more useful. For times without dates (or times referring to events that recur on multiple
dates), specifying the geographic location that controls the time is usually more useful than
specifying a time zone offset, because geographic locations change time zone offsets with
daylight saving time. In some cases, geographic locations even change time zone, e.g. when the
boundaries of those time zones are redrawn, as happened with Samoa at the end of 2011. There
exists a time zone database that describes the boundaries of time zones and what rules apply
within each such zone, known as the time zone database. [TZDATABASE] Times with dates and a time zone offset are useful for specifying specific
events, or recurring virtual events where the time is not anchored to a specific geographic
location. For example, the precise time of an asteroid impact, or a particular meeting in a
series of meetings held at 1400 UTC every day, regardless of whether any particular part of the
world is observing daylight saving time or not. For events where the precise time varies by the
local time zone offset of a specific geographic location, a valid local date and time
string combined with that geographic location is likely more useful. The machine-readable equivalent of the element's contents must be obtained from the
element's datetime value by using the following algorithm: If parsing a month string from the element's
datetime value returns a month, that is the
machine-readable equivalent; return. If parsing a date string from the element's
datetime value returns a date, that is the
machine-readable equivalent; return. If parsing a yearless date string from
the element's datetime value returns a yearless
date, that is the machine-readable equivalent; return. If parsing a time string from the element's
datetime value returns a time, that is the
machine-readable equivalent; return. If parsing a local date and time
string from the element's datetime value returns a local date and time, that is the machine-readable
equivalent; return. If parsing a time-zone offset string
from the element's datetime value returns a time-zone
offset, that is the machine-readable equivalent; return. If parsing a global date and time
string from the element's datetime value returns a global date and time, that is the machine-readable equivalent;
return. If parsing a week string from the element's
datetime value returns a week, that is the
machine-readable equivalent; return. If the element's datetime value consists of only ASCII digits,
at least one of which is not U+0030 DIGIT ZERO (0), then the machine-readable equivalent is the
base-ten interpretation of those digits, representing a year; return. If parsing a duration string from the
element's datetime value returns a duration,
that is the machine-readable equivalent; return. There is no machine-readable equivalent. The algorithms referenced above are intended to be designed such that for any
arbitrary string s, only one of the algorithms returns a value. A more
efficient approach might be to create a single algorithm that parses all these data types in one
pass; developing such an algorithm is left as an exercise to the reader. Support in all current engines. The The Here, a fictional microdata vocabulary based on the Atom vocabulary is used with the
In this example, another article's publication date is marked up using In the following snippet, the In this second snippet, the value includes a time: A script loaded by the page (and thus privy to the page's internal convention of marking up
dates and times using the For example, this element conveys the string "Friday" with the additional semantic that the
18th of November 2011 is the meaning that corresponds to "Friday": In this example, a specific time in the Pacific Standard Time timezone is specified: Support in all current engines. The There is no formal way to indicate the language of computer code being marked up. Authors who
wish to mark The following example shows how the element can be used in a paragraph to mark up element
names and computer code, including punctuation. The following example shows how a block of code could be marked up using the A class is used in that example to indicate the language used. See the Support in all current engines. The In the paragraph below, the letter "n" is being used as a
variable in prose: For mathematics, in particular for anything beyond the simplest of expressions, MathML is more
appropriate. However, the In this example, an equation is shown, with a legend that references the variables in the
equation. The expression itself is marked up with MathML, but the variables are mentioned in the
figure's legend using Here, the equation describing mass-energy equivalence is used in a sentence, and the
Support in all current engines. The See the This element can be contrasted with the This example shows the This second example shows a block of sample output from a console program. Nested
This third example shows a block of input and its respective output. The example uses
both Support in all current engines. The When the When the When the Here the In this second example, the user is told to pick a particular menu item. The outer
Such precision isn't necessary; the following is equally fine: Support in all current engines. Support in all current engines. The These elements must be used only to mark up typographical conventions with specific meanings,
not for typographical presentation for presentation's sake. For example, it would be inappropriate
for the In certain languages, superscripts are part of the typographical conventions for some
abbreviations. The Here, the Mathematical expressions often use subscripts and superscripts. Authors are encouraged to use
MathML for marking up mathematics, but authors may opt to use Support in all current engines. The Terms in languages different from the main text should be annotated with The examples below show uses of the In the following example, a dream sequence is marked up using
Authors can use the Authors are encouraged to consider whether other elements might be more applicable than the
Style sheets can be used to format Support in all current engines. The The following example shows a use of the In the following example, objects in a text adventure are highlighted as being special by use
of the Another case where the As with the The The following would be incorrect usage: In the previous example, the correct element to use would have been Style sheets can be used to format Support in all current engines. The In most cases, another element is likely to be more appropriate: for marking stress emphasis,
the The default rendering of the In this example, a Support in all current engines. The This example shows how the (If the goal was to mark the element as misspelt, however, the Another example of the In the following snippet, a paragraph of text refers to a specific part of a code
fragment. This is separate from syntax highlighting, for which This is another example showing the use of Note, incidentally, the distinction between the The following example shows the difference between denoting the importance of a span
of text ( Support in all current engines. The The This element has rendering requirements involving the
bidirectional algorithm. This element is especially useful when embedding user-generated content with an unknown
directionality. In this example, usernames are shown along with the number of posts that the user has
submitted. If the Support in all current engines. The Authors must specify the This element has rendering requirements involving the
bidirectional algorithm. Support in all current engines. Support in all current engines. The In this example, a code fragment is marked up using Support in all current engines. Support in all current engines. The While line breaks are usually represented in visual media by physically moving
subsequent text to a new line, a style sheet or user agent would be equally justified in causing
line breaks to be rendered in a different manner, for instance as green dots, or as extra
spacing. The following example is correct usage of the The following examples are non-conforming, as they abuse the Here are alternatives to the above, which are correct: If a paragraph consists of nothing but a single Any content inside This element has rendering requirements involving the
bidirectional algorithm. Support in all current engines. The In the following example, someone is quoted as saying something which, for effect, is written
as one long word. However, to ensure that the text can be wrapped in a readable fashion, the
individual words in the quote are separated using a Any content inside This element has rendering requirements involving the
bidirectional algorithm. This section is non-normative.Firefox20+Safari10.1+Chrome15+
Opera?Edge79+
Edge (Legacy)13+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+download, ping, target, rel, hreflang, and type, must reflect the respective content attributes
of the same name.Firefox30+Safari9+Chrome65+
Opera?Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?relList must reflect the rel content attribute.Firefox50+Safari14+Chrome52+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?referrerPolicy must reflect the referrerpolicy content attribute, limited to
only known values.text
attribute's getter must return this element's descendant text content.text attribute's setter must string replace
all with the given value within this element.
a element can be wrapped around entire paragraphs, lists, tables, and so
forth, even entire sections, so long as there is no interactive content within (e.g., buttons or
other links). This example shows how this can be used to make an entire advertising block into a
link:
4.5.2 The
em elementFirefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?HTMLElement.em element represents stress emphasis of its contents.em elements.
em element isn't a generic "italics" element. Sometimes, text is intended to
stand out from the rest of the paragraph, as if it was in a different mood or voice. For this,
the i element is more appropriate.em element also isn't intended to convey importance; for that purpose, the
strong element is more appropriate.4.5.3 The
strong elementFirefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?HTMLElement.strong element represents strong importance, seriousness, or
urgency for its contents.strong element can be used in a heading, caption,
or paragraph to distinguish the part that really matters from other parts that might be more
detailed, more jovial, or merely boilerplate. (This is distinct from marking up subheadings, for
which the hgroup element is appropriate.)strong to distinguish it from the more detailed text in the rest of the
paragraph.strong element can be used to mark up a warning
or caution notice.strong element can be used to denote contents that
the user needs to see sooner than other parts of the document.strong elements; each strong element increases the importance of its
contents.strong element does not change
the meaning of the sentence.
strong:strong, to distinguish it from boilerplate text (before) and the description
(after):strong element is thus used to mark up
the first part to distinguish it from the latter part.
strong element is used to denote the part of the text that
the user is intended to read first.4.5.4 The
small elementFirefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?HTMLElement.small element represents side comments such as small print.small element does not "de-emphasize" or lower the importance of
text emphasized by the em element or marked as important with the strong
element. To mark text as not emphasized or important, simply do not mark it up with the
em or strong elements respectively.small element should not be used for extended spans of text, such as multiple
paragraphs, lists, or sections of text. It is only intended for short runs of text. The text of a
page listing terms of use, for instance, would not be a suitable candidate for the
small element: in such a case, the text is not a side comment, it is the main content
of the page.small element must not be used for subheadings; for that purpose, use the
hgroup element.
small element is used to indicate that value-added tax is
not included in a price of a hotel room:
small element is used for a side comment in an
article.
small element is marked as being important
small print.4.5.5 The
s elementFirefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?HTMLElement.s element represents contents that are no longer accurate or no
longer relevant.s element is not appropriate when indicating document edits; to
mark a span of text as having been removed from a document, use the del element.
4.5.6 The
cite elementFirefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?HTMLElement.cite element represents the title of a work (e.g.
a book,
a paper,
an essay,
a poem,
a score,
a song,
a script,
a film,
a TV show,
a game,
a sculpture,
a painting,
a theatre production,
a play,
an opera,
a musical,
an exhibition,
a legal case report,
a computer program,
etc.). This can be a work that is being quoted or referenced in detail (i.e., a
citation), or it can just be a work that is mentioned in passing.b element might be appropriate for names; e.g. in a gossip article where the
names of famous people are keywords rendered with a different style to draw attention to them. In
other cases, if an element is really needed, the span element can be
used.)
cite element:
cite element here is
containing far more than the title of the work:
cite element is a key part of any citation in a bibliography, but it is only
used to mark the title:q element
is appropriate).
cite is not for quotes:cite element:b element might be relevant for marking names as being
keywords in certain kinds of documents:4.5.7 The
q elementFirefox1+Safari3+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?cite — Link to the source of the quotation or more information about the editHTMLQuoteElement.q element represents some phrasing
content quoted from another source.q elements; they will be
inserted into the rendering by the user agent.q element must be quoted from another source, whose address, if
it has one, may be cited in the cite attribute. The source may be fictional, as when quoting
characters in a novel or screenplay.cite attribute is present, it must be a valid
URL potentially surrounded by spaces. To obtain the corresponding citation
link, the value of the attribute must be parsed relative to the
element's node document. User agents may allow users to follow such citation
links, but they are primarily intended for private use (e.g., by server-side scripts collecting
statistics about a site's use of quotations), not for readers.q element must not be used in place of quotation marks that do not represent
quotes; for example, it is inappropriate to use the q element for marking up
sarcastic statements.q elements to mark up quotations is entirely optional; using explicit
quotation punctuation without q elements is just as correct.
q element:
q element, and an
explicit citation outside:
q element:
q element in this case would be inappropriate.4.5.8 The
dfn elementFirefox1+Safari6+Chrome15+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?dfn element descendants.title attribute has special semantics on this element: Full term or expansion of abbreviation.HTMLElement.dfn element represents the defining instance of a term. The paragraph, description list group, or section that is the nearest ancestor of the dfn
element must also contain the definition(s) for the term given
by the dfn element.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 abbr element with a
title attribute, then the exact value of that
attribute is the term being defined. Otherwise, it is the descendant text content of
the dfn element that gives the term being defined.title attribute of the dfn element is
present, then it must contain only the term being defined.title attribute of ancestor elements does not
affect dfn elements.a element that links to a dfn element represents an instance of
the term defined by the dfn element.
a element, the reference
can be made explicit:4.5.9 The
abbr elementFirefox1+Safari4+Chrome2+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer7+
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?title attribute has special semantics on this element: Full term or expansion of abbreviation.HTMLElement.abbr element represents an abbreviation or acronym, optionally
with its expansion. The title attribute may be used to provide an expansion of the
abbreviation. The attribute, if specified, must contain an expansion of the abbreviation, and
nothing else.
abbr element.
This paragraph defines the term "Web Hypertext Application
Technology Working Group".
abbr element.
abbr element with a title attribute is an
alternative to including the expansion inline (e.g. in parentheses).abbr element with a title attribute or include the expansion inline in the text the first
time the abbreviation is used.abbr element
can be used without a title attribute.title attribute once
will not necessarily cause other abbr elements in the same document with the same
contents but without a title attribute to behave as if they had
the same expansion. Every abbr element is independent.4.5.10 The
ruby elementFirefox38+Safari5+Chrome5+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?HTMLElement.ruby element allows one or more spans of phrasing content to be marked with
ruby annotations. Ruby annotations are short runs of text presented alongside base text, primarily
used in East Asian typography as a guide for pronunciation or to include other annotations. In
Japanese, this form of typography is also known as furigana.ruby elements consists of one or more of the following
sequences:ruby elements and with no ruby element descendants
ruby element that itself has no ruby element descendants
ruby and rt elements can be used for a variety of kinds of
annotations, including in particular (though by no means limited to) those described below. For
more details on Japanese Ruby in particular, and how to render Ruby for Japanese, see
Requirements for Japanese Text Layout. [JLREQ]ruby element. It is hoped that CSS will be extended to support
the styles described below in due course.
ruby element with two
segments of base text and two annotations (one for each) rather than two back-to-back
ruby elements each with one base text segment and annotation (as in the markup
above):
ruby element.
ruby
element is used to give the inner annotations, and then that whole ruby is then
given an annotation at the "outer" level.
ruby element gives a mono-ruby phonetic annotation for each base character, while the annotation in the rt element that is a child of the outer ruby element gives the meaning using hiragana.
ruby element that does not have a ruby element ancestor,
content is segmented and segments are placed into three categories: base text segments, annotation
segments, and ignored segments. Ignored segments do not form part of the document's semantics
(they consist of some inter-element whitespace and rp elements, the
latter of which are used for legacy user agents that do not support ruby at all). Base text
segments can overlap (with a limit of two segments overlapping any one position in the DOM, and
with any segment having an earlier start point than an overlapping segment also having an equal or
later end point, and any segment have a later end point than an overlapping segment also having an
equal or earlier start point). Annotation segments correspond to rt elements. Each annotation
segment can be associated with a base text segment, and each base text segment can have annotation
segments associated with it. (In a conforming document, each base text segment is associated with
at least one annotation segment, and each annotation segment is associated with one base text
segment.) A ruby element represents the union of the segments of base
text it contains, along with the mapping from those base text segments to annotation segments.
Segments are described in terms of DOM ranges; annotation segment ranges always
consist of exactly one element. [DOM]ruby
element is the result that would be obtained from running the following algorithm:ruby element for which the algorithm is
being run.ruby element ancestor, then jump to the
step labeled end.rt or rp element, jump to the step labeled annotation
mode.ruby element, and if current parent is the
same element as root, then push a ruby level and then jump to
the step labeled start mode.rt or rp element, then set the current base text and then
jump to the step labeled annotation mode.rt element, then push a ruby annotation and jump to
the step labeled annotation mode increment.rp element, jump to the step labeled annotation mode increment.inter-element
whitespace, then jump to the step labeled base mode.rt element or an rp element, then set index to
lookahead index and jump to the step labeled annotation mode.inter-element
whitespace, then jump to the step labeled base mode (without further incrementing
index, so the inter-element whitespace seen so far becomes part
of the next base text segment).ruby element not described by segments in either
of those lists is implicitly in an ignored segment.rt element that is the indexth node of current parent.
...
...
4.5.11 The
rt elementFirefox38+Safari5+Chrome5+
Opera?Edge79+
Edge (Legacy)?Internet Explorer5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?ruby element.rt element's end tag can be omitted if the
rt element is immediately followed by an rt or rp element,
or if there is no more content in the parent element.HTMLElement.rt element marks the ruby text component of a ruby annotation. When it is the
child of a ruby element, it doesn't represent
anything itself, but the ruby element uses it as part of determining what it
represents.rt element that is not a child of a ruby element
represents the same thing as its children.4.5.12 The
rp elementFirefox38+Safari5+Chrome5+
Opera?Edge79+
Edge (Legacy)?Internet Explorer5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?ruby element, either immediately before or immediately after an rt element.rp element's end tag can be omitted if the
rp element is immediately followed by an rt or rp element,
or if there is no more content in the parent element.HTMLElement.rp element can be used to provide parentheses or other content around a ruby
text component of a ruby annotation, to be shown by user agents that don't support ruby
annotations.rp element that is a child of a ruby
element represents nothing. An rp element
whose parent element is not a ruby element represents its
children.
rp so that in legacy user agents the readings are in parentheses:...
... 漢（かん）字（じ）...
rp elements can also be placed
between the annotations. Here is another copy of an earlier contrived example showing some
symbols with names given in English and French, but this time with rp elements as
well:
♥: Heart, Cœur. ☘: Shamrock, Trèfle. ✶: Star, Étoile.
4.5.13 The
data elementFirefox22+Safari10+Chrome62+
Opera?Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?Firefox22+Safari10+Chrome62+
Opera?Edge79+
Edge (Legacy)14+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?value — Machine-readable value[data element represents its contents, along with a
machine-readable form of those contents in the value
attribute.value attribute
must be present. Its value must be a representation of the element's contents in a
machine-readable format.time
element can be used instead.value attribute is
determined by the microformats or microdata vocabulary in use.data-*
attributes can also be useful in such situations.)Firefox22+Safari10+Chrome62+
Opera?Edge79+
Edge (Legacy)14+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?value IDL
attribute must reflect the content attribute of the same name.
data element so
that the table sorting JavaScript library can provide a sorting mechanism on each column
despite the numbers being presented in textual form in one column and in a decomposed form in
another.4.5.14 The
time elementFirefox22+Safari7+Chrome62+
Opera49+Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS4+Chrome Android?WebView Android?Samsung Internet?Opera Android46+Firefox22+Safari10+Chrome62+
Opera49+Edge79+
Edge (Legacy)14+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android46+datetime attribute: Phrasing content.datetime — Machine-readable value[time element represents its contents, along with a
machine-readable form of those contents in the datetime
attribute. The kind of content is limited to various kinds of dates, times, time-zone offsets, and
durations, as described below.datetime
attribute may be present. If present, its value must be a representation of the element's contents
in a machine-readable format.time element that does not have a datetime content attribute must not have any element
descendants.time element is the value of the element's
datetime content attribute, if it has one, otherwise the
child text content of the time element.time element must match one of the following
syntaxes.Firefox22+Safari10+Chrome62+
Opera49+Edge79+
Edge (Legacy)14+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android46+dateTime
IDL attribute must reflect the element's datetime content attribute.
time element can be used to encode dates, for example in microformats. The
following shows a hypothetical way of encoding an event using a variant on hCalendar that uses
the time element:
time element to mark up a blog post's publication date.
time, this
time using the schema.org microdata vocabulary:
time element is used to encode a date in the
ISO8601 format, for later processing by a script:time element) could scan through the page and look at all
the time elements therein to create an index of dates and times.
Today is
Your next meeting is at 4.5.15 The
code elementFirefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?HTMLElement.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
recognize.code elements with the language used, e.g. so that syntax highlighting
scripts can use the right rules, can use the class attribute, e.g.
by adding a class prefixed with "language-" to the element.
pre
and code elements.pre element for more details.4.5.16 The
var elementFirefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?HTMLElement.var element represents a variable. This could be an actual
variable in a mathematical expression or programming context, an identifier representing a
constant, a symbol identifying a physical quantity, a function parameter, or just be a term used
as a placeholder in prose.
var element can still be used to refer to specific
variables that are then mentioned in MathML expressions.
var.
var element is used to mark the variables and constants in that equation:4.5.17 The
samp elementFirefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?HTMLElement.samp element represents sample or quoted output from another
program or computing system.pre and kbd elements for more details.output element, which can be
used to provide immediate output in a web application.
samp element being used
inline:
samp and kbd elements allow for the styling of specific elements
of the sample output using a style sheet. There's also a few parts of the samp that
are annotated with even more detailed markup, to enable very precise styling. To achieve this,
span elements are used.
code and samp elements.4.5.18 The
kbd elementFirefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?HTMLElement.kbd element represents user input (typically keyboard input,
although it may also be used to represent other input, such as voice commands).kbd element is nested inside a samp element, it represents
the input as it was echoed by the system.kbd element contains a samp element, it represents
input based on system output, for example invoking a menu item.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.
kbd element is used to indicate keys to press: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:4.5.19 The
sub and sup elementsFirefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?sub element: for authors; for implementers.sup element: for authors; for implementers.HTMLElement.sup element represents a superscript and the sub
element represents a subscript.sub and sup elements to be used in the name of the LaTeX
document preparation system. In general, authors should use these elements only if the
absence of those elements would change the meaning of the content.
sub element can be used inside a var element, for variables that
have subscripts.
sub element is used to represent the subscript that identifies the
variable in a family of variables:sub and
sup if detailed mathematical markup is not desired. [MATHML]
f(4.5.20 The
i elementFirefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?HTMLElement.i element represents a span of text in an alternate voice or
mood, or otherwise offset from the normal prose in a manner indicating a different quality of
text, such as a taxonomic designation, a technical term, an idiomatic phrase from another
language, transliteration, a thought, or a ship name in Western texts.lang attributes (or, in XML, lang attributes in the XML namespace).
i element:i elements.class attribute on the i
element to identify why the element is being used, so that if the style of a particular use (e.g.
dream sequences as opposed to taxonomic terms) is to be changed at a later date, the author
doesn't have to go through the entire document (or series of related documents) annotating each
use.i element, for instance the em element for marking up stress emphasis,
or the dfn element to mark up the defining instance of a term.i elements, just like any other
element can be restyled. Thus, it is not the case that content in i elements will
necessarily be italicized.4.5.21 The
b elementFirefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?HTMLElement.b element represents a span of text to which attention is being
drawn for utilitarian purposes without conveying any extra importance and with no implication of
an alternate voice or mood, such as key words in a document abstract, product names in a review,
actionable words in interactive text-driven software, or an article lede.
b element to highlight key words without
marking them up as important:
b element.
b element is appropriate is in marking up the lede (or
lead) sentence or paragraph. The following example shows how a BBC article about
kittens adopting a rabbit as their own could be marked up:i element, authors can use the class
attribute on the b element to identify why the element is being used, so that if the
style of a particular use is to be changed at a later date, the author doesn't have to go through
annotating each use.b element should be used as a last resort when no other element is more
appropriate. In particular, headings 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 mark
element.
strong, not
b.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.4.5.22 The
u elementFirefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?HTMLElement.u element represents a span of text with an unarticulated, though
explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in
Chinese text (a Chinese proper name mark), or labeling the text as being misspelt.em element should be used; for marking key words or phrases either the
b element or the mark element should be used, depending on the context;
for marking book titles, the cite element should be used; for labeling text with explicit textual annotations, the
ruby element should be used; for technical terms, taxonomic designation,
transliteration, a thought, or for labeling ship names in Western texts, the i
element should be used.u element in visual presentations
clashes with the conventional rendering of hyperlinks (underlining). Authors are encouraged to
avoid using the u element where it could be confused for a hyperlink.
u element is used to mark a word as misspelt:4.5.23 The
mark elementFirefox4+Safari5.1+Chrome7+
Opera11+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?HTMLElement.mark element represents a run of text in one document marked or
highlighted for reference purposes, due to its relevance in
another context. When used in a quotation or other block of text referred to from the prose, it
indicates a highlight that was not originally present but which has been added to bring the
reader's attention to a part of the text that might not have been considered important by the
original author when the block was originally written, but which is now under previously
unexpected scrutiny. When used in the main prose of a document, it indicates a part of the
document that has been highlighted due to its likely relevance to the user's current activity.
mark element can be used to bring attention to a
particular part of a quotation:u element,
possibly with a class, would be more appropriate.)
mark element is highlighting parts of a document that are
matching some search string. If someone looked at a document, and the server knew that the user
was searching for the word "kitten", then the server might return the document with one paragraph
modified as follows:
span is more
appropriate. Combining both, one would get:
mark to highlight a part of quoted
text that was originally not emphasized. In this example, common typographic conventions have led
the author to explicitly style mark elements in quotes to render in italics.em element in this example, which
is part of the original text being quoted, and the mark element, which is
highlighting a part for comment.
strong) as opposed to denoting the relevance of a span of text
(mark). It is an extract from a textbook, where the extract has had the parts
relevant to the exam highlighted. The safety warnings, important though they may be, are
apparently not relevant to the exam.4.5.24 The
bdi elementFirefox10+Safari6+Chrome16+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android?dir global attribute has special semantics on this element.HTMLElement.bdi element represents a span of text that is to be isolated from
its surroundings for the purposes of bidirectional text formatting. [BIDI]dir global attribute defaults to auto on this element (it never inherits from the parent element like
with other elements).
bdi element were not used, the username of the Arabic user would
end up confusing the text (the bidirectional algorithm would put the colon and the number "3"
next to the word "User" rather than next to the word "posts").
bdi element, the username acts as expected.
bdi element were to be replaced by a b element, the username would confuse the bidirectional algorithm and the third bullet would end up saying "User 3 :", followed by the Arabic name (right-to-left), followed by "posts" and a period.4.5.25 The
bdo elementFirefox10+Safari4+Chrome15+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?dir global attribute has special semantics on this element.HTMLElement.bdo element represents explicit text directionality formatting
control for its children. It allows authors to override the Unicode bidirectional algorithm by
explicitly specifying a direction override. [BIDI]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. The auto value must not be specified.4.5.26 The
span elementFirefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?Firefox1+Safari6+Chrome15+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?[span element doesn't mean anything on its own, but can be useful when used
together with the global attributes, e.g. class,
lang, or dir. It
represents its children.
span elements and class attributes so that its keywords and identifiers can be
color-coded from CSS:4.5.27 The
br elementFirefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+[br element represents a line break.br elements must be used only for line breaks that are actually part of the
content, as in poems or addresses.
br element:br elements must not be used for separating thematic groups in a paragraph.
br element:br element, it
represents a placeholder blank line (e.g. as in a template). Such blank lines must not be used for
presentation purposes.br elements must not be considered part of the surrounding
text.4.5.28 The
wbr elementFirefox1+Safari4+Chrome1+
Opera11.6+Edge79+
Edge (Legacy)?Internet Explorer5.5–7
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+HTMLElement.wbr element represents a line break opportunity.
wbr element.wbr elements must not be considered part of the surrounding
text.4.5.29 Usage summary
Element
Purpose
Example
a
Hyperlinks
Visit my em
Stress emphasis
I must say I strong
Importance
This tea is small
Side comments
These grapes are made into wine. s
Inaccurate text
Price: cite
Titles of works
The case q
Quotations
The judge said dfn
Defining instance
The term abbr
Abbreviations
Organic food in Ireland is certified by the ruby, rt, rp
Ruby annotations
data
Machine-readable equivalent
Available starting today! time
Machine-readable equivalent of date- or time-related data
Available starting on code
Computer code
The var
Variables
If there are samp
Computer output
The computer said kbd
User input
Hit sub
Subscripts
Water is Hsup
Superscripts
The Hydrogen in heavy water is usually i
Alternative voice
Lemonade consists primarily of b
Keywords
Take a u
Annotations
The mixture of apple juice and mark
Highlight
Elderflower cordial, with one bdi
Text directionality isolation
The recommended restaurant is bdo
Text directionality formatting
The proposal is to write English, but in reverse order. "Juice" would become "span
Other
In French we call it br
Line break
Simply Orange Juice Companywbr
Line breaking opportunity
www.simply