search
element with form functionality — Last Updated 1 December 2021body
elementarticle
elementsection
elementnav
elementaside
elementh1
, h2
, h3
, h4
, h5
, and h6
elementshgroup
elementheader
elementfooter
elementaddress
elementIntroduction_to_HTML/Document_and_website_structure#HTML_for_structuring_content
Support in all current engines.
body
elementSupport in all current engines.
html
element.body
element's start tag can be omitted
if the element is empty, or if the first thing inside the body
element is not
ASCII whitespace or a comment, except if the
first thing inside the body
element is a meta
, link
,
script
, style
, or template
element. body
element's end tag can be omitted if the
body
element is not immediately followed by a comment.onafterprint
onbeforeprint
onbeforeunload
onhashchange
onlanguagechange
onmessage
onmessageerror
onoffline
ononline
onpagehide
onpageshow
onpopstate
onrejectionhandled
onstorage
onunhandledrejection
onunload
HTMLBodyElement
.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.
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 event handlers of the Window
object named by the
Window
-reflecting body element event handler set, 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
elementSupport in all current engines.
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" ></ script >
< 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
elementSupport in all current engines.
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 in the document's outline.
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 Valedictorian</ 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 : 2 em ; }
section . chapter h1 { font : 2 em Roboto , Helvetica Neue , sans-serif ; }
section . appendix h1 { font : small-caps 2 em 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
elementSupport in all current engines.
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 email 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
elementSupport in all current engines.
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 >
< p >< a href = "/archives" > Archives</ a > -
< a href = "/about" > About me</ a > -
< a href = "/copyright" > Copyright</ a ></ p >
</ footer >
</ body >
h1
, h2
, h3
, h4
, h5
, and h6
elementsSupport in all current engines.
Support in all current engines.
Support in all current engines.
Support in all current engines.
Support in all current engines.
Support in all current engines.
hgroup
element.HTMLHeadingElement
.These elements represent headings for their sections.
The semantics and meaning of these elements are defined in the section on headings and sections.
These elements have a rank given by the number in their name. The h1
element is said to have the highest rank, the h6
element has the lowest rank, and two
elements with the same name have equal rank.
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
elementSupport in all current engines.
h1
, h2
, h3
, h4
,
h5
, h6
elements, optionally intermixed with script-supporting
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 used to group a set of
h1
–h6
elements when the heading has multiple levels, such as
subheadings, alternative titles, or taglines.
The rank of an hgroup
element is the rank of the highest-ranked
h1
–h6
element descendant of the hgroup
element, if
there are any such elements, or otherwise the same as for an h1
element (the highest
rank). Other h1
–h6
elements of heading content 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 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.
How a user agent exposes such multi-level headings in user interfaces (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 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
elementSupport in all current engines.
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 header
element doesn't take part in the
outline algorithm.
< 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" -->
< p > To play today's games you will need to update your client.</ p >
< h2 > Games</ h2 > <!-- this starts a third subsection -->
</ header >
< p > You have three active games:</ p >
<!-- this is still part of the subsection entitled "Games" -->
...
footer
elementSupport in all current engines.
header
or footer
element
descendants.HTMLElement
.The footer
element represents a footer for its nearest ancestor
sectioning content or sectioning root 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, indices, 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 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
elementSupport in all current engines.
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.
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 content represents the heading for that section. Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank 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 td
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.
Sectioning content elements are always considered subsections 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.
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:
body
section, containing the "Grunt" paragraph)
section
section)
Notice how the section
ends the earlier implicit section so that a later
paragraph ("Grunt") is back at the top level.
Sections may contain headings of any rank, but authors are strongly encouraged to
either use only h1
elements, or to use elements of the appropriate rank
for the section's nesting level.
Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.
For example, the following is correct:
< 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 would be more clearly expressed as:
< 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 also semantically identical, and might be easier to maintain (e.g. if sections are often moved around in editing):
< 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 >
This final example would need explicit style rules to be rendered well in legacy browsers. Legacy browsers without CSS support would render all the headings as top-level headings.
The outline for a sectioning content element or a sectioning root element consists of a list of one or more potentially nested sections. The element for which an outline is created is said to be the outline's owner.
A section is a container that corresponds to some nodes in
the original DOM tree. Each section can have one heading associated with it, and can contain any
number of further nested sections.
(The sections in the outline aren't section
elements, though some may correspond to
such elements — they are merely conceptual sections.)
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):
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>
.
Also associated with the paragraph <p>Some intro to the
document.</p>
(though it likely would not be shown in a rendered view of the
outline).
Nested sections:
Section implied for first h2
element.
Associated with heading <h2>Table of contents</h2>
.
Also associated with the ordered list <ol id=toc>...</ol>
(though it likely would not be shown in a rendered view of the outline).
No nested sections.
Section implied for second h2
element.
Associated with heading <h2>First section</h2>
.
Also associated with the paragraph <p>Some intro to the first
section.</p>
(though it likely would not be shown in a rendered view of the
outline).
No nested sections.
The following image shows what a rendered view of the outline might look like.
The following document shows a straight-forward application of the outline algorithm. First, here is the 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:
Notice that the title
element does not participate in the outline.
Here is a similar document, but this time using 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:
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 >
This would form the following simple outline consisting of three top-level sections:
Effectively, the body
element is split into three.
Mixing both the h1
–h6
model and the
section
/h1
model can lead to some unintuitive results.
Consider for example the following, which is just the previous example but with the contents
of the (implied) body
wrapped in a section
:
<!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 >
The resulting outline would be:
This result is described as unintuitive because it results in three subsections even
though there's only one section
element. Effectively, the section
is
split into three, just like the implied body
element in the previous example.
(In this example, "(untitled page)" is the implied heading for the body
element, since it has no explicit heading.)
Headings never rise above other sections. Thus, in the following example, the first
h1
does not actually describe the page header; it describes the header for the
second half of the page:
<!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 >
The resulting outline would be:
Thus, when an article
element starts with a nav
block and only later
has its heading, the result is that the nav
block is not part of the same section as
the rest of the article
in the outline. For instance, take this 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:
Also worthy of note in this example is that the header
element has no effect
whatsoever on the document outline.
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:
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 so would the following:
The following would also be valid, though maybe less practical in most contexts:
The morning
06:00 to 12:00
The afternoon
12:00 to 18:00
Additional Commentary
Because not all this is necessarily true
Ok it's almost certainly not true
The evening
18:00 to 00:00
The night
00:00 to 06:00
User agents are encouraged to expose page outlines to users to aid in navigation. This is especially true for non-visual media, e.g. screen readers.
However, to mitigate the difficulties that arise from authors misusing sectioning content, user agents are also encouraged to offer a mode that navigates the page using heading content alone.
For instance, a user agent could map the arrow keys as follows:
Plus in addition, the user agent could map the j and k keys to navigating to the previous or next element of heading content, regardless of the section's outline depth and ignoring sections with no headings.
Element | Purpose |
---|---|
Example | |
body
| The contents of the document. |
| |
article
| 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. |
| |
section
| A generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. |
| |
nav
| A section of a page that links to other pages or to parts within the page: a section with navigation links. |
| |
aside
| 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.
|
| |
h1 –h6
| A section heading |
| |
hgroup
| The heading of a section, which consists of all the h1 –h6 element children of the hgroup element. The element is used to group a set of h1 –h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.
|
| |
header
| A group of introductory or navigational aids. |
| |
footer
| A footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. |
|
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
.