4.6 Text-level semantics — HTML5 (original) (raw)

4.5 Grouping content –Table of contents –4.7 Edits

1. 1. 4.6 Text-level semantics
      1. 4.6.1 The a element
      2. 4.6.2 The em element
      3. 4.6.3 The strong element
      4. 4.6.4 The small element
      5. 4.6.5 The s element
      6. 4.6.6 The cite element
      7. 4.6.7 The q element
      8. 4.6.8 The dfn element
      9. 4.6.9 The abbr element
      10. 4.6.10 The time element
      11. 4.6.11 The code element
      12. 4.6.12 The var element
      13. 4.6.13 The samp element
      14. 4.6.14 The kbd element
      15. 4.6.15 The sub and sup elements
      16. 4.6.16 The i element
      17. 4.6.17 The b element
      18. 4.6.18 The u element
      19. 4.6.19 The mark element
      20. 4.6.20 The ruby element
      21. 4.6.21 The rt element
      22. 4.6.22 The rp element
      23. 4.6.23 The bdi element
      24. 4.6.24 The bdo element
      25. 4.6.25 The span element
      26. 4.6.26 The br element
      27. 4.6.27 The wbr element
      28. 4.6.28 Usage summary

4.6 Text-level semantics

4.6.1 The a element

Categories

Flow content.

When the element only contains phrasing content: phrasing content.

Interactive content.

Contexts in which this element can be used:

When the element only contains phrasing content: where phrasing content is expected.

Otherwise: where flow content is expected.

Content model:

Transparent, but there must be no interactive content descendant.

Content attributes:

Global attributes

