If the [a](#the-a-element) element has an [href](links.html#attr-hyperlink-href) attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents.
If the [a](#the-a-element) element has no [href](links.html#attr-hyperlink-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](links.html#attr-hyperlink-target), [rel](links.html#attr-hyperlink-rel),[media](links.html#attr-hyperlink-media),[hreflang](links.html#attr-hyperlink-hreflang), and [type](links.html#attr-hyperlink-type) attributes must be omitted if the [href](links.html#attr-hyperlink-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](#the-a-element) element:
The [href](links.html#attr-hyperlink-href),[target](links.html#attr-hyperlink-target), attributes affect what happens when users follow hyperlinks created using the [a](#the-a-element) element. The[rel](links.html#attr-hyperlink-rel), [media](links.html#attr-hyperlink-media), [hreflang](links.html#attr-hyperlink-hreflang), and [type](links.html#attr-hyperlink-type) attributes may be used to indicate to the user the likely nature of the target resource before the user follows the link.
If the algorithm is not allowed to show a pop-up and either the [a](#the-a-element) element's [target](links.html#attr-hyperlink-target) attribute is present and applying the rules for choosing a browsing context given a browsing context name, using the value of the [target](links.html#attr-hyperlink-target) attribute as the browsing context name, would result in there not being a chosen browsing context, then throw an[InvalidAccessError](infrastructure.html#invalidaccesserror) exception and abort these steps.
If the target of the [click](infrastructure.html#event-click) event is an [img](embedded-content-0.html#the-img-element) element with an [ismap](embedded-content-0.html#attr-img-ismap) attribute specified, then server-side image map processing must be performed, as follows:
If the [click](infrastructure.html#event-click) event was a real pointing-device-triggered[click](infrastructure.html#event-click) event on the [img](embedded-content-0.html#the-img-element) element, then let x be the distance in CSS pixels from the left edge of the image's left border, if it has one, or the left edge of the image otherwise, to the location of the click, and lety be the distance in CSS pixels from the top edge of the image's top border, if it has one, or the top edge of the image otherwise, to the location of the click. Otherwise, let x and y be zero.
Let the hyperlink suffix be a U+003F QUESTION MARK character, the value of x expressed as a base-ten integer using ASCII digits, a "," (U+002C) character, and the value of y expressed as a base-ten integer using ASCII digits. ASCII digits are the characters in the range ASCII digits.
Finally, the user agent must follow the hyperlink created by the [a](#the-a-element) element, as determined by any expressed user preference. If the steps above defined ahyperlink suffix, then take that into account when following or downloading the hyperlink.
a . [text](#dom-a-text)
Same as [textContent](infrastructure.html#textcontent).
The IDL attributeshref, target, rel, media, hreflang, and type, mustreflect the respective content attributes of the same name.
The IDL attribute relList mustreflect the [rel](links.html#attr-hyperlink-rel) content attribute.
The text IDL attribute, on getting, must return the same value as the [textContent](infrastructure.html#textcontent) IDL attribute on the element, and on setting, must act as if the [textContent](infrastructure.html#textcontent) IDL attribute on the element had been set to the new value.
The [a](#the-a-element) element also supports the complement ofURL decomposition IDL attributes, protocol, host, port, hostname, pathname, search, and hash. These must follow the rules given for URL decomposition IDL attributes, with the input being the result of resolving the element's [href](links.html#attr-hyperlink-href) attribute relative to the element, if there is such an attribute and resolving it is successful, or the empty string otherwise; and the common setter action being the same as setting the element's[href](links.html#attr-hyperlink-href) attribute to the new output value.
The [a](#the-a-element) element may 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:
The [em](#the-em-element) element represents stress emphasis of its contents.
The level of stress that a particular piece of content has is given by its number of ancestor [em](#the-em-element) elements.
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:
Cats are cute animals.
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):
Cats are cute animals.
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):
Cats are cute animals.
By moving it to the adjective, the exact nature of the cats is reasserted (maybe someone suggested cats were mean animals):
Cats are cute animals.
Similarly, if someone asserted that cats were vegetables, someone correcting this might emphasize the last word:
Cats are cute animals.
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.
Cats are cute animals!
Anger mixed with emphasizing the cuteness could lead to markup such as:
Cats are cute animals!
The [em](#the-em-element) 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](#the-i-element) element is more appropriate.
The [em](#the-em-element) element also isn't intended to convey importance; for that purpose, the [strong](#the-strong-element) element is more appropriate.
The [strong](#the-strong-element) 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](#the-strong-element) elements; each[strong](#the-strong-element) element increases the importance of its contents.
Changing the importance of a piece of text with the[strong](#the-strong-element) 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:
Warning. This dungeon is dangerous.
Avoid the ducks. Take any gold you find.
Do not take any of the diamonds,
they are explosive and will destroy anything within
ten meters. You have been warned.
The [small](#the-small-element) element represents side comments such as small print.
Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements.
The [small](#the-small-element) element does not "de-emphasize" or lower the importance of text emphasized by the[em](#the-em-element) element or marked as important with the[strong](#the-strong-element) element. To mark text as not emphasized or important, simply do not mark it up with the [em](#the-em-element) or[strong](#the-strong-element) elements respectively.
The [small](#the-small-element) 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](#the-small-element) element: in such a case, the text is not a side comment, it is the main content of the page.
In this example, the [small](#the-small-element) element is used to indicate that value-added tax is not included in a price of a hotel room:
Single room
199 € breakfast included, VAT not included
Double room
239 € breakfast included, VAT not included
In this second example, the [small](#the-small-element) element is used for a side comment in an article.
Example Corp today announced record profits for the
second quarter (Full Disclosure: Foo News is a subsidiary of
Example Corp), leading to speculation about a third quarter
merger with Demo Group.
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 [small](#the-small-element) element is marked as being important small print.
Continued use of this service will result in a kiss.
The [s](#the-s-element) element represents contents that are no longer accurate or no longer relevant.
The [s](#the-s-element) element is not appropriate when indicating document edits; to mark a span of text as having been removed from a document, use the [del](edits.html#the-del-element) element.
In this example a recommended retail price has been marked as no longer relevant as the product in question has a new sale price.
The [cite](#the-cite-element) 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, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing.
A person's name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people's names. (In some cases, the[b](#the-b-element) 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](#the-span-element) element can be used.)
This next example shows a typical use of the [cite](#the-cite-element) element:
My favorite book is The Reality Dysfunction by
Peter F. Hamilton. My favorite comic is Pearls Before
Swine by Stephan Pastis. My favorite track is Jive
Samba by the Cannonball Adderley Sextet.
This is correct usage:
According to the Wikipedia article HTML, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.
The following, however, is incorrect usage, as the[cite](#the-cite-element) element here is containing far more than the title of the work:
According to the Wikipedia article on HTML, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.
The [cite](#the-cite-element) element is obviously a key part of any citation in a bibliography, but it is only used to mark the title:
Universal Declaration of Human Rights, United Nations,
December 1948. Adopted by General Assembly resolution 217 A (III).
A citation is not a quote (for which the [q](#the-q-element) element is appropriate).
This is incorrect usage, because [cite](#the-cite-element) is not for quotes:
This is wrong!, said Ian.
This is also incorrect usage, because a person is not a work:
This is still wrong!, said Ian.
The correct usage does not use a [cite](#the-cite-element) element:
This is correct, said Ian.
As mentioned above, the [b](#the-b-element) element might be relevant for marking names as being keywords in certain kinds of documents:
And then Ian said this might be right, in a
gossip column, maybe!.
Quotation punctuation (such as quotation marks) that is quoting the contents of the element must not appear immediately before, after, or inside [q](#the-q-element) elements; they will be inserted into the rendering by the user agent.
Content inside a [q](#the-q-element) element must be quoted from another source, whose address, if it has one, may be cited in thecite attribute. The source may be fictional, as when quoting characters in a novel or screenplay.
If the [cite](#attr-q-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 resolved relative to the element. User agents should allow users to follow such citation links.
The [q](#the-q-element) element must not be used in place of quotation marks that do not represent quotes; for example, it is inappropriate to use the [q](#the-q-element) element for marking up sarcastic statements.
The use of [q](#the-q-element) elements to mark up quotations is entirely optional; using explicit quotation punctuation without[q](#the-q-element) elements is just as correct.
Here is a simple example of the use of the [q](#the-q-element) element:
The man said Things that are impossible just take
longer. I disagreed with him.
Here is an example with both an explicit citation link in the[q](#the-q-element) element, and an explicit citation outside:
The W3C page About W3C says the W3C's
mission is To lead the
World Wide Web to its full potential by developing protocols and
guidelines that ensure long-term growth for the Web. I
disagree with this mission.
In the following example, the quotation itself contains a quotation:
In Example One, he writes The man
said Things that are impossible just take longer. I
disagreed with him. Well, I disagree even more!
In the following example, quotation marks are used instead of the [q](#the-q-element) element:
His best argument was ❝I disagree❞, which
I thought was laughable.
In the following example, there is no quote — the quotation marks are used to name a word. Use of the [q](#the-q-element) element in this case would be inappropriate.
The word "ineffable" could have been used to describe the disaster
resulting from the campaign's mismanagement.
The [dfn](#the-dfn-element) element represents the defining instance of a term. The paragraph,description list group, or section that is the nearest ancestor of the [dfn](#the-dfn-element) element must also contain the definition(s) for the term given by the [dfn](#the-dfn-element) element.
Defining term: If the [dfn](#the-dfn-element) element has atitle 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](infrastructure.html#text-0) nodes, and that child element is an [abbr](#the-abbr-element) element with a [title](#attr-abbr-title) attribute, then the exact value of that attribute is the term being defined. Otherwise, it is the exact [textContent](infrastructure.html#textcontent) of the [dfn](#the-dfn-element) element that gives the term being defined.
If the [title](#attr-dfn-title) attribute of the[dfn](#the-dfn-element) element is present, then it must contain only the term being defined.
The [title](dom.html#attr-title) attribute of ancestor elements does not affect [dfn](#the-dfn-element) elements.
An [a](#the-a-element) element that links to a [dfn](#the-dfn-element) element represents an instance of the term defined by the[dfn](#the-dfn-element) element.
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.
The **GDO**
is a device that allows off-world teams to open the iris.
Teal'c activated his **GDO**
and so Hammond ordered the iris to be opened.
With the addition of an [a](#the-a-element) element, the reference can be made explicit:
The GDO
is a device that allows off-world teams to open the iris.
Teal'c activated his ****GDO**[](#the-a-element)**
and so Hammond ordered the iris to be opened.
The [abbr](#the-abbr-element) element represents an abbreviation or acronym, optionally with its expansion. The title attribute may be used to provide an expansion of the abbreviation. The attribute, if specified, must contain an expansion of the abbreviation, and nothing else.
The paragraph below contains an abbreviation marked up with the[abbr](#the-abbr-element) element. This paragraph defines the term "Web Hypertext Application Technology Working Group".
The WHATWG
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.
An alternative way to write this would be:
The Web Hypertext Application Technology
Working Group (WHATWG)
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.
This paragraph has two abbreviations. Notice how only one is defined; the other, with no expansion associated with it, does not use the [abbr](#the-abbr-element) element.
The
WHATWG
started working on HTML5 in 2004.
This paragraph links an abbreviation to its definition.
The WHATWG
community does not have much representation from Asia.
This paragraph marks up an abbreviation without giving an expansion, possibly as a hook to apply styles for abbreviations (e.g. smallcaps).
Philip` and Dashiva both denied that they were going to
get the issue counts from past revisions of the specification to
backfill the WHATWG issue graph.
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:
Two WGs worked on
this specification: the WHATWG and the
HTMLWG.
Here the plural is inside the element, so the expansion is in the plural:
Two WGs worked on
this specification: the WHATWG and the
HTMLWG.
Abbreviations do not have to be marked up using this element. It is expected to be useful in the following cases:
Abbreviations for which the author wants to give expansions, where using the [abbr](#the-abbr-element) element with a [title](dom.html#attr-title) attribute is an alternative to including the expansion inline (e.g. in parentheses).
Abbreviations that are likely to be unfamiliar to the document's readers, for which authors are encouraged to either mark up the abbreviation using an [abbr](#the-abbr-element) element with a [title](dom.html#attr-title) attribute or include the expansion inline in the text the first time the abbreviation is used.
Abbreviations whose presence needs to be semantically annotated, e.g. so that they can be identified from a style sheet and given specific styles, for which the [abbr](#the-abbr-element) element can be used without a [title](dom.html#attr-title) attribute.
Providing an expansion in a [title](dom.html#attr-title) attribute once will not necessarily cause other [abbr](#the-abbr-element) elements in the same document with the same contents but without a [title](dom.html#attr-title) attribute to behave as if they had the same expansion. Every[abbr](#the-abbr-element) element is independent.
The [time](#the-time-element) element represents its contents, along with a machine-readable form of those contents in the [datetime](#attr-time-datetime) attribute. The kind of content is limited to various kinds of dates, times, time-zone offsets, and durations, as described below.
The datetime attribute may be present. If present, its value must be a representation of the element's contents in a machine-readable format.
A [time](#the-time-element) element that does not have a [datetime](#attr-time-datetime) content attribute must not have any element descendants.
The datetime value of a [time](#the-time-element) element is the value of the element's [datetime](#attr-time-datetime) content attribute, if it has one, or the element's [textContent](infrastructure.html#textcontent), if it does not.
The datetime value of a [time](#the-time-element) element must match one of the following syntaxes.
If the element's datetime value consists of only characters in the range ASCII digits, then the machine-readable equivalent is the base-ten interpretation of those digits, representing a year; abort these steps.
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.
The datetime IDL attribute must reflect the content attribute of the same name.
The [time](#the-time-element) 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](#the-time-element) element:
In the following snippet, the [time](#the-time-element) element is used to encode a date in the ISO8601 format, for later processing by a script:
Our first date was .
In this second snippet, the value includes a time:
We stopped talking at .
A script loaded by the page (and thus privy to the page's internal convention of marking up dates and times using the[time](#the-time-element) element) could scan through the page and look at all the [time](#the-time-element) elements therein to create an index of dates and times.
For example, this element conveys the string "Tuesday" with the additional semantic that the 12th of November 2011 is the meaning that corresponds to "Tuesday":
Today is .
In this example, a specific time in the Pacific Standard Time timezone is specified:
The [code](#the-code-element) 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.
Although there is no formal way to indicate the language of computer code being marked up, authors who wish to mark[code](#the-code-element) elements with the language used, e.g. so that syntax highlighting scripts can use the right rules, may do so by adding a class prefixed with "language-" to the element.
The following example shows how the element can be used in a paragraph to mark up element names and computer code, including punctuation.
The code element represents a fragment of computer
code.
When you call the activate() method on the
robotSnowman object, the eyes glow.
The example below uses the begin keyword to indicate
the start of a statement block. It is paired with an end
keyword, which is followed by the . punctuation character
(full stop) to indicate the end of the program.
The following example shows how a block of code could be marked up using the [pre](grouping-content.html#the-pre-element) and [code](#the-code-element) elements.
var i: Integer;
begin
i := 1;
end.
A class is used in that example to indicate the language used.
See the [pre](grouping-content.html#the-pre-element) element for more details.
The [var](#the-var-element) 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.
In the paragraph below, the letter "n" is being used as a variable in prose:
If there are n pipes leading to the ice
cream factory then I expect at leastn
flavors of ice cream to be available for purchase!
For mathematics, in particular for anything beyond the simplest of expressions, MathML is more appropriate. However, the[var](#the-var-element) element can still be used to refer to specific variables that are then mentioned in MathML expressions.
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 [var](#the-var-element).
a
=
b2
+
c2
Using Pythagoras' theorem to solve for the hypotenuse a of
a triangle with sides b and c
Here, the equation describing mass-energy equivalence is used in a sentence, and the [var](#the-var-element) element is used to mark the variables and constants in that equation:
Then he turned to the blackboard and picked up the chalk. After a few moment's
thought, he wrote E = mc2. The teacher
looked pleased.
The [samp](#the-samp-element) element represents (sample) output from a program or computing system.
See the [pre](grouping-content.html#the-pre-element) and [kbd](#the-kbd-element) elements for more details.
This example shows the [samp](#the-samp-element) element being used inline:
The computer said Too much cheese in tray
two but I didn't know what that meant.
This second example shows a block of sample output. Nested[samp](#the-samp-element) and [kbd](#the-kbd-element) elements allow for the styling of specific elements of the sample output using a style sheet.
jdoe@mowmow:~$ssh demo.example.com
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
jdoe@demo:~$_
The [kbd](#the-kbd-element) element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands).
When the [kbd](#the-kbd-element) element is nested inside a[samp](#the-samp-element) element, it represents the input as it was echoed by the system.
When the [kbd](#the-kbd-element) element contains a[samp](#the-samp-element) element, it represents input based on system output, for example invoking a menu item.
When the [kbd](#the-kbd-element) element is nested inside another[kbd](#the-kbd-element) element, it represents an actual key or other single unit of input as appropriate for the input mechanism.
Here the [kbd](#the-kbd-element) element is used to indicate keys to press:
To make George eat an apple, press Shift+F3
In this second example, the user is told to pick a particular menu item. The outer [kbd](#the-kbd-element) element marks up a block of input, with the inner [kbd](#the-kbd-element) elements representing each individual step of the input, and the [samp](#the-samp-element) elements inside them indicating that the steps are input based on something being displayed by the system, in this case menu labels:
To make George eat an apple, select
File|Eat Apple...
Such precision isn't necessary; the following is equally fine:
To make George eat an apple, select File | Eat Apple...
The [sup](#the-sub-and-sup-elements) element represents a superscript and the [sub](#the-sub-and-sup-elements) element represents a subscript.
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 [sub](#the-sub-and-sup-elements) and [sup](#the-sub-and-sup-elements) 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.
In certain languages, superscripts are part of the typographical conventions for some abbreviations.
The most beautiful women are
Mlle Gwendoline and
Mme Denise.
The [sub](#the-sub-and-sup-elements) element can be used inside a[var](#the-var-element) element, for variables that have subscripts.
Here, the [sub](#the-sub-and-sup-elements) element is used to represents the subscript that identifies the variable in a family of variables:
The coordinate of the ith point is
(xi, yi).
For example, the 10th point has coordinate
(x10, y10).
Mathematical expressions often use subscripts and superscripts. Authors are encouraged to use MathML for marking up mathematics, but authors may opt to use [sub](#the-sub-and-sup-elements) and [sup](#the-sub-and-sup-elements) if detailed mathematical markup is not desired. [MATHML]
The [i](#the-i-element) 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 or short span of transliterated prose from another language, a thought, or a ship name in Western texts.
Terms in languages different from the main text should be annotated with [lang](dom.html#attr-lang) attributes (or, in XML, lang attributes in the XML namespace).
The examples below show uses of the [i](#the-i-element) element:
The Felis silvestris catus is cute.
The term prose content is defined above.
There is a certain je ne sais quoi in the air.
In the following example, a dream sequence is marked up using[i](#the-i-element) elements.
Raymond tried to sleep.
The ship sailed away on Thursday, he
dreamt. 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.
Finally one night he picked up the courage to speak with
her—
Raymond woke with a start as the fire alarm rang out.
Authors can use the [class](dom.html#classes) attribute on the [i](#the-i-element) 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.
Authors are encouraged to consider whether other elements might be more applicable than the [i](#the-i-element) element, for instance the[em](#the-em-element) element for marking up stress emphasis, or the[dfn](#the-dfn-element) element to mark up the defining instance of a term.
Style sheets can be used to format [i](#the-i-element) elements, just like any other element can be restyled. Thus, it is not the case that content in [i](#the-i-element) elements will necessarily be italicized.
The [b](#the-b-element) 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.
The following example shows a use of the [b](#the-b-element) element to highlight key words without marking them up as important:
The frobonitor and barbinator components are fried.
In the following example, objects in a text adventure are highlighted as being special by use of the [b](#the-b-element) element.
You enter a small room. Your sword glows
brighter. A rat scurries past the corner wall.
Another case where the [b](#the-b-element) 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:
Kittens 'adopted' by pet rabbit
Six abandoned kittens have found an
unexpected new mother figure — a pet rabbit.
Veterinary nurse Melanie Humble took the three-week-old
kittens to her Aberdeen home.
_[...]_
As with the [i](#the-i-element) element, authors can use the [class](dom.html#classes) attribute on the [b](#the-b-element) 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.
The [b](#the-b-element) element should be used as a last resort when no other element is more appropriate. In particular, headings should use the [h1](sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements) to [h6](sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements) elements, stress emphasis should use the [em](#the-em-element) element, importance should be denoted with the [strong](#the-strong-element) element, and text marked or highlighted should use the [mark](#the-mark-element) element.
The following would be incorrect usage:
WARNING! Do not frob the barbinator!
In the previous example, the correct element to use would have been [strong](#the-strong-element), not [b](#the-b-element).
Style sheets can be used to format [b](#the-b-element) elements, just like any other element can be restyled. Thus, it is not the case that content in [b](#the-b-element) elements will necessarily be boldened.
The [u](#the-u-element) 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.
In most cases, another element is likely to be more appropriate: for marking stress emphasis, the [em](#the-em-element) element should be used; for marking key words or phrases either the [b](#the-b-element) element or the [mark](#the-mark-element) element should be used, depending on the context; for marking book titles, the [cite](#the-cite-element) element should be used; for labeling text with explicit textual annotations, the [ruby](#the-ruby-element) element should be used; for labeling ship names in Western texts, the [i](#the-i-element) element should be used.
The default rendering of the [u](#the-u-element) element in visual presentations clashes with the conventional rendering of hyperlinks (underlining). Authors are encouraged to avoid using the[u](#the-u-element) element where it could be confused for a hyperlink.
The [mark](#the-mark-element) 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.
This example shows how the [mark](#the-mark-element) element can be used to bring attention to a particular part of a quotation:
Consider the following quote:
Look around and you will find, no-one's really
colour blind.
As we can tell from the spelling of the word,
the person writing this quote is clearly not American.
(If the goal was to mark the element as misspelt, however, the[u](#the-u-element) element, possibly with a class, would be more appropriate.)
Another example of the [mark](#the-mark-element) 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:
I also have some kittens who are visiting me
these days. They're really cute. I think they like my garden! Maybe I
should adopt a kitten.
In the following snippet, a paragraph of text refers to a specific part of a code fragment.
The highlighted part below is where the error lies:
var i: Integer;
begin
i := 1.1;
end.
This is separate from syntax highlighting, for which[span](#the-span-element) is more appropriate. Combining both, one would get:
The highlighted part below is where the error lies:
vari: Integer;
begini := 1.1;
end.
This is another example showing the use of [mark](#the-mark-element) 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](#the-mark-element) elements in quotes to render in italics.
She knew
Did you notice the subtle joke in the joke on panel 4?
I didn't want to believe. Of course
on some level I realized it was a known-plaintext attack. But I
couldn't admit it until I saw for myself.
(Emphasis mine.) I thought that was great. It's so pedantic, yet it
explains everything neatly.
Note, incidentally, the distinction between the [em](#the-em-element) element in this example, which is part of the original text being quoted, and the [mark](#the-mark-element) element, which is highlighting a part for comment.
The following example shows the difference between denoting the_importance_ of a span of text ([strong](#the-strong-element)) as opposed to denoting the relevance of a span of text ([mark](#the-mark-element)). 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.
Wormhole Physics Introduction
A wormhole in normal conditions can be held open for a
maximum of just under 39 minutes. Conditions that can increase
the time include a powerful energy source coupled to one or both of
the gates connecting the wormhole, and a large gravity well (such as a
black hole).
Momentum is preserved across the wormhole. Electromagnetic
radiation can travel in both directions through a wormhole,
but matter cannot.
When a wormhole is created, a vortex normally forms.
Warning: The vortex caused by the wormhole opening will
annihilate anything in its path. Vortexes can be avoided when
using sufficiently advanced dialing technology.
An obstruction in a gate will prevent it from accepting a
wormhole connection.
The [ruby](#the-ruby-element) 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.
The content model of [ruby](#the-ruby-element) elements consists of one or more of the following sequences:
One or the other of the following:
Phrasing content, but with no [ruby](#the-ruby-element) elements and with no [ruby](#the-ruby-element) element descendants
A single [ruby](#the-ruby-element) element that itself has no [ruby](#the-ruby-element) element descendants
One or the other of the following:
One or more [rt](#the-rt-element) elements
An [rp](#the-rp-element) element followed by one or more [rt](#the-rt-element) elements, each of which is itself followed by an [rp](#the-rp-element) element
The [ruby](#the-ruby-element) and [rt](#the-rt-element) elements can be used for a variety of kinds of annotations, including in particular 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]
At the time of writing, CSS does not yet provide a way to fully control the rendering of the HTML [ruby](#the-ruby-element) element. It is hoped that CSS will be extended to support the styles described below in due course.
Mono-ruby for individual base characters
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.
B
In this example, notice how each annotation corresponds to a single base character.
君子は和して同ぜず。
君くん子しは和わして同どうぜず。
Mono-ruby for compound words (jukugo)
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.
BB
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 [ruby](#the-ruby-element) element.
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.
鬼門の方角を凝視する
鬼き門もんの方ほう角がくを凝ぎょう視しする
Jukugo-ruby
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.
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.
BASE
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.
編集者
編集者editor
Group ruby for Jukuji readings
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:
紫陽花
紫陽花あじさい
Text with both phonetic and semantic annotations (double-sided ruby)
Sometimes, ruby styles described above are combined.
BASE
BASE
Here both a phonetic reading and the meaning are given in ruby annotations. The annotation on the nested [ruby](#the-ruby-element) element gives a mono-ruby phonetic annotation for each base character, while the annotation in the [rt](#the-rt-element) element that is a child of the outer [ruby](#the-ruby-element) element gives the meaning using hiragana.
東南の方角
東とう南なんたつみの方角
This is the same example, but the meaning is given in English instead of Japanese:
東南の方角
東とう南なんSoutheastの方角
Within a [ruby](#the-ruby-element) element that does not have a[ruby](#the-ruby-element) 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 someinter-element whitespace and [rp](#the-rp-element) 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](#the-rt-element) 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](#the-ruby-element) elementrepresents 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. [DOMCORE]
At any particular time, the segmentation and categorisation of content of a [ruby](#the-ruby-element) element is the result that would be obtained from running the following algorithm:
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 [ruby](#the-ruby-element) element for which the algorithm is being run.
If root has a [ruby](#the-ruby-element) element ancestor, then jump to the step labeled end.
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 [rt](#the-rt-element) or[rp](#the-rp-element) element, jump to the step labeled annotation mode.
Set start index to the value of index.
Base mode: If the indexth node incurrent parent is a [ruby](#the-ruby-element) element, and if current parent is the same element asroot, then push a ruby level and then jump to the step labeled start mode.
If the indexth node in current parent is an [rt](#the-rt-element) or[rp](#the-rp-element) element, then set the current base text and then jump to the step labeled annotation mode.
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 [rt](#the-rt-element) element, then push a ruby annotation and jump to the step labeled annotation mode increment.
If the indexth node in current parent is an [rp](#the-rp-element) element, jump to the step labeled annotation mode increment.
If the indexth node in current parent is not a [Text](infrastructure.html#text-0) node, or is a [Text](infrastructure.html#text-0) node that is not inter-element whitespace, then jump to the step labeled base mode.
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 [rt](#the-rt-element) element or an[rp](#the-rp-element) element, then set index to lookahead index and jump to the step labeled_annotation mode_.
If the lookahead indexth node in current parent is not a [Text](infrastructure.html#text-0) node, or is a [Text](infrastructure.html#text-0) node that is not inter-element whitespace, then jump to the step labeled base mode (without further incrementing index, so theinter-element whitespace seen so far becomes part of the next base text segment).
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[ruby](#the-ruby-element) element not described by segments in either of thost lists is implicitly in an ignored segment.
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 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 ofstart 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 ofsaved 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 [rt](#the-rt-element) element that is the indexth node of current parent.
Let annotation range a DOM range whosestart is the boundary point (current parent, index) and whoseend 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".
The [rt](#the-rt-element) element marks the ruby text component of a ruby annotation.
An [rt](#the-rt-element) element that is a child of a [ruby](#the-ruby-element) element represents an annotation (given by its children) for the zero or more nodes of phrasing content that immediately precedes it in the[ruby](#the-ruby-element) element, ignoring [rp](#the-rp-element) elements.
An [rt](#the-rt-element) element that is not a child of a[ruby](#the-ruby-element) element represents the same thing as its children.
The [rp](#the-rp-element) element can be used to provide parentheses around a ruby text component of a ruby annotation, to be shown by user agents that don't support ruby annotations.
An [rp](#the-rp-element) element that is a child of a [ruby](#the-ruby-element) element represents nothing and its contents must be ignored. An [rp](#the-rp-element) element whose parent element is not a [ruby](#the-ruby-element) elementrepresents its children.
The example above, in which each ideograph in the text 漢字 is annotated with its phonetic reading, could be expanded to use [rp](#the-rp-element) so that in legacy user agents the readings are in parentheses:
...
漢字
...
In conforming user agents the rendering would be as above, but in user agents that do not support ruby, the rendering would be:
The [bdi](#the-bdi-element) element represents a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting. [BIDI]
The [dir](dom.html#the-dir-attribute) global attribute defaults to [auto](dom.html#attr-dir-auto) on this element (it never inherits from the parent element like with other elements).
For the purposes of applying the bidirectional algorithm to the contents of a [bdi](#the-bdi-element) element, user agents must treat the element as a paragraph-level container.
For the purposes of applying the bidirectional algorithm to the paragraph-level container that a [bdi](#the-bdi-element) element finds itself within, the [bdi](#the-bdi-element) element must be treated like a U+FFFC OBJECT REPLACEMENT CHARACTER (in the same manner that an image or other inline object is handled).
The requirements on handling the [bdi](#the-bdi-element) element for the bidirectional algorithm may be implemented indirectly through the style layer. For example, an HTML+CSS user agent could implement these requirements by implementing the CSS 'unicode-bidi' property.[CSS]
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 [bdi](#the-bdi-element) 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").
The [bdo](#the-bdo-element) 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]
Authors must specify the [dir](dom.html#the-dir-attribute) 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's [dir](dom.html#the-dir-attribute) attribute is in the rtl state, then for the purposes of the bidirectional 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's [dir](dom.html#the-dir-attribute) attribute is in the ltr, then for the purposes of the bidirectional 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](#the-bdo-element) element for the bidirectional algorithm may be implemented indirectly through the style layer. For example, an HTML+CSS user agent could implement these requirements by implementing the CSS 'unicode-bidi' property.[CSS]
The [span](#the-span-element) element doesn't mean anything on its own, but can be useful when used together with the global attributes, e.g. [class](dom.html#classes), [lang](dom.html#attr-lang), or [dir](dom.html#the-dir-attribute). It represents its children.
In this example, a code fragment is marked up using[span](#the-span-element) elements and [class](dom.html#classes) attributes so that its keywords and identifiers can be color-coded from CSS:
The [br](#the-br-element) element represents a line break.
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.
[br](#the-br-element) elements must be used only for line breaks that are actually part of the content, as in poems or addresses.
The following example is correct usage of the [br](#the-br-element) element:
P. Sherman
42 Wallaby Way
Sydney
[br](#the-br-element) elements must not be used for separating thematic groups in a paragraph.
The following examples are non-conforming, as they abuse the[br](#the-br-element) element:
If a paragraph consists of nothing but a single[br](#the-br-element) element, it represents a placeholder blank line (e.g. as in a template). Such blank lines must not be used for presentation purposes.
Any content inside [br](#the-br-element) elements must not be considered part of the surrounding text.
A [br](#the-br-element) element should separate paragraphs for the purposes of the Unicode bidirectional algorithm. This requirement may be implemented indirectly through the style layer. For example, an HTML+CSS user agent could implement these requirements by implementing the CSS 'unicode-bidi' property. [BIDI][CSS]
The [wbr](#the-wbr-element) element represents a line break opportunity.
For the purposes of applying the bidirectional algorithm to the paragraph-level container that a [wbr](#the-wbr-element) element finds itself within, the [wbr](#the-wbr-element) element must be treated like a U+200B ZERO WIDTH SPACE (i.e. it has no effect).
The requirements on handling the [bdi](#the-bdi-element) element for the bidirectional algorithm may be implemented indirectly through the style layer, e.g. by implementing the suggestions in the rendering section.
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 [wbr](#the-wbr-element) element.
So then he pointed at the tiger and screamed
"thereisnowayyouareevergoingtocatchme"!
Here, especially long lines of code in a program listing have suggested wrapping points given using [wbr](#the-wbr-element) elements.
