A [p](#the-p-element) element's end tag may be omitted if the[p](#the-p-element) element is immediately followed by an [address](sections.html#the-address-element), [article](sections.html#the-article-element),[aside](sections.html#the-aside-element), [blockquote](#the-blockquote-element), [div](#the-div-element), [dl](#the-dl-element),[fieldset](forms.html#the-fieldset-element), [footer](sections.html#the-footer-element), [form](forms.html#the-form-element), [h1](sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements), [h2](sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements),[h3](sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements), [h4](sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements), [h5](sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements), [h6](sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements), [header](sections.html#the-header-element),[hgroup](obsolete.html#hgroup), [hr](#the-hr-element), [main](#the-main-element), [nav](sections.html#the-nav-element),[ol](#the-ol-element), [p](#the-p-element), [pre](#the-pre-element), [section](sections.html#the-section-element), [table](tabular-data.html#the-table-element), or[ul](#the-ul-element), element, or if there is no more content in the parent element and the parent element is not an [a](text-level-semantics.html#the-a-element) element.
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:
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.
Personal information
Name:
Hide from other users
Address:
There was once an example from Femley,
Whose markup was of dubious quality.
The validator complained,
So the author was pained,
To move the error from the markup to the rhyming.
The [p](#the-p-element) element should not be used when a more specific element is more appropriate.
The following example is technically correct:
Last modified: 2001-04-23
Author: fred@example.com
However, it would be better marked-up as:
Author: fred@example.com
Or:
List elements (in particular, [ol](#the-ol-element) and [ul](#the-ul-element) elements) cannot be children of [p](#the-p-element) 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
wizards,
faster-than-light travel, and
telepathy,
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 fiveparagraphs 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:
For instance, this fantastic sentence has bullets relating to
wizards,
faster-than-light travel, and
telepathy,
and is further discussed below.
Authors wishing to conveniently style such "logical" paragraphs consisting of multiple "structural" paragraphs can use the [div](#the-div-element) element instead of the [p](#the-p-element) element.
Thus for instance the above example could become the following:
For instance, this fantastic sentence has bullets relating to
wizards,
faster-than-light travel, and
telepathy,
and is further discussed below.
This example still has five structural paragraphs, but now the author can style just the[div](#the-div-element) instead of having to consider each part of the example separately.
The [hr](#the-hr-element) 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](#the-hr-element) element to separate topics within the section.
Communication
There are various methods of communication. This section
covers a few of the important ones used by the project.
**[](#the-hr-element)**
Communication stones seem to come in pairs and have mysterious
properties:
They can transfer thoughts in two directions once activated
if used alone.
If used with another device, they can transfer one's
consciousness to another body.
If both stones are used with another device, the
consciousnesses switch bodies.
**[](#the-hr-element)**
Radios use the electromagnetic spectrum in the meter range and
longer.
**[](#the-hr-element)**
Signal flares use the electromagnetic spectrum in the
nanometer range.
Food
All food at the project is rationed:
Potatoes
Two per day
Soup
One bowl per day
**[](#the-hr-element)**
Cooking is done by the chefs on a set rotation.
There is no need for an [hr](#the-hr-element) element between the sections themselves, since the [section](sections.html#the-section-element) elements and the [h1](sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements) 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](#the-hr-element) element.
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.
Maybe it won't be that bad, he told himself. The lie was
comforting enough to get him through the rest of the night's
shift.
**[](#the-hr-element)**
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.
The [hr](#the-hr-element) element does not affect the document's outline.
The [pre](#the-pre-element) 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](#the-pre-element) element start tag is stripped.
Some examples of cases where the [pre](#the-pre-element) element could be used:
Including an e-mail, with paragraphs indicated by blank lines, lists indicated by lines prefixed with a bullet, and so on.
Including fragments of computer code, with structure indicated according to the conventions of that language.
Displaying ASCII art.
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](#the-pre-element) element can be used with a [code](text-level-semantics.html#the-code-element) element; to represent a block of computer output the [pre](#the-pre-element) element can be used with a [samp](text-level-semantics.html#the-samp-element) element. Similarly, the [kbd](text-level-semantics.html#the-kbd-element) element can be used within a [pre](#the-pre-element) element to indicate text that the user is to enter.
In the following snippet, a sample of computer code is presented.
This is the Panel constructor:
function Panel(element, canClose, closeHandler) {
this.element = element;
this.canClose = canClose;
this.closeHandler = function () { if (closeHandler) closeHandler() };
}
In the following snippet, [samp](text-level-semantics.html#the-samp-element) and [kbd](text-level-semantics.html#the-kbd-element) elements are mixed in the contents of a [pre](#the-pre-element) element to show a session of Zork I.
You are in an open field west of a big white house with a boarded
front door.
There is a small mailbox here.
>open mailboxOpening the mailbox reveals:
A leaflet.
>
The following shows a contemporary poem that uses the[pre](#the-pre-element) element to preserve its unusual formatting, which forms an intrinsic part of the poem itself.
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
The [HTMLQuoteElement](#htmlquoteelement) interface is also used by the [q](text-level-semantics.html#the-q-element) element.
The [blockquote](#the-blockquote-element) element represents content that is quoted from another source, optionally with a citation which must be within a [footer](sections.html#the-footer-element) or [cite](text-level-semantics.html#the-cite-element) element, and optionally with in-line changes such as annotations and abbreviations.
Content inside a [blockquote](#the-blockquote-element) other than citations and in-line changes 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](#attr-blockquote-cite) attribute is present, it must be avalid 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](#the-blockquote-element) 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:
[Fred] then said he liked [...] fish.
Quotation marks may be used to delineate between quoted text and annotations within a [blockquote](#the-blockquote-element).
For example, an in-line note provided by the author:
"That monster custom, who all sense doth eat
Of habit's devil," &c. 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."
In the example above, the citation is contained within the [footer](sections.html#the-footer-element) of a [figure](#the-figure-element) element, this groups and associates the information, about the quote, with the quote. The [figcaption](#the-figcaption-element) 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](#the-blockquote-element) element, but must be within a [cite](text-level-semantics.html#the-cite-element) element for in-text attributions or within a [footer](sections.html#the-footer-element) element.
For example, here the attribution is given in a [footer](sections.html#the-footer-element) after the quoted text, to clearly relate the quote to its attribution:
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.
Here the attribution is given in a [cite](text-level-semantics.html#the-cite-element) element on the last line of the quoted text. Note that a link to the author is also included.
The people recognize themselves in their commodities; they find their
soul in their automobile, hi-fi set, split-level home, kitchen equipment.
— **Herbert Marcuse**
Here the attribution is given in a [footer](sections.html#the-footer-element) after the quoted text, and metadata about the reference has been added using theMicrodata syntax (note it could have equally been marked up using RDFA Lite).
... 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.
Heinrich Böll,
The Lost Honor of Katharina Blum,
January 1, 1974
There is no formal method for indicating the markup in a [blockquote](#the-blockquote-element) is from a quoted source. It is suggested that if the [footer](sections.html#the-footer-element) or [cite](text-level-semantics.html#the-cite-element) elements are included and these elements are also being used within a [blockquote](#the-blockquote-element) to identify citations, the elements from the quoted source could be annotated with metadata to identify their origin, for example by using the class attribute (a defined extensibility mechanism).
In this example the source of a quote includes a [cite](text-level-semantics.html#the-cite-element) element, which is annotated using the class attribute:
My favorite book is At Swim-Two-Birds
Here a [blockquote](#the-blockquote-element) element is used in conjunction with a [figure](#the-figure-element) element and its [figcaption](#the-figcaption-element):
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.
Carl Sagan, in "Wonder and Skepticism", from
the Skeptical Enquirer Volume 19, Issue 1 (January-February
1995)
This next example shows the use of [cite](text-level-semantics.html#the-cite-element) alongside[blockquote](#the-blockquote-element):
His next piece was the aptly named Sonnet 130:
My mistress' eyes are nothing like the sun,
Coral is far more red, than her lips red,
...
This example shows how a forum post could use[blockquote](#the-blockquote-element) to show what post a user is replying to. The [article](sections.html#the-article-element) element is used for each post, to mark up the threading.
Next thing you'll be saying they don't get capes and wizard
hats either!
boing -5 points 1 hour ago
narwhals are worse than ceiling cat
fred 1 points 23 minutes ago
I bet a narwhal would love that.
I bet they'd love to peel a banana too.
This example shows the use of a [blockquote](#the-blockquote-element) for short snippets, demonstrating that one does not have to use[p](#the-p-element) elements inside [blockquote](#the-blockquote-element) elements:
He began his list of "lessons" with the following:
One should never assume that his side of
the issue will be recognized, let alone that it will
be conceded to have merits.
He continued with a number of similar points, ending with:
Finally, one should be prepared for the threat
of breakdown in negotiations at any given moment and not
be cowed by the possibility.
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](text-level-semantics.html#the-cite-element) and [blockquote](#the-blockquote-element) elements for this purpose.
The [ol](#the-ol-element) 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](#the-li-element) element child nodes of the [ol](#the-ol-element) 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](#attr-ol-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](#attr-ol-reversed) attribute, and is the number of child [li](#the-li-element) elements otherwise.
The first item in the list has the ordinal value given by the [ol](#the-ol-element) element's [start](#attr-ol-start) attribute, unless that[li](#the-li-element) element has a [value](#attr-li-value) attribute with a value that can be successfully parsed, in which case it has the ordinal value given by that [value](#attr-li-value) attribute.
Each subsequent item in the list has the ordinal value given by its [value](#attr-li-value) attribute, if it has one, or, if it doesn't, the ordinal value of the previous item, plus one if the [reversed](#attr-ol-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](#attr-ol-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.
User agents should render the items of the list in a manner consistent with the state of the [type](#attr-ol-type) attribute of the [ol](#the-ol-element) element. Numbers less than or equal to zero should always use the decimal system regardless of the [type](#attr-ol-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 mustreflect the respective content attributes of the same name. The [start](#dom-ol-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](#the-ol-element) element is therefore appropriate. Compare this list to the equivalent list in the [ul](#the-ul-element) section to see an example of the same items using the [ul](#the-ul-element) element.
I have lived in the following countries (given in the order of when
I first lived there):
Switzerland
United Kingdom
United States
Norway
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:
I have lived in the following countries (given in the order of when
I first lived there):
The [ul](#the-ul-element) 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](#the-li-element) element child nodes of the [ul](#the-ul-element) element.
The following markup shows a list where the order does not matter, and where the [ul](#the-ul-element) element is therefore appropriate. Compare this list to the equivalent list in the[ol](#the-ol-element) section to see an example of the same items using the [ol](#the-ol-element) element.
I have lived in the following countries:
Norway
Switzerland
United Kingdom
United States
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:
An [li](#the-li-element) element's end tag may be omitted if the[li](#the-li-element) element is immediately followed by another [li](#the-li-element) element or if there is no more content in the parent element.
interface HTMLLIElement : HTMLElement {
attribute long value;
};
The [li](#the-li-element) element represents a list item. If its parent element is an [ol](#the-ol-element), or [ul](#the-ul-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](#the-li-element) element.
If the parent element is an [ol](#the-ol-element) element, then the[li](#the-li-element) element has an ordinal value.
If the [value](#attr-li-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](#attr-li-value) attribute is processed relative to the element's parent [ol](#the-ol-element) 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](#dom-li-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](#the-figure-element) element and its [figcaption](#the-figcaption-element) element.
The top 10 movies of all time
Josie and the Pussycats, 2001
Црна мачка, бели мачор, 1998
A Bug's Life, 1998
Toy Story, 1995
Monsters, Inc, 2001
Cars, 2006
Toy Story 2, 1999
Finding Nemo, 2003
The Incredibles, 2004
Ratatouille, 2007
The markup could also be written as follows, using the [reversed](#attr-ol-reversed) attribute on the[ol](#the-ol-element) element:
The top 10 movies of all time
Josie and the Pussycats, 2001
Црна мачка, бели мачор, 1998
A Bug's Life, 1998
Toy Story, 1995
Monsters, Inc, 2001
Cars, 2006
Toy Story 2, 1999
Finding Nemo, 2003
The Incredibles, 2004
Ratatouille, 2007
While it is conforming to include heading elements (e.g. [h1](sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements)) inside [li](#the-li-element) 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.
Zero or more groups each consisting of one or more [dt](#the-dt-element) elements followed by one or more [dd](#the-dd-element) elements, optionally intermixed with script-supporting elements.
The [dl](#the-dl-element) 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](#the-dt-element) elements) followed by one or more values ([dd](#the-dd-element) elements), ignoring any nodes other than [dt](#the-dt-element) and [dd](#the-dd-element) elements. Within a single [dl](#the-dl-element) element, there should not be more than one [dt](#the-dt-element) 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](#the-dd-element) element.
The order of the list of groups, and of the names and values within each group, may be significant.
If a [dl](#the-dl-element) element is empty, it contains no groups.
If a [dl](#the-dl-element) element has one or more non-whitespace[Text](infrastructure.html#text-0) node children, or has child elements that are neither[dt](#the-dt-element) nor [dd](#the-dd-element) elements, all such[Text](infrastructure.html#text-0) nodes and elements, as well as their descendants (including any [dt](#the-dt-element) or [dd](#the-dd-element) elements), do not form part of any groups in that [dl](#the-dl-element).
If a [dl](#the-dl-element) element has one or more [dt](#the-dt-element) element children but no [dd](#the-dd-element) element children, then it consists of one group with names but no values.
If a [dl](#the-dl-element) element has one or more [dd](#the-dd-element) element children but no [dt](#the-dt-element) element children, then it consists of one group with values but no names.
If a [dl](#the-dl-element) element's first [dt](#the-dt-element) or[dd](#the-dd-element) element child is a [dd](#the-dd-element) element, then the first group has no associated name.
If a [dl](#the-dl-element) element's last [dt](#the-dt-element) or[dd](#the-dd-element) element child is a [dt](#the-dt-element) element, then the last group has no associated value.
When a [dl](#the-dl-element) element doesn't match its content model, it is often due to accidentally using [dd](#the-dd-element) elements in the place of [dt](#the-dt-element) 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").
Authors
John
Luke
Editor
Frank
In the following example, one definition is linked to two terms.
color
colour
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.
The following example illustrates the use of the [dl](#the-dl-element) 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").
Last modified time
2004-12-23T23:33Z
Recommended update interval
60s
Authors
Editors
Robert Rothman
Daniel Jackson
The following example shows the [dl](#the-dl-element) 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).
Determine the victory points as follows (use the
first matching case):
If you have exactly five gold coins
You get five victory points
If you have one or more gold coins, and you have one or more silver coins
You get two victory points
If you have one or more silver coins
You get one victory point
Otherwise
You get no victory points
The following snippet shows a [dl](#the-dl-element) element being used as a glossary. Note the use of [dfn](text-level-semantics.html#the-dfn-element) to indicate the word being defined.
Apartment, n.
An execution context grouping one or more threads with one or
more COM objects.
A [dt](#the-dt-element) element's end tag may be omitted if the[dt](#the-dt-element) element is immediately followed by another [dt](#the-dt-element) element or a[dd](#the-dd-element) element.
The [dt](#the-dt-element) element represents the term, or name, part of a term-description group in a description list ([dl](#the-dl-element) element).
The [dt](#the-dt-element) element itself, when used in a [dl](#the-dl-element) element, does not indicate that its contents are a term being defined, but this can be indicated using the[dfn](text-level-semantics.html#the-dfn-element) element.
This example shows a list of frequently asked questions (a FAQ) marked up using the[dt](#the-dt-element) element for questions and the [dd](#the-dd-element) element for answers.
A [dd](#the-dd-element) element's end tag may be omitted if the[dd](#the-dd-element) element is immediately followed by another [dd](#the-dd-element) element or a[dt](#the-dt-element) element, or if there is no more content in the parent element.
The [dd](#the-dd-element) element represents the description, definition, or value, part of a term-description group in a description list ([dl](#the-dl-element) element).
A [dl](#the-dl-element) can be used to define a vocabulary list, like in a dictionary. In the following example, each entry, given by a [dt](#the-dt-element) with a [dfn](text-level-semantics.html#the-dfn-element), has several[dd](#the-dd-element)s, showing the various parts of the definition.
The [figure](#the-figure-element) 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](#the-figure-element), but an entire sentence made of images would be fitting.
The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc.
When a [figure](#the-figure-element) 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](#the-figure-element) 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](#the-figcaption-element) element child of the element, if any, represents the caption of the [figure](#the-figure-element) element's contents. If there is no child[figcaption](#the-figcaption-element) element, then there is no caption.
A [figure](#the-figure-element) 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](#the-figure-element) and [figcaption](#the-figcaption-element) 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](sections.html#the-aside-element) element should be used (and can itself wrap a [figure](#the-figure-element)). For example, a pull quote that repeats content from an[article](sections.html#the-article-element) would be more appropriate in an [aside](sections.html#the-aside-element) than in a[figure](#the-figure-element), 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](#the-figure-element) element to mark up a code listing.
In listing 4 we see the primary core interface
API declaration.
Listing 4. The primary core interface API declaration.
Here we see a [figure](#the-figure-element) element to mark up a photo that is the main content of the page (as in a gallery).
Bubbles at work — My Gallery™
Bubbles at work
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](#the-figure-element) would be inappropriate.
Malinko's comics
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:
...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.
Exhibit A. The alleged rough copy comic.Exhibit B. The Rough Copy trailer.
The case was resolved out of court.
Here, a part of a poem is marked up using [figure](#the-figure-element).
'Twas brillig, and the slithy toves
Did gyre and gimble in the wabe;
All mimsy were the borogoves,
And the mome raths outgrabe.
Jabberwocky (first verse). Lewis Carroll, 1832-98
In this example, which could be part of a much larger work discussing a castle, nested[figure](#the-figure-element) elements are used to provide both a group caption and individual captions for each figure in the group:
The castle through the ages: 1423, 1858, and 1999 respectively.Etching. Anonymous, ca. 1423.Oil-based paint on canvas. Maria Towle, 1858.Film photograph. Peter Jankle, 1999.
The figure is sometimes referenced only implicitly from the content:
Fiscal negotiations stumble in Congress as deadline nears
Barrak Obama and Harry Reid. White House press photograph.
Negotiations in Congress to end the fiscal impasse sputtered on Tuesday, leaving both chambers
grasping for a way to reopen the government and raise the country's borrowing authority with a
Thursday deadline drawing near.
The [figcaption](#the-figcaption-element) element represents a caption or legend for the rest of the contents of the [figcaption](#the-figcaption-element) element's parent [figure](#the-figure-element) element, if any.
The [div](#the-div-element) element has no special meaning at all. Itrepresents its children. It can be used with the [class](dom.html#classes), [lang](dom.html#attr-lang), and [title](dom.html#attr-title) attributes to mark up semantics common to a group of consecutive elements.
Authors are strongly encouraged to view the[div](#the-div-element) element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the [div](#the-div-element) element leads to better accessibility for readers and easier maintainability for authors.
For example, a blog post would be marked up using[article](sections.html#the-article-element), a chapter using [section](sections.html#the-section-element), a page's navigation aids using [nav](sections.html#the-nav-element), and a group of form controls using [fieldset](forms.html#the-fieldset-element).
On the other hand, [div](#the-div-element) 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](#the-div-element) 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:
My use of language and my cats
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.
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.
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"...
I should say "sidewalk" and "apartment" and "color"!
Where flow content is expected, but with no [article](sections.html#the-article-element), [aside](sections.html#the-aside-element), [footer](sections.html#the-footer-element), [header](sections.html#the-header-element) or [nav](sections.html#the-nav-element) element ancestors.
The [main](#the-main-element) element represents the main content of the [body](sections.html#the-body-element) 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](#the-main-element) 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](#the-main-element) element and once navigated to, ensure the next element in the focus order is the first focusable element within the [main](#the-main-element) 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](#the-main-element) element in a document.
Authors must not include the [main](#the-main-element) element as a descendant of an [article](sections.html#the-article-element), [aside](sections.html#the-aside-element), [footer](sections.html#the-footer-element), [header](sections.html#the-header-element) or [nav](sections.html#the-nav-element) element.
The [main](#the-main-element) 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](#the-main-element) element until user agents implement the required role mapping.
...
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](#the-main-element) element.
Skateboards
The skateboard is the way cool kids get around
Longboards
Longboards are a type of skateboard with a longer
wheelbase and larger, softer wheels.
...
...
Electric Skateboards
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.
...
...
Here is a graduation programme the main content section is defined by the use of the [main](#the-main-element) element. Note in this example the [main](#the-main-element) element contains a [nav](sections.html#the-nav-element) element consisting of links to sub sections of the main content.
Graduation Ceremony Summer 2022
The Lawson Academy:
