p
elementinterface HTMLParagraphElement : HTMLElement {};
The p
element represents a paragraph.
While paragraphs are usually represented in visual media by blocks of text that are physically separated from adjacent blocks through blank lines, a style sheet or user agent would be equally justified in presenting paragraph breaks in a different manner, for instance using inline pilcrows (¶).
The following examples are conforming HTML fragments:
<p>The little kitten gently seated himself on a piece of carpet. Later in his life, this would be referred to as the time the cat sat on the mat.</p>
<fieldset> <legend>Personal information</legend> <p> <label>Name: <input name="n"></label> <label><input name="anon" type="checkbox"> Hide from other users</label> </p> <p><label>Address: <textarea name="a"></textarea></label></p> </fieldset>
<p>There was once an example from Femley,<br> Whose markup was of dubious quality.<br> The validator complained,<br> So the author was pained,<br> To move the error from the markup to the rhyming.</p>
The p
element should not be used when a more specific element is more
appropriate.
The following example is technically correct:
<section> <!-- ... --> <p>Last modified: 2001-04-23</p> <p>Author: fred@example.com</p> </section>
However, it would be better marked-up as:
<section> <!-- ... --> <footer>Last modified: 2001-04-23</footer> <address>Author: fred@example.com</address> </section>
Or:
<section> <!-- ... --> <footer> <p>Last modified: 2001-04-23</p> <address>Author: fred@example.com</address> </footer> </section>
List elements (in particular, ol
and ul
elements) cannot be children
of p
elements. When a sentence contains a bulleted list, therefore, one might wonder
how it should be marked up.
For instance, this fantastic sentence has bullets relating to
and is further discussed below.
The solution is to realise that a paragraph, in HTML terms, is not a logical concept, but a structural one. In the fantastic example above, there are actually five paragraphs as defined by this specification: one before the list, one for each bullet, and one after the list.
The markup for the above example could therefore be:
<p>For instance, this fantastic sentence has bullets relating to</p> <ul> <li>wizards, <li>faster-than-light travel, and <li>telepathy, </ul> <p>and is further discussed below.</p>
Authors wishing to conveniently style such "logical" paragraphs consisting of multiple
"structural" paragraphs can use the div
element instead of the p
element.
Thus for instance the above example could become the following:
<div>For instance, this fantastic sentence has bullets relating to <ul> <li>wizards, <li>faster-than-light travel, and <li>telepathy, </ul> and is further discussed below.</div>
This example still has five structural paragraphs, but now the author can style just the
div
instead of having to consider each part of the example separately.
hr
elementinterface HTMLHRElement : HTMLElement {};
The hr
element represents a
paragraph-level thematic break, e.g. a scene change in
a story, or a transition to another topic within a section of a
reference book.
The following fictional extract from a project manual shows two
sections that use the hr
element to separate topics
within the section.
<section> <h1>Communication</h1> <p>There are various methods of communication. This section covers a few of the important ones used by the project.</p> <hr> <p>Communication stones seem to come in pairs and have mysterious properties:</p> <ul> <li>They can transfer thoughts in two directions once activated if used alone.</li> <li>If used with another device, they can transfer one's consciousness to another body.</li> <li>If both stones are used with another device, the consciousnesses switch bodies.</li> </ul> <hr> <p>Radios use the electromagnetic spectrum in the meter range and longer.</p> <hr> <p>Signal flares use the electromagnetic spectrum in the nanometer range.</p> </section> <section> <h1>Food</h1> <p>All food at the project is rationed:</p> <dl> <dt>Potatoes</dt> <dd>Two per day</dd> <dt>Soup</dt> <dd>One bowl per day</dd> </dl> <hr> <p>Cooking is done by the chefs on a set rotation.</p> </section>
There is no need for an hr
element between the
sections themselves, since the section
elements and
the h1
elements imply thematic changes themselves.
The following extract from Pandora's Star by Peter
F. Hamilton shows two paragraphs that precede a scene change and
the paragraph that follows it. The scene change, represented in the
printed book by a gap containing a solitary centered star between
the second and third paragraphs, is here represented using the
hr
element.
<p>Dudley was ninety-two, in his second life, and fast approaching
time for another rejuvenation. Despite his body having the physical
age of a standard fifty-year-old, the prospect of a long degrading
campaign within academia was one he regarded with dread. For a
supposedly advanced civilization, the Intersolar Commonwealth could be
appallingly backward at times, not to mention cruel.</p>
<p><i>Maybe it won't be that bad</i>, he told himself. The lie was
comforting enough to get him through the rest of the night's
shift.</p>
<hr>
<p>The Carlton AllLander drove Dudley home just after dawn. Like the
astronomer, the vehicle was old and worn, but perfectly capable of
doing its job. It had a cheap diesel engine, common enough on a
semi-frontier world like Gralmond, although its drive array was a
thoroughly modern photoneural processor. With its high suspension and
deep-tread tyres it could plough along the dirt track to the
observatory in all weather and seasons, including the metre-deep snow
of Gralmond's winters.</p>
The hr
element does not affect the
document's outline.
pre
elementinterface HTMLPreElement : HTMLElement {};
The pre
element represents a block of
preformatted text, in which structure is represented by typographic
conventions rather than by elements.
In the HTML syntax, a leading
newline character immediately following the pre
element
start tag is stripped.
Some examples of cases where the pre
element could
be used:
Authors are encouraged to consider how preformatted text will be experienced when the formatting is lost, as will be the case for users of speech synthesizers, braille displays, and the like. For cases like ASCII art, it is likely that an alternative presentation, such as a textual description, would be more universally accessible to the readers of the document.
To represent a block of computer code, the pre
element can be used with a code
element; to represent a
block of computer output the pre
element can be used
with a samp
element. Similarly, the kbd
element can be used within a pre
element to indicate
text that the user is to enter.
A newline in a pre
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]
In the following snippet, a sample of computer code is presented.
<p>This is the <code>Panel</code> constructor:</p> <pre><code>function Panel(element, canClose, closeHandler) { this.element = element; this.canClose = canClose; this.closeHandler = function () { if (closeHandler) closeHandler() }; }</code></pre>
In the following snippet, samp
and kbd
elements are mixed in the contents of a pre
element to
show a session of Zork I.
<pre><samp>You are in an open field west of a big white house with a boarded front door. There is a small mailbox here. ></samp> <kbd>open mailbox</kbd> <samp>Opening the mailbox reveals: A leaflet. ></samp></pre>
The following shows a contemporary poem that uses the
pre
element to preserve its unusual formatting, which
forms an intrinsic part of the poem itself.
<pre> maxling it is with a heart heavy that i admit loss of a feline so loved a friend lost to the unknown (night) ~cdr 11dec07</pre>
blockquote
elementcite
interface HTMLQuoteElement : HTMLElement { attribute DOMString cite; };
The HTMLQuoteElement
interface is
also used by the q
element.
The blockquote
element represents a
section that is quoted from another source, optionally with a citation and optionally
with in-line changes such as annotations and abbreviations.
Content inside a blockquote
that is not an in-line change or not within a footer
or cite
element, must be quoted from another source, whose address, if it has one, may be cited in the
cite
attribute.
In cases where a page contains contributions from multiple people, such as comments on a blog post, 'another source' can include text from the same page, written by another person.
If the 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 may allow users to follow such
citation links, but they are primarily intended for private use (e.g. by server-side scripts
collecting statistics about a site's use of quotations), not for readers.
The cite
IDL
attribute must reflect the element's cite
content attribute.
The content of a blockquote
may be abbreviated, may have context added or may have annotations. Any such additions or changes to quoted text must be indicated in the text (at the text level). This may mean the use of notational conventions or explicit remarks, such as "emphasis mine".
For example, in English, abbreviations are traditionally identified using square brackets. Consider a page with the sentence "Fred ate the cracker. He then said he liked apples and fish."; it could be quoted as follows:
<blockquote> <p>[Fred] then said he liked [...] fish.</p> </blockquote>
Quotation marks may be used to delineate between quoted text and annotations
within a blockquote
.
For example, an in-line note provided by the author:
<figure> <blockquote> "That monster custom, who all sense doth eat Of habit's devil," <abbr title="et cetera">&c.</abbr> not in Folio "What a falling off was there ! From me, whose love was of that dignity That it went hand in hand even with the vow I made to her in marriage, and to decline Upon a wretch." </blockquote> <footer> — <cite class="title">Shakespeare manual</cite> by <cite class="author">Frederick Gard Fleay</cite>, p19 (in Google Books) </footer> </figure>
In the example above, the citation is contained within the footer
of a figure
element,
this groups and associates the information, about the quote, with the quote. The figcaption
element was not
used, in this case, as a container for the citation as it is not a caption.
Attribution for the quotation, may be be placed inside the
blockquote
element, but must be within a cite
element for in-text attributions or within a footer
element.
For example, here the attribution is given in a footer
after
the quoted text, to clearly relate the quote to its attribution:
<blockquote> <p>I contend that we are both atheists. I just believe in one fewer god than you do. When you understand why you dismiss all the other possible gods, you will understand why I dismiss yours.</p> <footer>— <cite>Stephen Roberts</cite></footer> </blockquote>
Here the attribution is given in a cite
element on the last line of the quoted text.
Note that a link to the author is also included.
<blockquote> The people recognize themselves in their commodities; they find their soul in their automobile, hi-fi set, split-level home, kitchen equipment. — <cite><a href="http://en.wikipedia.org/wiki/Herbert_Marcuse">Herbert Marcuse</a></cite> </blockquote>
Here the attribution is given in a footer
after
the quoted text, and metadata about the reference has been added using the
Microdata syntax
(note it could have equally been marked up using RDFA Lite).
<blockquote> <p>... she said she would not sign any deposition containing the word "amorous" instead of "advances". For her the difference was of crucial significance, and one of the reasons she had separated from her husband was that he had never been amorous but had consistently made advances.</p> <footer itemscope itemtype="http://schema.org/Book"> <span itemprop="author">Heinrich Böll</span>, <span itemprop="name">The Lost Honor of Katharina Blum</span>, <span itemprop="datePublished">January 1, 1974</span> </footer> </blockquote>
Authors are encouraged to include the original HTML elements used in the source (if any) when
quoting, this will preserve the meaningful semantics of the content. In cases where the source of the quote includes
the footer
or cite
elements and these elements are also being used within a blockquote
to
identify citations, the elements from the quoted source should be commented out. Doing so will remove any conflicts between the semantics in the original source of the quote and citations added in the blockquote
.
In this example the source of a quote includes a cite
element, which is commented out:
<blockquote> <p>My favorite book is <!--<cite>At Swim-Two-Birds</cite>--> <i>At Swim-Two-Birds</i></p> <footer>- <cite>Mike[tm]Smith</cite></footer> </blockquote>
Here a blockquote
element is used in conjunction
with a figure
element and its figcaption
:
<figure> <blockquote> <p>The truth may be puzzling. It may take some work to grapple with. It may be counterintuitive. It may contradict deeply held prejudices. It may not be consonant with what we desperately want to be true. But our preferences do not determine what's true. We have a method, and that method helps us to reach not absolute truth, only asymptotic approaches to the truth — never there, just closer and closer, always finding vast new oceans of undiscovered possibilities. Cleverly designed experiments are the key.</p> </blockquote> <figcaption><cite>Carl Sagan</cite>, in "<cite>Wonder and Skepticism</cite>", from the <cite>Skeptical Enquirer</cite> Volume 19, Issue 1 (January-February 1995)</figcaption> </figure>
This next example shows the use of cite
alongside
blockquote
:
<p>His next piece was the aptly named <cite>Sonnet 130</cite>:</p> <blockquote cite="http://quotes.example.org/s/sonnet130.html"> <p>My mistress' eyes are nothing like the sun,<br> Coral is far more red, than her lips red,<br> ...
This example shows how a forum post could use
blockquote
to show what post a user is replying
to. The article
element is used for each post, to mark
up the threading.
<article> <h1><a href="http://bacon.example.com/?blog=109431">Bacon on a crowbar</a></h1> <article> <header><strong>t3yw</strong> 12 points 1 hour ago</header> <p>I bet a narwhal would love that.</p> <footer><a href="?pid=29578">permalink</a></footer> <article> <header><strong>greg</strong> 8 points 1 hour ago</header> <blockquote><p>I bet a narwhal would love that.</p></blockquote> <p>Dude narwhals don't eat bacon.</p> <footer><a href="?pid=29579">permalink</a></footer> <article> <header><strong>t3yw</strong> 15 points 1 hour ago</header> <blockquote> <blockquote><p>I bet a narwhal would love that.</p></blockquote> <p>Dude narwhals don't eat bacon.</p> </blockquote> <p>Next thing you'll be saying they don't get capes and wizard hats either!</p> <footer><a href="?pid=29580">permalink</a></footer> <article> <article> <header><strong>boing</strong> -5 points 1 hour ago</header> <p>narwhals are worse than ceiling cat</p> <footer><a href="?pid=29581">permalink</a></footer> </article> </article> </article> </article> <article> <header><strong>fred</strong> 1 points 23 minutes ago</header> <blockquote><p>I bet a narwhal would love that.</p></blockquote> <p>I bet they'd love to peel a banana too.</p> <footer><a href="?pid=29582">permalink</a></footer> </article> </article> </article>
This example shows the use of a blockquote
for
short snippets, demonstrating that one does not have to use
p
elements inside blockquote
elements:
<p>He began his list of "lessons" with the following:</p> <blockquote>One should never assume that his side of the issue will be recognized, let alone that it will be conceded to have merits.</blockquote> <p>He continued with a number of similar points, ending with:</p> <blockquote>Finally, one should be prepared for the threat of breakdown in negotiations at any given moment and not be cowed by the possibility.</blockquote> <p>We shall now discuss these points...
Examples of how to
represent a conversation are shown in a later section; it is not
appropriate to use the cite
and blockquote
elements for this purpose.
ol
elementli
element: Palpable content.li
and script-supporting elements.reversed
start
type
interface HTMLOListElement : HTMLElement { attribute boolean reversed; attribute long start; attribute DOMString type; };
The ol
element represents a list of
items, where the items have been intentionally ordered, such that
changing the order would change the meaning of the document.
The items of the list are the li
element child nodes
of the ol
element, in tree order.
The reversed
attribute is a boolean attribute. If present, it
indicates that the list is a descending list (..., 3, 2, 1). If the
attribute is omitted, the list is an ascending list (1, 2, 3,
...).
The start
attribute, if present, must be a valid integer giving
the ordinal value of the first list item.
If the start
attribute is
present, user agents must parse it as an integer, in order to determine the
attribute's value. The default value, used if the attribute is
missing or if the value cannot be converted to a number according to
the referenced algorithm, is 1 if the element has no reversed
attribute, and is the
number of child li
elements otherwise.
The first item in the list has the ordinal value
given by the ol
element's start
attribute, unless that
li
element has a value
attribute with a value that can
be successfully parsed, in which case it has the ordinal
value given by that value
attribute.
Each subsequent item in the list has the ordinal
value given by its value
attribute, if it has one, or, if it doesn't, the ordinal
value of the previous item, plus one if the reversed
is absent, or minus one if
it is present.
The type
attribute
can be used to specify the kind of marker to use in the list, in the
cases where that matters (e.g. because items are to be referenced by
their number/letter). The attribute, if specified, must have a value
that is a case-sensitive match for one of the
characters given in the first cell of one of the rows of the
following table. The type
attribute represents the state
given in the cell in the second column of the row whose first cell
matches the attribute's value; if none of the cells match, or if the
attribute is omitted, then the attribute represents the decimal state.
Keyword | State | Description | Examples for values 1-3 and 3999-4001 | |||||||
---|---|---|---|---|---|---|---|---|---|---|
1 (U+0031)
| decimal | Decimal numbers | 1. | 2. | 3. | ... | 3999. | 4000. | 4001. | ... |
a (U+0061)
| lower-alpha | Lowercase latin alphabet | a. | b. | c. | ... | ewu. | ewv. | eww. | ... |
A (U+0041)
| upper-alpha | Uppercase latin alphabet | A. | B. | C. | ... | EWU. | EWV. | EWW. | ... |
i (U+0069)
| lower-roman | Lowercase roman numerals | i. | ii. | iii. | ... | mmmcmxcix. | i̅v̅. | i̅v̅i. | ... |
I (U+0049)
| upper-roman | Uppercase roman numerals | I. | II. | III. | ... | MMMCMXCIX. | I̅V̅. | I̅V̅I. | ... |
User agents should render the items of the list in a manner
consistent with the state of the type
attribute of the ol
element. Numbers less than or equal to zero should always use the
decimal system regardless of the type
attribute.
For CSS user agents, a mapping for this attribute to the 'list-style-type' CSS property is given in the rendering section (the mapping is straightforward: the states above have the same names as their corresponding CSS values).
The reversed
,
start
, and type
IDL attributes must
reflect the respective content attributes of the same
name. The start
IDL attribute has
the same default as its content attribute.
The following markup shows a list where the order matters, and
where the ol
element is therefore appropriate. Compare
this list to the equivalent list in the ul
section to
see an example of the same items using the ul
element.
<p>I have lived in the following countries (given in the order of when I first lived there):</p> <ol> <li>Switzerland <li>United Kingdom <li>United States <li>Norway </ol>
Note how changing the order of the list changes the meaning of the document. In the following example, changing the relative order of the first two items has changed the birthplace of the author:
<p>I have lived in the following countries (given in the order of when I first lived there):</p> <ol> <li>United Kingdom <li>Switzerland <li>United States <li>Norway </ol>
ul
elementli
element: Palpable content.li
and script-supporting elements.interface HTMLUListElement : HTMLElement {};
The ul
element represents a list of
items, where the order of the items is not important — that
is, where changing the order would not materially change the meaning
of the document.
The items of the list are the li
element child nodes
of the ul
element.
The following markup shows a list where the order does not
matter, and where the ul
element is therefore
appropriate. Compare this list to the equivalent list in the
ol
section to see an example of the same items using
the ol
element.
<p>I have lived in the following countries:</p> <ul> <li>Norway <li>Switzerland <li>United Kingdom <li>United States </ul>
Note that changing the order of the list does not change the meaning of the document. The items in the snippet above are given in alphabetical order, but in the snippet below they are given in order of the size of their current account balance in 2007, without changing the meaning of the document whatsoever:
<p>I have lived in the following countries:</p> <ul> <li>Switzerland <li>Norway <li>United Kingdom <li>United States </ul>
li
elementol
elements.ul
elements.menu
elements whose type
attribute is in the toolbar state.ol
element: value
interface HTMLLIElement : HTMLElement { attribute long value; };
The li
element represents a list
item. If its parent element is an ol
, ul
,
or menu
element, then the element is an item of the
parent element's list, as defined for those elements. Otherwise, the
list item has no defined list-related relationship to any other
li
element.
If the parent element is an ol
element, then the
li
element has an ordinal value.
The value
attribute, if present, must be a valid integer giving
the ordinal value of the list item.
If the value
attribute is
present, user agents must parse it as an integer, in order to determine the
attribute's value. If the attribute's value cannot be converted to a
number, the attribute must be treated as if it was absent. The
attribute has no default value.
The value
attribute is
processed relative to the element's parent ol
element
(q.v.), if there is one. If there is not, the attribute has no
effect.
The value
IDL
attribute must reflect the value of the value
content attribute.
The following example, the top ten movies are listed (in reverse
order). Note the way the list is given a title by using a
figure
element and its figcaption
element.
<figure> <figcaption>The top 10 movies of all time</figcaption> <ol> <li value="10"><cite>Josie and the Pussycats</cite>, 2001</li> <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li> <li value="8"><cite>A Bug's Life</cite>, 1998</li> <li value="7"><cite>Toy Story</cite>, 1995</li> <li value="6"><cite>Monsters, Inc</cite>, 2001</li> <li value="5"><cite>Cars</cite>, 2006</li> <li value="4"><cite>Toy Story 2</cite>, 1999</li> <li value="3"><cite>Finding Nemo</cite>, 2003</li> <li value="2"><cite>The Incredibles</cite>, 2004</li> <li value="1"><cite>Ratatouille</cite>, 2007</li> </ol> </figure>
The markup could also be written as follows, using the reversed
attribute on the
ol
element:
<figure> <figcaption>The top 10 movies of all time</figcaption> <ol reversed> <li><cite>Josie and the Pussycats</cite>, 2001</li> <li><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li> <li><cite>A Bug's Life</cite>, 1998</li> <li><cite>Toy Story</cite>, 1995</li> <li><cite>Monsters, Inc</cite>, 2001</li> <li><cite>Cars</cite>, 2006</li> <li><cite>Toy Story 2</cite>, 1999</li> <li><cite>Finding Nemo</cite>, 2003</li> <li><cite>The Incredibles</cite>, 2004</li> <li><cite>Ratatouille</cite>, 2007</li> </ol> </figure>
While it is conforming to include heading elements
(e.g. h1
) inside li
elements, it likely
does not convey the semantics that the author intended. A heading
starts a new section, so a heading in a list implicitly splits the
list into spanning multiple sections.
dl
elementdt
elements followed by one or more dd
elements, optionally intermixed with script-supporting elements.interface HTMLDListElement : HTMLElement {};
The dl
element represents an
association list consisting of zero or more name-value groups (a
description list). A name-value group consists of one or more names
(dt
elements) followed by one or more values
(dd
elements), ignoring any nodes other than dt
and dd
elements. Within a single dl
element,
there should not be more than one dt
element for each
name.
Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.
The values within a group are alternatives; multiple paragraphs
forming part of the same value must all be given within the same
dd
element.
The order of the list of groups, and of the names and values within each group, may be significant.
If a dl
element is empty, it contains no groups.
If a dl
element has one or more non-whitespace Text
node children, or has child elements that are neither
dt
nor dd
elements, all such
Text
nodes and elements, as well as their descendants
(including any dt
or dd
elements), do not
form part of any groups in that dl
.
If a dl
element has one or more dt
element children but no dd
element children, then it
consists of one group with names but no values.
If a dl
element has one or more dd
element children but no dt
element children, then it
consists of one group with values but no names.
If a dl
element's first dt
or
dd
element child is a dd
element, then the
first group has no associated name.
If a dl
element's last dt
or
dd
element child is a dt
element, then the
last group has no associated value.
When a dl
element doesn't match its
content model, it is often due to accidentally using dd
elements in the place of dt
elements and vice
versa. Conformance checkers can spot such mistakes and might be able
to advise authors how to correctly use the markup.
In the following example, one entry ("Authors") is linked to two values ("John" and "Luke").
<dl> <dt> Authors <dd> John <dd> Luke <dt> Editor <dd> Frank </dl>
In the following example, one definition is linked to two terms.
<dl> <dt lang="en-US"> <dfn>color</dfn> </dt> <dt lang="en-GB"> <dfn>colour</dfn> </dt> <dd> A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three differently filtered analyses of a view. </dd> </dl>
The following example illustrates the use of the dl
element to mark up metadata of sorts. At the end of the example,
one group has two metadata labels ("Authors" and "Editors") and two
values ("Robert Rothman" and "Daniel Jackson").
<dl> <dt> Last modified time </dt> <dd> 2004-12-23T23:33Z </dd> <dt> Recommended update interval </dt> <dd> 60s </dd> <dt> Authors </dt> <dt> Editors </dt> <dd> Robert Rothman </dd> <dd> Daniel Jackson </dd> </dl>
The following example shows the dl
element used to
give a set of instructions. The order of the instructions here is
important (in the other examples, the order of the blocks was not
important).
<p>Determine the victory points as follows (use the first matching case):</p> <dl> <dt> If you have exactly five gold coins </dt> <dd> You get five victory points </dd> <dt> If you have one or more gold coins, and you have one or more silver coins </dt> <dd> You get two victory points </dd> <dt> If you have one or more silver coins </dt> <dd> You get one victory point </dd> <dt> Otherwise </dt> <dd> You get no victory points </dd> </dl>
The following snippet shows a dl
element being used
as a glossary. Note the use of dfn
to indicate the
word being defined.
<dl> <dt><dfn>Apartment</dfn>, n.</dt> <dd>An execution context grouping one or more threads with one or more COM objects.</dd> <dt><dfn>Flat</dfn>, n.</dt> <dd>A deflated tire.</dd> <dt><dfn>Home</dfn>, n.</dt> <dd>The user's login directory.</dd> </dl>
The dl
element is inappropriate for
marking up dialogue. Examples of how to
mark up dialogue are shown below.
dt
elementdd
or dt
elements inside dl
elements.header
, footer
, sectioning content, or heading content descendants.HTMLElement
.The dt
element represents the term, or
name, part of a term-description group in a description list
(dl
element).
The dt
element itself, when used in a
dl
element, does not indicate that its contents are a
term being defined, but this can be indicated using the
dfn
element.
This example shows a list of frequently asked questions (a FAQ)
marked up using the dt
element for questions and the
dd
element for answers.
<article> <h1>FAQ</h1> <dl> <dt>What do we want?</dt> <dd>Our data.</dd> <dt>When do we want it?</dt> <dd>Now.</dd> <dt>Where is it?</dt> <dd>We are not sure.</dd> </dl> </article>
dd
elementdt
or dd
elements inside dl
elements.HTMLElement
.The dd
element represents the
description, definition, or value, part of a term-description group
in a description list (dl
element).
A dl
can be used to define a vocabulary list, like
in a dictionary. In the following example, each entry, given by a
dt
with a dfn
, has several
dd
s, showing the various parts of the definition.
<dl> <dt><dfn>happiness</dfn></dt> <dd class="pronunciation">/'hæ p. nes/</dd> <dd class="part-of-speech"><i><abbr>n.</abbr></i></dd> <dd>The state of being happy.</dd> <dd>Good fortune; success. <q>Oh <b>happiness</b>! It worked!</q></dd> <dt><dfn>rejoice</dfn></dt> <dd class="pronunciation">/ri jois'/</dd> <dd><i class="part-of-speech"><abbr>v.intr.</abbr></i> To be delighted oneself.</dd> <dd><i class="part-of-speech"><abbr>v.tr.</abbr></i> To cause one to be delighted.</dd> </dl>
figure
elementfigcaption
element followed by flow content.figcaption
element.HTMLElement
.The figure
element represents some flow content,
optionally with a caption, that is self-contained (like a complete sentence) and is typically
referenced as a single unit from the main flow of the document.
Self-contained in this context does not necessarily mean independent. For example,
each sentence in a paragraph is self-contained; an image that is part of a sentence would be
inappropriate for figure
, but an entire sentence made of images would be fitting.
When a figure
is referred to from the main content of the document by identifying
it by its caption (e.g. by figure number), it enables such content to be easily moved away from
that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix, without
affecting the flow of the document.
If a figure
element is referenced by its relative position, e.g. "in the
photograph above" or "as the next figure shows", then moving the figure would disrupt the page's
meaning. Authors are encouraged to consider using labels to refer to figures, rather than using
such relative references, so that the page can easily be restyled without affecting the page's
meaning.
The first figcaption
element child of the element, if
any, represents the caption of the figure
element's contents. If there is no child
figcaption
element, then there is no caption.
A figure
element's contents are part of the surrounding flow. If the purpose of
the page is to display the figure, for example a photograph on an image sharing site, the
figure
and figcaption
elements can be used to explicitly provide a
caption for that figure. For content that is only tangentially related, or that serves a separate
purpose than the surrounding flow, the aside
element should be used (and can itself
wrap a figure
). For example, a pull quote that repeats content from an
article
would be more appropriate in an aside
than in a
figure
, because it isn't part of the content, it's a repetition of the content for
the purposes of enticing readers or highlighting key topics.
This example shows the figure
element to mark up a code listing.
<p>In <a href="#l4">listing 4</a> we see the primary core interface API declaration.</p> <figure id="l4"> <figcaption>Listing 4. The primary core interface API declaration.</figcaption> <pre><code>interface PrimaryCore { boolean verifyDataLine(); void sendData(in sequence<byte> data); void initSelfDestruct(); }</code></pre> </figure> <p>The API is designed to use UTF-8.</p>
Here we see a figure
element to mark up a photo.
<figure> <img src="bubbles-work.jpeg" alt="Bubbles, sitting in his office chair, works on his latest project intently."> <figcaption>Bubbles at work</figcaption> </figure>
In this example, we see an image that is not a figure, as well as an image and a
video that are. The first image is literally part of the example's second sentence, so it's not a
self-contained unit, and thus figure
would be inappropriate.
<h2>Malinko's comics</h2> <p>This case centered on some sort of "intellectual property" infringement related to a comic (see Exhibit A). The suit started after a trailer ending with these words: <blockquote> <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!"> </blockquote> <p>...was aired. A lawyer, armed with a Bigger Notebook, launched a preemptive strike using snowballs. A complete copy of the trailer is included with Exhibit B. <figure> <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper."> <figcaption>Exhibit A. The alleged <cite>rough copy</cite> comic.</figcaption> </figure> <figure> <video src="ex-b.mov"></video> <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption> </figure> <p>The case was resolved out of court.
Here, a part of a poem is marked up using figure
.
<figure> <p>'Twas brillig, and the slithy toves<br> Did gyre and gimble in the wabe;<br> All mimsy were the borogoves,<br> And the mome raths outgrabe.</p> <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption> </figure>
In this example, which could be part of a much larger work discussing a castle, nested
figure
elements are used to provide both a group caption and individual captions for
each figure in the group:
<figure> <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption> <figure> <figcaption>Etching. Anonymous, ca. 1423.</figcaption> <img src="castle1423.jpeg" alt="The castle has one tower, and a tall wall around it."> </figure> <figure> <figcaption>Oil-based paint on canvas. Maria Towle, 1858.</figcaption> <img src="castle1858.jpeg" alt="The castle now has two towers and two walls."> </figure> <figure> <figcaption>Film photograph. Peter Jankle, 1999.</figcaption> <img src="castle1999.jpeg" alt="The castle lies in ruins, the original tower all that remains in one piece."> </figure> </figure>
figcaption
elementfigure
element.HTMLElement
.The figcaption
element represents a caption or legend for the rest of
the contents of the figcaption
element's parent figure
element, if any.
div
elementinterface HTMLDivElement : HTMLElement {};
The div
element has no special meaning at all. It
represents its children. It can be used with the class
, lang
, and title
attributes to mark up semantics
common to a group of consecutive elements.
Authors are strongly encouraged to view the
div
element as an element of last resort, for when no
other element is suitable. Use of more appropriate elements instead
of the div
element leads to better accessibility for
readers and easier maintainability for authors.
For example, a blog post would be marked up using
article
, a chapter using section
, a
page's navigation aids using nav
, and a group of form
controls using fieldset
.
On the other hand, div
elements can be useful for
stylistic purposes or to wrap multiple paragraphs within a section
that are all to be annotated in a similar way. In the following
example, we see div
elements used as a way to set the
language of two paragraphs at once, instead of setting the language
on the two paragraph elements separately:
<article lang="en-US"> <h1>My use of language and my cats</h1> <p>My cat's behavior hasn't changed much since her absence, except that she plays her new physique to the neighbors regularly, in an attempt to get pets.</p> <div lang="en-GB"> <p>My other cat, coloured black and white, is a sweetie. He followed us to the pool today, walking down the pavement with us. Yesterday he apparently visited our neighbours. I wonder if he recognises that their flat is a mirror image of ours.</p> <p>Hm, I just noticed that in the last paragraph I used British English. But I'm supposed to write in American English. So I shouldn't say "pavement" or "flat" or "colour"...</p> </div> <p>I should say "sidewalk" and "apartment" and "color"!</p> </article>
main
elementarticle
, aside
,
footer
, header
or nav
element ancestors.HTMLElement
The main
element represents the main content of the body
of a document or application. The main content area consists of content that is directly related to or expands upon
the central topic of a document or central functionality of an application.
The main
element is not sectioning content and has no effect
on the document outline
The main content area of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or applications main function is that of a search form).
User agents that support keyboard navigation of content are strongly encouraged to provide
a method to navigate to the main
element and once navigated to, ensure the next
element in the focus order is the first focusable element within the main
element.
This will provide a simple method for keyboard users to bypass blocks of content such as navigation links.
Authors must not include more than one main
element in a document.
Authors must not include the main
element as a descendant of an article
,
aside
, footer
, header
or nav
element.
The main
element is not suitable for use to identify the main content areas of sub sections of a
document or application. The simplest solution is to not mark up the main content of a sub section at all, and just leave it
as implicit, but an author could use a grouping content or sectioning content element as appropriate.
Authors are advised to use ARIA role="main"
attribute on the
main
element until user agents implement the required role mapping.
<main role="main"> ... </main>
In the following example, we see 2 articles about skateboards (the main topic of a
Web page) the main topic content is identified by the use of the main
element.
<!-- other content --> <main> <h1>Skateboards</h1> <p>The skateboard is the way cool kids get around</p> <article> <h2>Longboards</h2> <p>Longboards are a type of skateboard with a longer wheelbase and larger, softer wheels.</p> <p>... </p> <p>... </p> </article> <article> <h2>Electric Skateboards</h2> <p>These no longer require the propelling of the skateboard by means of the feet; rather an electric motor propels the board, fed by an electric battery.</p> <p>... </p> <p>... </p> </article> </main> <!-- other content -->
Here is a graduation programme the main content section is defined by the use of the main
element.
Note in this example the main
element contains a nav
element consisting of links to
sub sections of the main content.
<!DOCTYPE html> <html> <head>
<title>Graduation Ceremony Summer 2022</title> </head> <body> <header>The Lawson Academy: <nav> <ul> <li><a href="courses.html">Courses</a></li> <li><a href="fees.html">Fees</a></li> <li><a>Graduation</a></li> </ul> </nav> </header> <main> <h1>Graduation</h1> <nav> <ul> <li><a href="#ceremony">Ceremony</a></li> <li><a href="#graduates">Graduates</a></li> <li><a href="#awards">Awards</a></li> </ul> </nav> <H2 id="ceremony">Ceremony</H2> <p>Opening Procession</p> <p>Speech by Valedictorian</p> <p>Speech by Class President</p> <p>Presentation of Diplomas</p> <p>Closing Speech by Headmaster</p> <h2 id="graduates">Graduates</h2> <ul> <li>Eileen Williams</li> <li>Andy Maseyk</li> <li>Blanca Sainz Garcia</li> <li>Clara Faulkner</li> <li>Gez Lemon</li> <li>Eloisa Faulkner</li> </ul> <h2 id="awards">Awards</h2> <ul> <li>Clara Faulkner</li> <li>Eloisa Faulkner</li> <li>Blanca Sainz Garcia</li> </ul> </main> <footer> Copyright 2012 B.lawson</footer> </body> </html>