[href](links.html#attr-hyperlink-href)

[target](links.html#attr-hyperlink-target)

[rel](links.html#attr-hyperlink-rel)

[media](links.html#attr-hyperlink-media)

[hreflang](links.html#attr-hyperlink-hreflang)

[type](links.html#attr-hyperlink-type)

DOM interface:

interface HTMLAnchorElement : HTMLElement { stringifier attribute DOMString href; attribute DOMString target; attribute DOMString rel; readonly attribute DOMTokenList relList; attribute DOMString media; attribute DOMString hreflang; attribute DOMString type;

       attribute DOMString [text](#dom-a-text "dom-a-text");

// URL decomposition IDL attributes attribute DOMString protocol; attribute DOMString host; attribute DOMString hostname; attribute DOMString port; attribute DOMString pathname; attribute DOMString search; attribute DOMString hash; };

If the [a](#the-a-element) element has an [href](links.html#attr-hyperlink-href) attribute, then itrepresents a hyperlink (a hypertext anchor).

If the [a](#the-a-element) element has no [href](links.html#attr-hyperlink-href) attribute, then the elementrepresents a placeholder for where a link might otherwise have been placed, if it had been relevant.

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.

The activation behavior of [a](#the-a-element) elements that create hyperlinks is to run the following steps:

1. If the [click](infrastructure.html#event-click) event in question is not trusted (i.e. a [click()](editing.html#dom-click) method call was the reason for the event being dispatched), and the [a](#the-a-element) element's [target](links.html#attr-hyperlink-target) attribute is such that 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 raise an [INVALID_ACCESS_ERR](common-dom-interfaces.html#invalid%5Faccess%5Ferr) exception and abort these steps.
2. If the target of the [click](infrastructure.html#event-click) event is an [img](embedded-content-1.html#the-img-element) element with an [ismap](embedded-content-1.html#attr-img-ismap) attribute specified, then server-side image map processing must be performed, as follows:
   1. 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-1.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 let y 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.
   2. Let the hyperlink suffix be a U+003F QUESTION MARK character, the value of x expressed as a base-ten integer using ASCII digits, a U+002C COMMA character (,), and the value of y expressed as a base-ten integer using ASCII digits. ASCII digits are the characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9).
3. Finally, the user agent must follow the hyperlink created by the[a](#the-a-element) element. If the steps above defined a hyperlink suffix, then take that into account when following the hyperlink.

a . [text](#dom-a-text)

Same as [textContent](infrastructure.html#textcontent).

The IDL attributes href,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 ofresolving 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:

4.6.2 The em element

Categories

Flow content.

Phrasing content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Phrasing content.

Content attributes:

Global attributes

DOM interface:

Uses [HTMLElement](elements.html#htmlelement).

The [em](#the-em-element) element represents stress emphasis of its contents.

The level of emphasis that a particular piece of content has is given by its number of ancestor [em](#the-em-element) elements.

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

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

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 emphasis 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 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.

4.6.3 The strong element

Categories

Flow content.

Phrasing content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Phrasing content.

Content attributes:

Global attributes

DOM interface:

Uses [HTMLElement](elements.html#htmlelement).

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.

4.6.4 The small element

Categories

Flow content.

Phrasing content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Phrasing content.

Content attributes:

Global attributes

DOM interface:

Uses [HTMLElement](elements.html#htmlelement).

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.

4.6.5 The s element

Categories

Flow content.

Phrasing content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Phrasing content.

Content attributes:

Global attributes

DOM interface:

Uses [HTMLElement](elements.html#htmlelement).

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.

Buy our Iced Tea and Lemonade!

Recommended retail price: $3.99 per bottle

Now selling for just $2.99 a bottle!

4.6.6 The cite element

Categories

Flow content.

Phrasing content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Phrasing content.

Content attributes:

Global attributes

DOM interface:

Uses [HTMLElement](elements.html#htmlelement).

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!.

4.6.7 The q element

Categories

Flow content.

Phrasing content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Phrasing content.

Content attributes:

Global attributes

[cite](#attr-q-cite)

DOM interface:

Uses [HTMLQuoteElement](grouping-content.html#htmlquoteelement).

The [q](#the-q-element) element represents some phrasing content quoted from another source.

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.

4.6.8 The dfn element

Categories

Flow content.

Phrasing content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Phrasing content, but there must be no [dfn](#the-dfn-element) element descendants.

Content attributes:

Global attributes

Also, the [title](#attr-dfn-title) attribute has special semantics on this element.

DOM interface:

Uses [HTMLElement](elements.html#htmlelement).

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 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](elements.html#the-title-attribute) 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 "GDO" is first defined in the first paragraph, then used in the second.

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 and so Hammond ordered the iris to be opened.

4.6.9 The abbr element

Categories

Flow content.

Phrasing content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Phrasing content.

Content attributes:

Global attributes

Also, the [title](#attr-abbr-title) attribute has special semantics on this element.

DOM interface:

Uses [HTMLElement](elements.html#htmlelement).

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](elements.html#the-title-attribute) 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 a [abbr](#the-abbr-element) element with a [title](elements.html#the-title-attribute) 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](elements.html#the-title-attribute) attribute.

Providing an expansion in a [title](elements.html#the-title-attribute) attribute once will not necessarily cause other [abbr](#the-abbr-element) elements in the same document with the same contents but without a [title](elements.html#the-title-attribute) attribute to behave as if they had the same expansion. Every[abbr](#the-abbr-element) element is independent.

4.6.10 The time element

Categories

Flow content.

Phrasing content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Phrasing content, but there must be no [time](#the-time-element) element descendants.

Content attributes:

Global attributes

[datetime](#attr-time-datetime)

[pubdate](#attr-time-pubdate)

DOM interface:

interface HTMLTimeElement : HTMLElement { attribute DOMString dateTime; attribute boolean pubDate; readonly attribute Date valueAsDate; };

The [time](#the-time-element) element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset. [GREGORIAN]

This element is intended as a way to encode modern dates and times in a machine-readable way so that, for example, user agents can offer to add birthday reminders or scheduled events to the user's calendar.

The [time](#the-time-element) element is not intended for encoding times for which a precise date or time cannot be established. For example, it would be inappropriate for encoding times like "one millisecond after the big bang", "the early part of the Jurassic period", or "a winter around 250 BCE".

For dates before the introduction of the Gregorian calendar, authors are encouraged to not use the [time](#the-time-element) element, or else to be very careful about converting dates and times from the period to the Gregorian calendar. This is complicated by the manner in which the Gregorian calendar was phased in, which occurred at different times in different countries, ranging from partway through the 16th century all the way to early in the 20th.

The pubdate attribute is a boolean attribute. If specified, it indicates that the date and time given by the element is the publication date and time of the nearest ancestor[article](sections.html#the-article-element) element, or, if the element has no ancestor[article](sections.html#the-article-element) element, of the document as a whole. If the element has a [pubdate](#attr-time-pubdate) attribute specified, then the element needs a date. For each [article](sections.html#the-article-element) element, there must be no more than one[time](#the-time-element) element with a [pubdate](#attr-time-pubdate) attribute whose nearest ancestor is that [article](sections.html#the-article-element) element. Furthermore, for each[Document](infrastructure.html#document), there must be no more than one[time](#the-time-element) element with a [pubdate](#attr-time-pubdate) attribute that does not have an ancestor [article](sections.html#the-article-element) element.

The datetime attribute, if present, gives the date or time being specified. Otherwise, the date or time is given by the element's contents.

If the element needs a date, and the [datetime](#attr-time-datetime) attribute is present, then the attribute's value must be a valid date string with optional time.

If the element needs a date, but the [datetime](#attr-time-datetime) attribute is not present, then the element's [textContent](infrastructure.html#textcontent) must be a valid date string in content with optional time.

If the element does not need a date, and the [datetime](#attr-time-datetime) attribute is present, then the attribute's value must be a valid date or time string.

If the element does not need a date, but the [datetime](#attr-time-datetime) attribute is not present, then the element's [textContent](infrastructure.html#textcontent) must be a valid date or time string in content.

The date, if any, must be expressed using the Gregorian calendar.

If the [datetime](#attr-time-datetime) attribute is present, the user agent should convey the attribute's value to the user when rendering the element.

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:

(The end date is encoded as one day after the last date of the event because in the iCalendar format, end dates are_exclusive_, not inclusive.)

The [time](#the-time-element) element is not necessary for encoding dates or times. In the following snippet, the time is encoded using[time](#the-time-element), so that it can be restyled (e.g. using XBL2) to match local conventions, while the year is not marked up at all, since marking it up would not be particularly useful, and doing so is thus not allowed.

I usually have a snack at 16:00.

I've liked model trains since at least 1983.

Using a styling technology that supports restyling times, the first paragraph from the above snippet could be rendered as follows:

I usually have a snack at 4pm.

Or it could be rendered as follows:

I usually have a snack at 16h00.

The dateTime IDL attribute must reflect the [datetime](#attr-time-datetime) content attribute.

The pubDate IDL attribute must reflect the [pubdate](#attr-time-pubdate) content attribute.

User agents, to obtain the date, time, and time-zone offset represented by a [time](#the-time-element) element, must follow these steps:

1. If the [datetime](#attr-time-datetime) attribute is present, then use the rules to parse a date or time string with the flag in attribute from the value of that attribute, and let the result be result.
2. Otherwise, use the rules to parse a date or time string with the flag in content from the element's[textContent](infrastructure.html#textcontent), and let the result be result.
3. If result is empty (because the parsing failed), then the date is unknown, the time is unknown, and the time-zone offset is unknown.
4. Otherwise: if result contains a date, then that is the date; if result contains a time, then that is the time; and if result contains a time-zone offset, then the time-zone offset is the element's time-zone offset. (A time-zone offset can only be present if both a date and a time are also present.)

time . [valueAsDate](#dom-time-valueasdate)

Returns a Date object representing the specified date and time.

The valueAsDate IDL attribute must return either null or a new Date object initialised to the relevant value as defined by the following list:

If the date is known but the time is not

The time corresponding to midnight UTC (i.e. the first second) of the given date.

If the time is known but the date is not

The time corresponding to the given time of 1970-01-01, with the time zone UTC.

If both the date and thetime are known

The time corresponding to the date and time, with the given time-zone offset.

If neither the date nor the time are known

The null value.

When a Date object is to be returned, a new one must be constructed.

In the following snippet:

Our first date was a Saturday.

...the [time](#the-time-element) element's [valueAsDate](#dom-time-valueasdate) attribute would have the value 1,158,969,600,000ms.

In the following snippet:

Many people get up at 08:00.

...the [time](#the-time-element) element's [valueAsDate](#dom-time-valueasdate) attribute would have the value 28,800,000ms.

In this example, an article's publication date is marked up using [time](#the-time-element):

Here is another way that could be marked up. In this example, legacy user agents would say "today", while newer user agents would render the time in a locale-specific manner based on the value of the attribute.

Here is the same thing but with the time included only. Because the element is empty, legacy user agents will not show anything useful; user agents that implement this specification, on the other hand, would show the date and time in a locale-specific manner.

4.6.11 The code element

Categories

Flow content.

Phrasing content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Phrasing content.

Content attributes:

Global attributes

DOM interface:

Uses [HTMLElement](elements.html#htmlelement).

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.

4.6.12 The var element

Categories

Flow content.

Phrasing content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Phrasing content.

Content attributes:

Global attributes

DOM interface:

Uses [HTMLElement](elements.html#htmlelement).

The [var](#the-var-element) element represents a variable. This could be an actual variable in a mathematical expression or programming context, or it could just be a term used as a placeholder in prose.

In the paragraph below, the letter "n" is being used as a variable in prose:

If there are n pipes leading to the ice cream factory then I expect at least n 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).

4.6.13 The samp element

Categories

Flow content.

Phrasing content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Phrasing content.

Content attributes:

Global attributes

DOM interface:

Uses [HTMLElement](elements.html#htmlelement).

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:~$ _

4.6.14 The kbd element

Categories

Flow content.

Phrasing content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Phrasing content.

Content attributes:

Global attributes

DOM interface:

Uses [HTMLElement](elements.html#htmlelement).

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...

4.6.15 The sub and sup elements

Categories

Flow content.

Phrasing content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Phrasing content.

Content attributes:

Global attributes

DOM interface:

Use [HTMLElement](elements.html#htmlelement).

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 M^lle Gwendoline and M^me 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 (x_i, y_i). For example, the 10th point has coordinate (x₁₀, y₁₀).

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]

E=mc²

f(x, n) = log₄xⁿ

4.6.16 The i element

Categories

Flow content.

Phrasing content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Phrasing content.

Content attributes:

Global attributes

DOM interface:

Uses [HTMLElement](elements.html#htmlelement).

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 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](elements.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](elements.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.

4.6.17 The b element

Categories

Flow content.

Phrasing content.

Contexts in which this element can be used:

Where phrasing content is expected.

Content model:

Phrasing content.

Content attributes:

Global attributes

DOM interface:

Uses [HTMLElement](elements.html#htmlelement).

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:

var i: Integer;
begin
   i := 1.1;
end.

var i: Integer;
begin
   i := 1.1;
end.

for (j = 0; j < 256; j++) {
  i_t3 = (i_t3 & 0x1ffff) | (j << 17);
  i_t6 = (((((((i_t3 >> 3) ^ i_t3) >> 1) ^ i_t3) >> 8) ^ i_t3) >> 5) & 0xff;
  if (i_t6 == i_t1)
    break;
}