body
element
article
element
section
element
nav
element
aside
element
h1
,
h2
,
h3
,
h4
,
h5
,
and
h6
elements
hgroup
element
header
element
footer
element
address
element
Support: html5semantic Chrome for Android 64+ Chrome 26+ iOS Safari 7.0+ UC Browser for Android 11.8+ Firefox 21+ IE (limited) 9+ Samsung Internet 4+ Opera Mini (limited) all+ Safari 6.1+ Edge 12+ Android Browser 4.4+ Opera 15+
Source: caniuse.com
body
element
html
element.
onafterprint
onbeforeprint
onbeforeunload
onhashchange
onlanguagechange
onmessage
onmessageerror
onoffline
ononline
onpagehide
onpageshow
onpopstate
onrejectionhandled
onstorage
onunhandledrejection
onunload
[Exposed=Window, HTMLConstructor] interface HTMLBodyElement : HTMLElement {}; HTMLBodyElement includes WindowEventHandlers;
The
body
element
represents
the
contents
of
the
document.
In
conforming
documents,
there
is
only
one
body
element.
The
document.body
IDL
attribute
provides
scripts
with
easy
access
to
a
document's
body
element.
Some
DOM
operations
(for
example,
parts
of
the
drag
and
drop
model)
are
defined
in
terms
of
"
the
body
element
".
This
refers
to
a
particular
element
in
the
DOM,
as
per
the
definition
of
the
term,
and
not
any
arbitrary
body
element.
The
body
element
exposes
as
event
handler
content
attributes
a
number
of
the
event
handlers
of
the
Window
object.
It
also
mirrors
their
event
handler
IDL
attributes
.
The
onblur
,
onerror
,
onfocus
,
onload
,
onresize
,
and
onscroll
event
handlers
of
the
Window
object,
exposed
on
the
body
element,
replace
the
generic
event
handlers
with
the
same
names
normally
supported
by
HTML
elements
.
Thus,
for
example,
a
bubbling
error
event
dispatched
on
a
child
of
the
body
element
of
a
Document
would
first
trigger
the
onerror
event
handler
content
attributes
of
that
element,
then
that
of
the
root
html
element,
and
only
then
would
it
trigger
the
onerror
event
handler
content
attribute
on
the
body
element.
This
is
because
the
event
would
bubble
from
the
target,
to
the
body
,
to
the
html
,
to
the
Document
,
to
the
Window
,
and
the
event
handler
on
the
body
is
watching
the
Window
not
the
body
.
A
regular
event
listener
attached
to
the
body
using
addEventListener()
,
however,
would
be
run
when
the
event
bubbled
through
the
body
and
not
when
it
reaches
the
Window
object.
This page updates an indicator to show whether or not the user is online:
<!DOCTYPE HTML> <html lang="en"> <head> <title>Online or offline?</title> <script> function update(online) { document.getElementById('status').textContent = online ? 'Online' : 'Offline'; } </script> </head> <body ononline="update(true)" onoffline="update(false)" onload="update(navigator.onLine)"> <p>You are: <span id="status">(Unknown)</span></p> </body> </html>
article
element
HTMLElement
.
The
article
element
represents
a
complete,
or
self-contained,
composition
in
a
document,
page,
application,
or
site
and
that
is,
in
principle,
independently
distributable
or
reusable,
e.g.
in
syndication.
This
could
be
a
forum
post,
a
magazine
or
newspaper
article,
a
blog
entry,
a
user-submitted
comment,
an
interactive
widget
or
gadget,
or
any
other
independent
item
of
content.
When
article
elements
are
nested,
the
inner
article
elements
represent
articles
that
are
in
principle
related
to
the
contents
of
the
outer
article.
For
instance,
a
blog
entry
on
a
site
that
accepts
user-submitted
comments
could
represent
the
comments
as
article
elements
nested
within
the
article
element
for
the
blog
entry.
Author
information
associated
with
an
article
element
(q.v.
the
address
element)
does
not
apply
to
nested
article
elements.
When
used
specifically
with
content
to
be
redistributed
in
syndication,
the
article
element
is
similar
in
purpose
to
the
entry
element
in
Atom.
[ATOM]
The
schema.org
microdata
vocabulary
can
be
used
to
provide
the
publication
date
for
an
article
element,
using
one
of
the
CreativeWork
subtypes.
When
the
main
content
of
the
page
(i.e.
excluding
footers,
headers,
navigation
blocks,
and
sidebars)
is
all
one
single
self-contained
composition,
that
content
may
be
marked
with
an
article
,
but
it
is
technically
redundant
in
that
case
(since
it's
self-evident
that
the
page
is
a
single
composition,
as
it
is
a
single
document).
This
example
shows
a
blog
post
using
the
article
element,
with
some
schema.org
annotations:
<article itemscope itemtype="http://schema.org/BlogPosting"> <header> <h1 itemprop="headline">The Very First Rule of Life</h1> <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p> <link itemprop="url" href="?comments=0"> </header> <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p> <p>...</p> <footer> <a itemprop="discussionUrl" href="?comments=1">Show comments...</a> </footer> </article>
Here is that same blog post, but showing some of the comments:
<article itemscope itemtype="http://schema.org/BlogPosting"> <header> <h1 itemprop="headline">The Very First Rule of Life</h1> <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p> <link itemprop="url" href="?comments=0"> </header> <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p> <p>...</p> <section> <h1>Comments</h1> <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c1"> <link itemprop="url" href="#c1"> <footer> <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">George Washington</span> </span></p> <p><time itemprop="commentTime" datetime="2009-10-10">15 minutes ago</time></p> </footer> <p>Yeah! Especially when talking about your lobbyist friends!</p> </article> <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c2"> <link itemprop="url" href="#c2"> <footer> <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">George Hammond</span> </span></p> <p><time itemprop="commentTime" datetime="2009-10-10">5 minutes ago</time></p> </footer> <p>Hey, you have the same first name as me.</p> </article> </section> </article>
Notice
the
use
of
footer
to
give
the
information
for
each
comment
(such
as
who
wrote
it
and
when):
the
footer
element
can
appear
at
the
start
of
its
section
when
appropriate,
such
as
in
this
case.
(Using
header
in
this
case
wouldn't
be
wrong
either;
it's
mostly
a
matter
of
authoring
preference.)
In
this
example,
article
elements
are
used
to
host
widgets
on
a
portal
page.
The
widgets
are
implemented
as
customized
built-in
elements
in
order
to
get
specific
styling
and
scripted
behavior.
<!DOCTYPE HTML> <html lang=en> <title>eHome Portal</title> <script src="/scripts/widgets.js"> <link rel=stylesheet href="/styles/main.css"> <article is="stock-widget"> <h1>Stocks</h1> <table> <thead> <tr> <th> Stock <th> Value <th> Delta <tbody> <template> <tr> <td> <td> <td> </template> </table> <p> <input type=button value="Refresh" onclick="this.parentElement.refresh()"> </article> <article is="news-widget"> <h1>News</h1> <ul> <template> <li> <p><img> <strong></strong> <p> </template> </ul> <p> <input type=button value="Refresh" onclick="this.parentElement.refresh()"> </article>
section
element
HTMLElement
.
The
section
element
represents
a
generic
section
of
a
document
or
application.
A
section,
in
this
context,
is
a
thematic
grouping
of
content,
typically
with
a
heading.
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.
Authors
are
encouraged
to
use
the
article
element
instead
of
the
section
element
when
it
would
make
sense
to
syndicate
the
contents
of
the
element.
The
section
element
is
not
a
generic
container
element.
When
an
element
is
needed
only
for
styling
purposes
or
as
a
convenience
for
scripting,
authors
are
encouraged
to
use
the
div
element
instead.
A
general
rule
is
that
the
section
element
is
appropriate
only
if
the
element's
contents
would
be
listed
explicitly
when
used
in
the
document's
outline
conjunction
with
a
heading
.
In the following example, we see an article (part of a larger Web page) about apples, containing two short sections.
<article> <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup> <p>The apple is the pomaceous fruit of the apple tree.</p> <section> <h1>Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p> </section> <section> <h1>Granny Smith</h1> <p>These juicy, green apples make a great filling for apple pies.</p> </section> </article>
Notice
how
the
use
of
section
means
that
the
author
can
use
h1
elements
throughout,
without
having
to
worry
about
whether
a
particular
section
is
at
the
top
level,
the
second
level,
the
third
level,
and
so
on.
Here is a graduation programme with two sections, one for the list of people graduating, and one for the description of the ceremony. (The markup in this example features an uncommon style sometimes used to minimize the amount of inter-element whitespace .)
<!DOCTYPE Html> <Html Lang=En ><Head ><Title >Graduation Ceremony Summer 2022</Title ></Head ><Body ><H1 >Graduation</H1 ><Section ><H1 >Ceremony</H1 ><P >Opening Procession</P ><P >Speech by Validactorian</P ><P >Speech by Class President</P ><P >Presentation of Diplomas</P ><P >Closing Speech by Headmaster</P ></Section ><Section ><H1 >Graduates</H1 ><Ul ><Li >Molly Carpenter</Li ><Li >Anastasia Luccio</Li ><Li >Ebenezar McCoy</Li ><Li >Karrin Murphy</Li ><Li >Thomas Raith</Li ><Li >Susan Rodriguez</Li ></Ul ></Section ></Body ></Html>
In this example, a book author has marked up some sections as chapters and some as appendices, and uses CSS to style the headers in these two classes of section differently.
<style> section { border: double medium; margin: 2em; } section.chapter h1 { font: 2em Roboto, Helvetica Neue, sans-serif; } section.appendix h1 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; } </style> <header> <hgroup> <h1>My Book</h1> <h2>A sample with not much content</h2> </hgroup> <p><small>Published by Dummy Publicorp Ltd.</small></p> </header> <section class="chapter"> <h1>My First Chapter</h1> <p>This is the first of my chapters. It doesn't say much.</p> <p>But it has two paragraphs!</p> </section> <section class="chapter"> <h1>It Continues: The Second Chapter</h1> <p>Bla dee bla, dee bla dee bla. Boom.</p> </section> <section class="chapter"> <h1>Chapter Three: A Further Example</h1> <p>It's not like a battle between brightness and earthtones would go unnoticed.</p> <p>But it might ruin my story.</p> </section> <section class="appendix"> <h1>Appendix A: Overview of Examples</h1> <p>These are demonstrations.</p> </section> <section class="appendix"> <h1>Appendix B: Some Closing Remarks</h1> <p>Hopefully this long example shows that you <em>can</em> style sections, so long as they are used to indicate actual sections.</p> </section>
nav
element
HTMLElement
.
The
nav
element
represents
a
section
of
a
page
that
links
to
other
pages
or
to
parts
within
the
page:
a
section
with
navigation
links.
Not
all
groups
of
links
on
a
page
need
to
be
in
a
nav
element
—
the
element
is
primarily
intended
for
sections
that
consist
of
major
navigation
blocks.
In
particular,
it
is
common
for
footers
to
have
a
short
list
of
links
to
various
pages
of
a
site,
such
as
the
terms
of
service,
the
home
page,
and
a
copyright
page.
The
footer
element
alone
is
sufficient
for
such
cases;
while
a
nav
element
can
be
used
in
such
cases,
it
is
usually
unnecessary.
User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip or provide on request (or both).
In
the
following
example,
there
are
two
nav
elements,
one
for
primary
navigation
around
the
site,
and
one
for
secondary
navigation
around
the
page
itself.
<body> <h1>The Wiki Center Of Exampland</h1> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/events">Current Events</a></li> ...more... </ul> </nav> <article> <header> <h1>Demos in Exampland</h1> <p>Written by A. N. Other.</p> </header> <nav> <ul> <li><a href="#public">Public demonstrations</a></li> <li><a href="#destroy">Demolitions</a></li> ...more... </ul> </nav> <div> <section id="public"> <h1>Public demonstrations</h1> <p>...more...</p> </section> <section id="destroy"> <h1>Demolitions</h1> <p>...more...</p> </section> ...more... </div> <footer> <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p> </footer> </article> <footer> <p><small>© copyright 1998 Exampland Emperor</small></p> </footer> </body>
In the following example, the page has several places where links are present, but only one of those places is considered a navigation section.
<body itemscope itemtype="http://schema.org/Blog"> <header> <h1>Wake up sheeple!</h1> <p><a href="news.html">News</a> - <a href="blog.html">Blog</a> - <a href="forums.html">Forums</a></p> <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p> <nav> <h1>Navigation</h1> <ul> <li><a href="articles.html">Index of all articles</a></li> <li><a href="today.html">Things sheeple need to wake up for today</a></li> <li><a href="successes.html">Sheeple we have managed to wake</a></li> </ul> </nav> </header> <main> <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting"> <header> <h1 itemprop="headline">My Day at the Beach</h1> </header> <div itemprop="articleBody"> <p>Today I went to the beach and had a lot of fun.</p> ...more content... </div> <footer> <p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p> </footer> </article> ...more blog posts... </main> <footer> <p>Copyright © <span itemprop="copyrightYear">2010</span> <span itemprop="copyrightHolder">The Example Company</span> </p> <p><a href="about.html">About</a> - <a href="policy.html">Privacy Policy</a> - <a href="contact.html">Contact Us</a></p> </footer> </body>
You can also see microdata annotations in the above example that use the schema.org vocabulary to provide the publication date and other metadata about the blog post.
A
nav
element
doesn't
have
to
contain
a
list,
it
can
contain
other
kinds
of
content
as
well.
In
this
navigation
block,
links
are
provided
in
prose:
<nav> <h1>Navigation</h1> <p>You are on my home page. To the north lies <a href="/blog">my blog</a>, from whence the sounds of battle can be heard. To the east you can see a large mountain, upon which many <a href="/school">school papers</a> are littered. Far up thus mountain you can spy a little figure who appears to be me, desperately scribbling a <a href="/school/thesis">thesis</a>.</p> <p>To the west are several exits. One fun-looking exit is labeled <a href="https://games.example.com/">"games"</a>. Another more boring-looking exit is labeled <a href="https://isp.example.net/">ISP™</a>.</p> <p>To the south lies a dark and dank <a href="/about">contacts page</a>. Cobwebs cover its disused entrance, and at one point you see a rat run quickly out of the page.</p> </nav>
In
this
example,
nav
is
used
in
an
e-mail
application,
to
let
the
user
switch
folders:
<p><input type=button value="Compose" onclick="compose()"></p> <nav> <h1>Folders</h1> <ul> <li> <a href="/inbox" onclick="return openFolder(this.href)">Inbox</a> <span class=count></span> <li> <a href="/sent" onclick="return openFolder(this.href)">Sent</a> <li> <a href="/drafts" onclick="return openFolder(this.href)">Drafts</a> <li> <a href="/trash" onclick="return openFolder(this.href)">Trash</a> <li> <a href="/customers" onclick="return openFolder(this.href)">Customers</a> </ul> </nav>
aside
element
HTMLElement
.
The
aside
element
represents
a
section
of
a
page
that
consists
of
content
that
is
tangentially
related
to
the
content
around
the
aside
element,
and
which
could
be
considered
separate
from
that
content.
Such
sections
are
often
represented
as
sidebars
in
printed
typography.
The
element
can
be
used
for
typographical
effects
like
pull
quotes
or
sidebars,
for
advertising,
for
groups
of
nav
elements,
and
for
other
content
that
is
considered
separate
from
the
main
content
of
the
page.
It's
not
appropriate
to
use
the
aside
element
just
for
parentheticals,
since
those
are
part
of
the
main
flow
of
the
document.
The following example shows how an aside is used to mark up background material on Switzerland in a much longer news story on Europe.
<aside> <h1>Switzerland</h1> <p>Switzerland, a land-locked country in the middle of geographic Europe, has not joined the geopolitical European Union, though it is a signatory to a number of European treaties.</p> </aside>
The following example shows how an aside is used to mark up a pull quote in a longer article.
... <p>He later joined a large company, continuing on the same work. <q>I love my job. People ask me what I do for fun when I'm not at work. But I'm paid to do my hobby, so I never know what to answer. Some people wonder what they would do if they didn't have to work... but I know what I would do, because I was unemployed for a year, and I filled that time doing exactly what I do now.</q></p> <aside> <q> People ask me what I do for fun when I'm not at work. But I'm paid to do my hobby, so I never know what to answer. </q> </aside> <p>Of course his work — or should that be hobby? — isn't his only passion. He also enjoys other pleasures.</p> ...
The
following
extract
shows
how
aside
can
be
used
for
blogrolls
and
other
side
content
on
a
blog:
<body> <header> <h1>My wonderful blog</h1> <p>My tagline</p> </header> <aside> <!-- this aside contains two sections that are tangentially related to the page, namely, links to other blogs, and links to blog posts from this blog --> <nav> <h1>My blogroll</h1> <ul> <li><a href="https://blog.example.com/">Example Blog</a> </ul> </nav> <nav> <h1>Archives</h1> <ol reversed> <li><a href="/last-post">My last post</a> <li><a href="/first-post">My first post</a> </ol> </nav> </aside> <aside> <!-- this aside is tangentially related to the page also, it contains twitter messages from the blog author --> <h1>Twitter Feed</h1> <blockquote cite="https://twitter.example.net/t31351234"> I'm on vacation, writing my blog. </blockquote> <blockquote cite="https://twitter.example.net/t31219752"> I'm going to go on vacation soon. </blockquote> </aside> <article> <!-- this is a blog post --> <h1>My last post</h1> <p>This is my last post.</p> <footer> <p><a href="/last-post" rel=bookmark>Permalink</a> </footer> </article> <article> <!-- this is also a blog post --> <h1>My first post</h1> <p>This is my first post.</p> <aside> <!-- this aside is about the blog post, since it's inside the <article> element; it would be wrong, for instance, to put the blogroll here, since the blogroll isn't really related to this post specifically, only to the page as a whole --> <h1>Posting</h1> <p>While I'm thinking about it, I wanted to say something about posting. Posting is fun!</p> </aside> <footer> <p><a href="/first-post" rel=bookmark>Permalink</a> </footer> </article> <footer> <nav> <a href="/archives">Archives</a> — <a href="/about">About me</a> — <a href="/copyright">Copyright</a> </nav> </footer> </body>
h1
,
h2
,
h3
,
h4
,
h5
,
and
h6
elements
hgroup
element.
[Exposed=Window, HTMLConstructor] interface HTMLHeadingElement : HTMLElement {};
These
elements
represent
headings
for
their
sections.
The
semantics
and
meaning
of
these
elements
are
defined
in
the
section
on
headings
and
sections
.
As far as their respective document outlines (their heading and section structures) are concerned, these two snippets are semantically equivalent:
<body> <h1>Let's call it a draw(ing surface)</h1> <h2>Diving in</h2> <h2>Simple shapes</h2> <h2>Canvas coordinates</h2> <h3>Canvas coordinates diagram</h3> <h2>Paths</h2> </body>
<body> <h1>Let's call it a draw(ing surface)</h1> <section> <h1>Diving in</h1> </section> <section> <h1>Simple shapes</h1> </section> <section> <h1>Canvas coordinates</h1> <section> <h1>Canvas coordinates diagram</h1> </section> </section> <section> <h1>Paths</h1> </section> </body>
Authors might prefer the former style for its terseness, or the latter style for its convenience in the face of heavy editing; which is best is purely an issue of preferred authoring style.
The two styles can be combined, for compatibility with legacy tools while still future-proofing for when that compatibility is no longer needed. This third snippet again has the same outline as the previous two:
<body> <h1>Let's call it a draw(ing surface)</h1> <section> <h2>Diving in</h2> </section> <section> <h2>Simple shapes</h2> </section> <section> <h2>Canvas coordinates</h2> <section> <h3>Canvas coordinates diagram</h3> </section> </section> <section> <h2>Paths</h2> </section> </body>
hgroup
element
h1
,
h2
,
h3
,
h4
,
h5
,
h6
,
and
template
elements.
HTMLElement
.
The
hgroup
element
represents
the
heading
of
a
section,
which
consists
of
all
the
h1
–
h6
element
children
of
the
hgroup
element.
The
element
is
can
be
used
to
group
a
set
of
h1
–
h6
elements
when
the
for
a
heading
that
has
multiple
levels,
such
as
subheadings,
alternative
titles,
or
taglines.
The
rank
of
an
hgroup
element
is
the
rank
remainder
of
the
highest-ranked
h1
–
h6
element
descendant
semantics
and
meaning
of
the
hgroup
element,
if
there
including
what
it
represents
,
are
any
such
elements,
or
otherwise
the
same
as
for
an
h1
element
(the
highest
rank).
Other
h1
–
h6
elements
of
heading
content
defined
in
the
hgroup
element
indicate
subheadings
or
subtitles
or
(secondary)
alternative
titles.
The
section
on
headings
and
sections
defines
how
hgroup
elements
are
assigned
to
individual
sections.
.
Here are some examples of valid headings.
<hgroup> <h1>The reality dysfunction</h1> <h2>Space is not the only void</h2> </hgroup>
<hgroup> <h1>Dr. Strangelove</h1> <h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2> </hgroup>
The
point
of
using
hgroup
in
these
examples
is
to
prevent
the
h2
element
(which
acts
as
a
secondary
title)
from
creating
a
separate
section
heading
of
its
own
in
any
outline
and
to
instead
cause
the
contents
of
the
h2
to
be
shown
in
rendered
output
from
the
outline
algorithm
in
some
way
to
indicate
that
it
is
not
the
title
of
a
separate
section
but
instead
just
a
secondary
title
in
a
group
of
titles.
own.
How
a
user
agent
exposes
such
multi-level
headings
in
user
interfaces
(e.g.
(e.g.,
in
tables
of
contents
or
search
results)
is
left
open
to
implementers,
as
it
is
a
user
interface
issue.
The
first
example
above
could
be
rendered
as:
The reality dysfunction: Space is not the only void
Alternatively, it could look like this:
The reality dysfunction (Space is not the only void)
In interfaces where a title can be rendered on multiple lines, it could be rendered as follows, maybe with the first line in a bigger font size:
The reality dysfunction Space is not the only void
The
following
two
examples
show
ways
in
which
two
h1
headings
could
be
used
within
an
hgroup
element
to
group
the
US
and
UK
names
for
the
same
movie.
<hgroup> <h1>The Avengers</h1> <h1>Avengers Assemble</h1> </hgroup> <hgroup> <h1>Avengers Assemble</h1> <h1>The Avengers</h1> </hgroup>
The first example above shows how the movie names might be grouped in a publication in the US, with the US name The Avengers as the (primary) title, and the UK name Avengers Assemble as the (secondary) alternative title. The second example above shows how the movie names might be grouped in a publication in the UK, with the UK name as the (primary) title, and the US name as the (secondary) alternative title.
In
both
cases
it
is
important
to
note
the
use
of
the
hgroup
element
to
group
the
two
titles
indicates
that
the
titles
are
not
equivalent;
instead
the
first
h1
gives
the
(primary)
title
while
the
second
gives
the
(secondary)
alternative
title.
Even
though
both
the
title
and
alternative
title
are
marked
up
with
h1
elements,
in
a
rendered
view
of
output
from
the
outline
algorithm,
the
second
h1
in
the
hgroup
will
likely
be
shown
in
some
way
that
clearly
indicates
it
is
secondary;
for
example:
In a US publication:
The Avengers (Avengers Assemble)
In a UK publication:
Avengers Assemble (The Avengers)
In
the
following
example,
an
hgroup
element
is
used
to
mark
up
a
two-level
heading
in
a
wizard-style
dialog
box:
<dialog onclose="walletSetup.continue(this.returnValue)"> <hgroup> <h1>Wallet Setup</h1> <h2>Configure your Wallet funding source</h2> </hgroup> <p>Your Wallet can be used to buy wands at the merchant in town, to buy potions from travelling salesmen you may find in the dungeons, and to pay for mercenaries.</p> <p>We support two payment sources:</p> <form method=dialog> <fieldset oninput="this.getElementsByTagName('input')[0].checked = true"> <legend> <label> <input type=radio name=payment-type value=cc> Credit Card </label> </legend> <p><label>Name on card: <input name=cc1 autocomplete="section-cc cc-name" placeholder="Y. Name"></label> <p><label>Card number: <input name=cc2 inputmode=numeric autocomplete="section-cc cc-number" placeholder="6331 1019 9999 0016"></label> <p><label>Expiry Date: <input name=cc3 type=month autocomplete="section-cc cc-exp" placeholder="2020-02"></label> <p><label>Security Code: <input name=cc4 inputmode=numeric autocomplete="section-cc cc-csc" placeholder="246"></label> </fieldset> <fieldset oninput="this.getElementsByTagName('input')[0].checked = true"> <legend> <label> <input type=radio name=payment-type value=bank> Checking Account </label> </legend> <p><label>Name on account: <input name=bank1 autocomplete="section-bank cc-name"></label> <p><label>Routing number: <input name=bank2 inputmode=numeric></label> <p><label>Account number: <input name=bank3 inputmode=numeric></label> </fieldset> <button type=submit value="back"> ← Back </button> <button type=submit value="next"> Next → </button> </form> </dialog>
header
element
header
or
footer
element
descendants.
HTMLElement
.
The
header
element
represents
a
group
of
introductory
or
navigational
aids.
A
header
element
is
intended
to
usually
contain
the
section's
heading
(an
h1
–
h6
element
or
an
hgroup
element),
but
this
is
not
required.
The
header
element
can
also
be
used
to
wrap
a
section's
table
of
contents,
a
search
form,
or
any
relevant
logos.
Here are some sample headers. This first one is for a game:
<header> <p>Welcome to...</p> <h1>Voidwars!</h1> </header>
The following snippet shows how the element can be used to mark up a specification's header:
<header> <hgroup> <h1>Fullscreen API</h1> <h2>Living Standard — Last Updated 19 October 2015</h2> </hgroup> <dl> <dt>Participate:</dt> <dd><a href="https://github.com/whatwg/fullscreen">GitHub whatwg/fullscreen</a></dd> <dt>Commits:</dt> <dd><a href="https://github.com/whatwg/fullscreen/commits">GitHub whatwg/fullscreen/commits</a></dd> </dl> </header>
The
header
element
is
not
sectioning
content
;
it
doesn't
introduce
a
new
section.
.
In
this
example,
the
page
has
a
page
heading
given
by
the
h1
element,
and
two
subsections
whose
headings
are
given
by
h2
elements.
The
content
after
the
header
element
is
still
part
of
the
last
subsection
started
in
the
header
element,
because
the
Another
example
header
element
doesn't
take
part
in
the
outline
algorithm.
for
a
game:
<body> <header> <h1>Little Green Guys With Guns</h1> <nav> <ul> <li><a href="/games">Games</a> <li><a href="/forum">Forum</a> <li><a href="/download">Download</a> </ul> </nav><h2>Important News</h2> <!-- this starts a second subsection --> <!-- this is part of the subsection entitled "Important News" --><h2>Important News</h2> <p>To play today's games you will need to update your client.</p><h2>Games</h2> <!-- this starts a third subsection --><h2>Games</h2> </header> <p>You have three active games:</p><!-- this is still part of the subsection entitled "Games" -->...
footer
element
Spec bugs: 12990
header
or
footer
element
descendants.
HTMLElement
.
The
footer
element
represents
a
footer
for
its
nearest
ancestor
sectioning
content
or
sectioning
root
body
element.
A
footer
typically
contains
information
about
its
section
such
as
who
wrote
it,
links
to
related
documents,
copyright
data,
and
the
like.
When
the
footer
element
contains
entire
sections,
they
represent
appendices,
indexes,
long
colophons,
verbose
license
agreements,
and
other
such
content.
Contact
information
for
the
author
or
editor
of
a
section
belongs
in
an
address
element,
possibly
itself
inside
a
footer
.
Bylines
and
other
information
that
could
be
suitable
for
both
a
header
or
a
footer
can
be
placed
in
either
(or
neither).
The
primary
purpose
of
these
elements
is
merely
to
help
the
author
write
self-explanatory
markup
that
is
easy
to
maintain
and
style;
they
are
not
intended
to
impose
specific
structures
on
authors.
Footers don't necessarily have to appear at the end of a section, though they usually do.
When
the
nearest
ancestor
sectioning
content
or
sectioning
root
body
element
is
the
body
element
,
then
it
applies
to
the
whole
page.
The
footer
element
is
not
sectioning
content
;
it
doesn't
introduce
a
new
section.
Here is a page with two footers, one at the top and one at the bottom, with the same content:
<body> <footer><a href="../">Back to index...</a></footer> <hgroup> <h1>Lorem ipsum</h1> <h2>The ipsum of all lorems</h2> </hgroup> <p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <footer><a href="../">Back to index...</a></footer> </body>
Here
is
an
example
which
shows
the
footer
element
being
used
both
for
a
site-wide
footer
and
for
a
section
footer.
<!DOCTYPE HTML> <HTML LANG="en"><HEAD> <TITLE>The Ramblings of a Scientist</TITLE> <BODY> <H1>The Ramblings of a Scientist</H1> <ARTICLE> <H1>Episode 15</H1> <VIDEO SRC="/fm/015.ogv" CONTROLS PRELOAD> <P><A HREF="/fm/015.ogv">Download video</A>.</P> </VIDEO> <FOOTER> <!-- footer for article --> <P>Published <TIME DATETIME="2009-10-21T18:26-07:00">on 2009/10/21 at 6:26pm</TIME></P> </FOOTER> </ARTICLE> <ARTICLE> <H1>My Favorite Trains</H1> <P>I love my trains. My favorite train of all time is a Köf.</P> <P>It is fun to see them pull some coal cars because they look so dwarfed in comparison.</P> <FOOTER> <!-- footer for article --> <P>Published <TIME DATETIME="2009-09-15T14:54-07:00">on 2009/09/15 at 2:54pm</TIME></P> </FOOTER> </ARTICLE> <FOOTER> <!-- site wide footer --> <NAV> <P><A HREF="/credits.html">Credits</A> — <A HREF="/tos.html">Terms of Service</A> — <A HREF="/index.html">Blog Index</A></P> </NAV> <P>Copyright © 2009 Gordon Freeman</P> </FOOTER> </BODY> </HTML>
Some site designs have what is sometimes referred to as "fat footers" — footers that contain a lot of material, including images, links to other articles, links to pages for sending feedback, special offers... in some ways, a whole "front page" in the footer.
This fragment shows the bottom of a page on a site with a "fat footer":
... <footer> <nav> <section> <h1>Articles</h1> <p><img src="images/somersaults.jpeg" alt=""> Go to the gym with our somersaults class! Our teacher Jim takes you through the paces in this two-part article. <a href="articles/somersaults/1">Part 1</a> · <a href="articles/somersaults/2">Part 2</a></p> <p><img src="images/kindplus.jpeg"> Tired of walking on the edge of a clif<!-- sic -->? Our guest writer Lara shows you how to bumble your way through the bars. <a href="articles/kindplus/1">Read more...</a></p> <p><img src="images/crisps.jpeg"> The chips are down, now all that's left is a potato. What can you do with it? <a href="articles/crisps/1">Read more...</a></p> </section> <ul> <li> <a href="/about">About us...</a> <li> <a href="/feedback">Send feedback!</a> <li> <a href="/sitemap">Sitemap</a> </ul> </nav> <p><small>Copyright © 2015 The Snacker — <a href="/tos">Terms of Service</a></small></p> </footer> </body>
address
element
header
,
footer
,
or
address
element
descendants.
HTMLElement
.
The
address
element
represents
the
contact
information
for
its
nearest
article
or
body
element
ancestor.
If
that
is
the
body
element
,
then
the
contact
information
applies
to
the
document
as
a
whole.
For example, a page at the W3C Web site related to HTML might include the following contact information:
<ADDRESS> <A href="../People/Raggett/">Dave Raggett</A>, <A href="../People/Arnaud/">Arnaud Le Hors</A>, contact persons for the <A href="Activity">W3C HTML Activity</A> </ADDRESS>
The
address
element
must
not
be
used
to
represent
arbitrary
addresses
(e.g.
postal
addresses),
unless
those
addresses
are
in
fact
the
relevant
contact
information.
(The
p
element
is
the
appropriate
element
for
marking
up
postal
addresses
in
general.)
The
address
element
must
not
contain
information
other
than
contact
information.
For
example,
the
following
is
non-conforming
use
of
the
address
element:
<ADDRESS>Last Modified: 1999/12/24 23:37:50</ADDRESS>
Typically,
the
address
element
would
be
included
along
with
other
information
in
a
footer
element.
The
contact
information
for
a
node
node
is
a
collection
of
address
elements
defined
by
the
first
applicable
entry
from
the
following
list:
article
element
body
element
The
contact
information
consists
of
all
the
address
elements
that
have
node
as
an
ancestor
and
do
not
have
another
body
or
article
element
ancestor
that
is
a
descendant
of
node
.
article
element
body
element
The
contact
information
of
node
is
the
same
as
the
contact
information
of
the
nearest
article
or
body
element
ancestor,
whichever
is
nearest.
The
contact
information
of
node
is
the
same
as
the
contact
information
of
the
body
element
of
the
Document
.
There is no contact information for node .
User agents may expose the contact information of a node to the user, or use it for other purposes, such as indexing sections based on the sections' contact information.
In this example the footer contains contact information and a copyright notice.
<footer> <address> For more details, contact <a href="mailto:js@example.com">John Smith</a>. </address> <p><small>© copyright 2038 Example Corp.</small></p> </footer>
The
h1
–
h6
elements
and
the
hgroup
element
are
headings.
The
first
element
of
heading
content
in
an
element
of
sectioning
Heading
content
represents
the
elements
have
a
heading
for
that
section.
Subsequent
headings
of
equal
level
,
which
is
either
null
or
higher
rank
start
new
(implied)
sections,
headings
of
lower
rank
an
unsigned
integer.
It
is
determined
as
follows
for
a
given
heading
content
start
implied
subsections
that
are
part
of
the
previous
one.
In
both
cases,
the
element
represents
the
heading
of
the
implied
section.
:
Certain
elements
are
said
to
be
sectioning
roots
,
including
blockquote
and
If
heading
has
a
parent
td
hgroup
elements.
These
elements
can
have
their
own
outlines,
but
the
sections
and
headings
inside
these
elements
do
not
contribute
to
the
outlines
of
their
ancestors.
element,
then
return
null.
Switch on heading :
Sectioning
content
elements
are
always
considered
subsections
Return
the
number
of
their
nearest
ancestor
sectioning
root
or
their
nearest
ancestor
element
of
sectioning
content
,
whichever
is
nearest,
regardless
of
what
implied
sections
other
headings
may
have
created.
elements
+
1.
For
the
following
fragment:
<body>
<h1>Foo</h1>
<h2>Bar</h2>
<blockquote>
<h3>Bla</h3>
</blockquote>
<p>Baz</p>
<h2>Quux</h2>
<section>
<h3>Thud</h3>
</section>
<p>Grunt</p>
</body>
...the
structure
would
be:
Foo
(heading
of
explicit
body
A
heading
content
element
whose
heading
level
is
non-null
represents
section,
containing
the
"Grunt"
paragraph)
Bar
(heading
starting
implied
section,
containing
a
block
quote
and
heading
.
The
lower
a
heading
's
heading
level
is,
the
"Baz"
paragraph)
Quux
(heading
starting
implied
section
with
no
content
other
than
more
important
the
heading
itself)
Thud
(heading
of
explicit
is.
I.e.,
headings
are
heading
content
elements
whose
parent
is
not
an
section
hgroup
section)
element.
Notice
how
the
section
The
document
headings
are
all
headings
ends
the
earlier
implicit
section
so
that
in
a
later
paragraph
("Grunt")
is
back
at
the
top
level.
document,
in
tree
order
.
Sections
may
contain
The
document
headings
must
be
used
for
generating
document
outlines,
for
example
when
generating
tables
of
any
rank
,
but
authors
are
strongly
encouraged
contents.
When
creating
an
interactive
table
of
contents,
entries
should
jump
the
user
to
either
use
only
h1
the
relevant
heading
.
The
first
heading
within
document
headings
must
have
a
heading
level
elements,
or
to
use
elements
of
the
appropriate
rank
1.
Each
heading
for
the
section's
nesting
level.
following
another
heading
lead
in
document
headings
must
have
a
heading
level
that
is
less,
equal,
or
1
greater
than
lead
's
heading
level
.
Authors
are
also
encouraged
to
explicitly
wrap
sections
in
elements
of
avoid
a
sectioning
content
,
instead
of
relying
on
the
implicit
sections
generated
by
having
multiple
headings
in
one
element
of
section
without
a
heading
descendant
whose
nearest
ancestor
sectioning
content
.
element
is
not
section
.
For
example,
the
The
following
example
is
correct:
non-conforming:
<body> <h4>Apples</h4> <p>Apples are fruit.</p> <section> <h2>Taste</h2> <p>They taste lovely.</p><h6>Sweet</h6> <p>Red apples are sweeter than green ones.</p> <h1>Color</h1> <p>Apples come in various colors.</p></section> </body>
However,
the
same
document
It
could
be
written
as
follows
and
then
it
would
be
more
clearly
expressed
as:
conforming:
<body> <h1>Apples</h1> <p>Apples are fruit.</p> <section> <h2>Taste</h2> <p>They taste lovely.</p><section> <h3>Sweet</h3> <p>Red apples are sweeter than green ones.</p> </section> </section> <section> <h2>Color</h2> <p>Apples come in various colors.</p></section> </body>
Both
of
the
documents
above
are
semantically
identical
and
would
produce
the
same
outline
in
compliant
user
agents.
This
third
example
is
It
could
also
semantically
identical,
be
written
as
follows,
and
this
might
be
easier
to
maintain
(e.g.
preferable
if
the
sections
are
often
moved
move
around
in
editing):
a
lot,
as
the
heading
level
of
h1
elements
depends
on
the
number
of
ancestor
sectioning
content
elements:
<body> <h1>Apples</h1> <p>Apples are fruit.</p> <section> <h1>Taste</h1> <p>They taste lovely.</p><section> <h1>Sweet</h1> <p>Red apples are sweeter than green ones.</p> </section> </section> <section> <h1>Color</h1> <p>Apples come in various colors.</p></section> </body>
The following markup fragment:
<body> <hgroup id="document-title"> <h1>HTML</h1> <h2>Living Standard — Last Updated 12 August 2016</h2> </hgroup> <p>Some intro to the document.</p> <h2>Table of contents</h2> <ol id=toc>...</ol> <h2>First section</h2> <p>Some intro to the first section.</p> </body>
...results
in
the
following
outline
being
created
for
the
body
node
(and
thus
the
entire
document):
3
document
headings
:
Section
created
for
body
node
.
Associated
with
heading
<hgroup
id="document-title">...</hgroup>
consisting
of
primary
heading
<h1>HTML</h1>
and
secondary
heading
<h2>Living
Standard
—
Last
Updated
12
August
2016</h2>
.
Section
implied
for
first
h2
element.
Associated
with
heading
<h2>Table
of
contents</h2>
.
Section
implied
for
second
h2
element.
Associated
with
heading
<h2>First
section</h2>
.
The
following
image
shows
what
a
A
rendered
view
of
the
outline
might
look
like.
The
algorithm
that
must
be
followed
during
a
walk
of
a
DOM
subtree
rooted
at
a
sectioning
content
element
or
a
sectioning
root
element
to
determine
that
element's
outline
is
as
follows:
Let
current
outline
target
be
null.
(It
holds
the
element
whose
outline
is
being
created.)
Let
current
section
be
null.
(It
holds
a
pointer
to
a
section
,
so
that
elements
in
the
DOM
can
all
be
associated
with
a
section.)
Create
a
stack
to
hold
elements,
which
is
used
to
handle
nesting.
Initialize
this
stack
to
empty.
Walk
over
the
DOM
in
tree
order
,
starting
with
the
sectioning
content
element
or
sectioning
root
element
at
the
root
of
the
subtree
for
which
an
outline
is
to
be
created,
and
trigger
the
first
relevant
step
below
for
each
element
as
the
walk
enters
and
exits
it.
When
exiting
an
element,
if
that
element
is
the
element
at
the
top
of
the
stack
The
element
being
exited
is
a
heading
content
element
or
an
element
with
a
hidden
attribute.
Pop
that
element
from
the
stack.
If
the
top
of
the
stack
is
a
heading
content
element
or
an
element
with
a
hidden
attribute
Do
nothing.
When
entering
an
element
with
a
hidden
attribute
Push
the
element
being
entered
onto
the
stack.
(This
causes
the
algorithm
to
skip
that
element
and
any
descendants
of
the
element.)
When
entering
a
sectioning
content
element
Run
these
steps:
If
current
outline
target
is
not
null,
then:
If
the
current
section
has
no
heading,
create
an
implied
heading
and
let
that
be
the
heading
for
the
current
section
.
Push
current
outline
target
onto
the
stack.
Let
current
outline
target
be
the
element
that
is
being
entered.
Let
current
section
be
a
newly
created
section
for
the
current
outline
target
element.
Associate
current
outline
target
with
current
section
.
Let
there
be
a
new
outline
for
the
new
current
outline
target
,
initialized
with
just
the
new
current
section
as
the
only
section
in
the
outline.
When
exiting
a
sectioning
content
element,
if
the
stack
is
not
empty
Run
these
steps:
If
the
current
section
has
no
heading,
create
an
implied
heading
and
let
that
be
the
heading
for
the
current
section
.
Pop
the
top
element
from
the
stack,
and
let
the
current
outline
target
be
that
element.
Let
current
section
be
the
last
section
in
the
outline
of
the
current
outline
target
element.
Append
the
outline
of
the
sectioning
content
element
being
exited
to
the
current
section
.
(This
does
not
change
which
section
is
the
last
section
in
the
outline
.)
When
entering
a
sectioning
root
element
Run
these
steps:
If
current
outline
target
is
not
null,
push
current
outline
target
onto
the
stack.
Let
current
outline
target
be
the
element
that
is
being
entered.
Let
current
outline
target
's
parent
section
be
current
section
.
Let
current
section
be
a
newly
created
section
for
the
current
outline
target
element.
Let
there
be
a
new
outline
for
the
new
current
outline
target
,
initialized
with
just
the
new
current
section
as
the
only
section
in
the
outline.
When
exiting
a
sectioning
root
element,
if
the
stack
is
not
empty
Run
these
steps:
If
the
current
section
has
no
heading,
create
an
implied
heading
and
let
that
be
the
heading
for
the
current
section
.
Let
current
section
be
current
outline
target
's
parent
section
.
Pop
the
top
element
from
the
stack,
and
let
the
current
outline
target
be
that
element.
When
exiting
a
sectioning
content
element
or
a
sectioning
root
element
(when
the
stack
is
empty)
The
current
outline
target
is
the
element
being
exited,
and
it
is
the
sectioning
content
element
or
a
sectioning
root
element
at
the
root
of
the
subtree
for
which
an
outline
is
being
generated.
If
the
current
section
has
no
heading,
create
an
implied
heading
and
let
that
be
the
heading
for
the
current
section
.
Skip
to
the
next
step
in
the
overall
set
of
steps.
(The
walk
is
over.)
When
entering
a
heading
content
element
If
the
current
section
has
no
heading,
let
the
element
being
entered
be
the
heading
for
the
current
section
.
If
the
element
being
entered
is
an
hgroup
element,
that
hgroup
as
a
whole
is
a
multi-level
heading
for
the
current
section
,
with
the
highest-
ranked
h1
–
h6
descendant
of
the
hgroup
providing
the
primary
heading
for
the
current
section
,
and
with
other
h1
–
h6
descendants
of
the
hgroup
providing
secondary
headings
for
the
current
section
.
Otherwise,
if
the
element
being
entered
has
a
rank
equal
to
or
higher
than
the
heading
of
the
last
section
of
the
outline
of
the
current
outline
target
,
or
if
the
heading
of
the
last
section
of
the
outline
of
the
current
outline
target
is
an
implied
heading,
then
create
a
new
section
and
append
it
to
the
outline
of
the
current
outline
target
element,
so
that
this
new
section
is
the
new
last
section
of
that
outline.
Let
current
section
be
that
new
section.
Let
the
element
being
entered
be
the
new
heading
for
the
current
section
.
Otherwise,
run
these
substeps:
Let
candidate
section
be
current
section
.
Heading
loop
:
If
the
element
being
entered
has
a
rank
lower
than
the
rank
of
the
heading
of
the
candidate
section
,
then
create
a
new
section
,
and
append
it
to
candidate
section
.
(This
does
not
change
which
section
is
the
last
section
in
the
outline.)
Let
current
section
be
this
new
section.
Let
the
element
being
entered
be
the
new
heading
for
the
current
section
.
Abort
these
substeps.
Let
new
candidate
section
be
the
section
that
contains
candidate
section
in
the
outline
of
current
outline
target
.
Let
candidate
section
be
new
candidate
section
.
Return
to
the
step
labeled
heading
loop
.
Push
the
element
being
entered
onto
the
stack.
(This
causes
the
algorithm
to
skip
any
descendants
of
the
element.)
Recall
that
h1
has
the
highest
rank,
and
h6
has
the
lowest
rank.
Otherwise
Do
nothing.
In
addition,
whenever
the
walk
exits
a
node,
after
doing
the
steps
above,
if
the
node
is
not
associated
with
a
section
yet,
associate
the
node
with
the
section
current
section
.
Associate
all
non-element
nodes
that
are
in
the
subtree
for
which
an
outline
is
being
created
with
the
section
with
which
their
parent
element
is
associated.
Associate
all
nodes
in
the
subtree
with
the
heading
of
the
section
with
which
they
are
associated,
if
any.
The
tree
of
sections
created
by
the
algorithm
above,
or
a
proper
subset
thereof,
must
be
used
when
generating
document
outlines,
for
example
when
generating
tables
of
contents.
The
outline
created
for
the
body
element
of
a
Document
is
the
outline
of
the
entire
document.
When
creating
an
interactive
table
of
contents,
entries
should
jump
the
user
to
the
relevant
sectioning
content
element,
if
the
section
was
created
for
a
real
element
in
the
original
document,
or
to
the
relevant
heading
content
element,
if
the
section
in
the
tree
was
generated
for
a
heading
in
the
above
process.
Selecting
the
first
section
of
the
document
therefore
always
takes
the
user
to
the
top
of
the
document,
regardless
of
where
the
first
heading
in
the
body
is
to
be
found.
The
outline
depth
of
a
heading
content
element
associated
with
a
section
section
is
the
number
of
sections
that
are
ancestors
of
section
in
the
outermost
outline
that
section
finds
itself
in
when
the
outlines
of
its
Document
's
elements
are
created,
plus
1.
The
outline
depth
of
a
heading
content
element
not
associated
with
a
section
is
1.
User
agents
should
provide
default
headings
for
sections
that
do
not
have
explicit
section
headings.
Consider
the
following
snippet:
<body>
<nav>
<p><a href="/">Home</a></p>
</nav>
<p>Hello world.</p>
<aside>
<p>My cat is cute.</p>
</aside>
</body>
Although
it
contains
no
headings,
this
snippet
has
three
sections:
a
document
(the
body
)
with
two
subsections
(a
nav
and
an
aside
).
A
user
agent
could
present
the
outline
as
follows:
Untitled
document
Navigation
Sidebar
These
default
headings
("Untitled
document",
"Navigation",
"Sidebar")
are
not
specified
by
this
specification,
and
might
vary
with
the
user's
language,
the
page's
language,
the
user's
preferences,
the
user
agent
implementer's
preferences,
etc.
The
following
JavaScript
function
shows
how
the
tree
walk
could
be
implemented.
The
root
argument
is
the
root
of
the
tree
to
walk
(either
a
sectioning
content
element
or
a
sectioning
root
element),
and
the
enter
and
exit
arguments
are
callbacks
that
are
called
with
the
nodes
as
they
are
entered
and
exited.
[JAVASCRIPT]
look
like:
This
section
is
non-normative.
The
following
document
shows
a
straight-forward
application
of
the
outline
algorithm.
First,
here
is
the
a
document,
which
is
a
book
with
very
short
chapters
and
subsections:
<!DOCTYPE HTML> <html lang=en> <title>The Tax Book (all in one page)</title> <h1>The Tax Book</h1> <h2>Earning money</h2> <p>Earning money is good.</p> <h3>Getting a job</h3> <p>To earn money you typically need a job.</p> <h2>Spending money</h2> <p>Spending is what money is mainly used for.</p> <h3>Cheap things</h3> <p>Buying cheap things often not cost-effective.</p> <h3>Expensive things</h3> <p>The most expensive thing is often not the most cost-effective either.</p> <h2>Investing money</h2> <p>You can lend your money to other people.</p> <h2>Losing money</h2> <p>If you spend money or invest money, sooner or later you will lose money. <h3>Poor judgement</h3> <p>Usually if you lose money it's because you made a mistake.</p>
This
book
would
form
the
following
outline:
Its
document
headings
could
be
presented
as
follows:
Notice
that
the
title
element
does
is
not
participate
in
the
outline.
a
heading
.
Here
is
a
similar
document,
but
this
time
using
h1
and
section
elements
to
get
the
same
effect:
<!DOCTYPE HTML> <html lang=en> <title>The Tax Book (all in one page)</title> <h1>The Tax Book</h1> <section> <h1>Earning money</h1> <p>Earning money is good.</p> <section> <h1>Getting a job</h1> <p>To earn money you typically need a job.</p> </section> </section> <section> <h1>Spending money</h1> <p>Spending is what money is mainly used for.</p> <section> <h1>Cheap things</h1> <p>Buying cheap things often not cost-effective.</p> </section> <section> <h1>Expensive things</h1> <p>The most expensive thing is often not the most cost-effective either.</p> </section> </section> <section> <h1>Investing money</h1> <p>You can lend your money to other people.</p> </section> <section> <h1>Losing money</h1> <p>If you spend money or invest money, sooner or later you will lose money. <section> <h1>Poor judgement</h1> <p>Usually if you lose money it's because you made a mistake.</p> </section> </section>
This
book
would
form
the
same
outline:
Its
document
headings
could
be
presented
identically:
A document can contain multiple top-level headings:
<!DOCTYPE HTML> <html lang=en> <title>Alphabetic Fruit</title> <h1>Apples</h1> <p>Pomaceous.</p> <h1>Bananas</h1> <p>Edible.</p> <h1>Carambola</h1> <p>Star.</p>
Mixing
both
the
h1
–
h6
model
and
the
section
/
h1
model
can
lead
to
some
unintuitive
results.
Consider
for
The
following
example
the
following,
which
is
just
the
previous
example
but
with
the
contents
of
the
(implied)
body
non-conforming
as
it
has
no
heading
wrapped
in
a
section
whose
heading
level
:
is
1:
<!DOCTYPE HTML> <html lang=en> <title>Alphabetic Fruit</title> <section> <h1>Apples</h1> <p>Pomaceous.</p> <h1>Bananas</h1> <p>Edible.</p> <h1>Carambola</h1> <p>Star.</p> </section>
Headings
never
rise
above
other
sections.
Thus,
in
the
The
following
example,
example
is
non-conforming
as
the
first
h1
heading
does
's
heading
level
is
not
actually
describe
the
page
header;
it
describes
the
header
for
the
second
half
of
the
page:
1:
<!DOCTYPE HTML> <html lang=en> <title>Feathers on The Site of Encyclopedic Knowledge</title> <section> <h1>A plea from our caretakers</h1> <p>Please, we beg of you, send help! We're stuck in the server room!</p> </section> <h1>Feathers</h1> <p>Epidermal growths.</p>
Thus,
when
an
article
element
starts
with
a
nav
block
and
only
later
has
its
heading,
the
result
is
that
the
A
nav
header
block
is
elements
do
not
part
of
the
same
section
as
the
rest
of
influence
the
article
document
headings
in
the
outline.
For
instance,
take
this
of
a
document:
<!DOCTYPE HTML> <html lang="en"> <title>We're adopting a child! — Ray's blog</title> <h1>Ray's blog</h1> <article> <header> <nav> <a href="?t=-1d">Yesterday</a>; <a href="?t=-7d">Last week</a>; <a href="?t=-1m">Last month</a> </nav> <h1>We're adopting a child!</h1> </header> <p>As of today, Janine and I have signed the papers to become the proud parents of baby Diane! We've been looking forward to this day for weeks.</p> </article> </html>
The
resulting
outline
would
be:
document's
document
headings
could
be
presented
as
follows:
The
hgroup
element
can
be
used
for
subheadings.
For
example:
<!DOCTYPE HTML> <html lang="en"> <title>Chronotype: CS Student</title> <hgroup> <h1> The morning </h1> <h2> 06:00 to 12:00 </h2> </hgroup> <p>We sleep.</p> <hgroup> <h1> The afternoon </h1> <h2> 12:00 to 18:00 </h2> </hgroup> <p>We study.</p> <hgroup> <h2>Additional Commentary</h2> <h3>Because not all this is necessarily true</h3> <h6>Ok it's almost certainly not true</h6> </hgroup> <p>Yeah we probably play, rather than study.</p> <hgroup> <h1> The evening </h1> <h2> 18:00 to 00:00 </h2> </hgroup> <p>We play.</p> <hgroup> <h1> The night </h1> <h2> 00:00 to 06:00 </h2> </hgroup> <p>We play some more.</p> </html>
The
resulting
outline
would
be:
document's
document
headings
could
be
presented
as
follows:
Exactly
how
this
is
represented
by
user
agents,
as
most
interface
issues,
is
left
as
a
matter
of
implementation
preference,
but
the
key
part
is
that
the
hgroup
's
descendant
h1
–
h6
elements
are
what
form
the
element's
heading.
Thus,
the
following
would
be
equally
valid:
But
And
so
would
the
following:
This section is non-normative.
Element | Purpose |
---|---|
Example | |
body
|
|
<!DOCTYPE HTML> <html lang="en"> <head> <title>Steve Hill's Home Page</title> </head> <body> <p>Hard Trance is My Life.</p> </body> </html> |
|
article
|
|
<article> <img src="/tumblr_masqy2s5yn1rzfqbpo1_500.jpg" alt="Yellow smiley face with the caption 'masif'"> <p>My fave Masif tee so far!</p> <footer>Posted 2 days ago</footer> </article> <article> <img src="/tumblr_m9tf6wSr6W1rzfqbpo1_500.jpg" alt=""> <p>Happy 2nd birthday Masif Saturdays!!!</p> <footer>Posted 3 weeks ago</footer> </article> |
|
section
|
|
<h1>Biography</h1> <section> <h1>The facts</h1> <p>1500+ shows, 14+ countries</p> </section> <section> <h1>2010/2011 figures per year</h1> <p>100+ shows, 8+ countries</p> </section> |
|
nav
|
|
<nav> <p><a href="/">Home</a> <p><a href="/biog.html">Bio</a> <p><a href="/discog.html">Discog</a> </nav> |
|
aside
|
|
<h1>Music</h1> <p>As any burner can tell you, the event has a lot of trance.</p> <aside>You can buy the music we played at our <a href="buy.html">playlist page</a>.</aside> <p>This year we played a kind of trance that originated in Belgium, Germany, and the Netherlands in the mid 90s.</p> |
|
h1
–
h6
|
A
|
<h1>The Guide To Music On The Playa</h1> <h2>The Main Stage</h2> <p>If you want to play on a stage, you should bring one.</p> <h2>Amplified Music</h2> <p>Amplifiers up to 300W or 90dB are welcome.</p> |
|
hgroup
|
A heading |
<hgroup> <h1>Burning Music</h1> <h2>The Guide To Music On The Playa</h2> </hgroup> <section> <hgroup> <h1>Main Stage</h1> <h2>The Fiction Of A Music Festival</h2> </hgroup> <p>If you want to play on a stage, you should bring one.</p> </section> <section> <hgroup> <h1>Loudness!</h1> <h2>Questions About Amplified Music</h2> </hgroup> <p>Amplifiers up to 300W or 90dB are welcome.</p> </section> |
|
header
|
|
<article> <header> <h1>Hard Trance is My Life</h1> <p>By DJ Steve Hill and Technikal</p> </header> <p>The album with the amusing punctuation has red artwork.</p> </article> |
|
footer
|
|
<article> <h1>Hard Trance is My Life</h1> <p>The album with the amusing punctuation has red artwork.</p> <footer> <p>Artists: DJ Steve Hill and Technikal</p> </footer> </article> |
This section is non-normative.
A
section
forms
part
of
something
else.
An
article
is
its
own
thing.
But
how
does
one
know
which
is
which?
Mostly
the
real
answer
is
"it
depends
on
author
intent".
For
example,
one
could
imagine
a
book
with
a
"Granny
Smith"
chapter
that
just
said
"These
juicy,
green
apples
make
a
great
filling
for
apple
pies.";
that
would
be
a
section
because
there'd
be
lots
of
other
chapters
on
(maybe)
other
kinds
of
apples.
On
the
other
hand,
one
could
imagine
a
tweet
or
reddit
comment
or
tumblr
post
or
newspaper
classified
ad
that
just
said
"Granny
Smith.
These
juicy,
green
apples
make
a
great
filling
for
apple
pies.";
it
would
then
be
article
s
because
that
was
the
whole
thing.
A
comment
on
an
article
is
not
part
of
the
article
on
which
it
is
commenting,
therefore
it
is
its
own
article
.