sections.html 97.7 KB

Raw Blame History Permalink

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-US-x-Hixie" ><head><title>4.4 Sections &#8212; HTML5 </title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   dt dfn { font-style: italic; }
   pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
   pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
   pre em { font-weight: bolder; font-style: normal; }
   @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
   var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
   table { border-collapse: collapse; border-style: hidden hidden none hidden; }
   table thead, table tbody { border-bottom: solid; }
   table tbody th:first-child { border-left: solid; }
   table tbody th { text-align: left; }
   table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
   blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }

   .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
   .matrix, .matrix td { border: none; text-align: right; }
   .matrix { margin-left: 2em; }
   .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
   .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
   .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }

   .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
   img.extra { float: right; }
   pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
   pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
   pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
   pre.css:first-line { color: #AAAA50; }
   dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; }
   hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
   dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
   dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
   dl.domintro dd p { margin: 0.5em 0; }
   dl.switch { padding-left: 2em; }
   dl.switch > dt { text-indent: -1.5em; }
   dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
   dl.triple { padding: 0 0 0 1em; }
   dl.triple dt, dl.triple dd { margin: 0; display: inline }
   dl.triple dt:after { content: ':'; }
   dl.triple dd:after { content: '\A'; white-space: pre; }
   .diff-old { text-decoration: line-through; color: silver; background: transparent; }
   .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
   a .diff-new { border-bottom: 1px blue solid; }

   h2 { page-break-before: always; }
   h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
   h1 + h2, hr + h2.no-toc { page-break-before: auto; }

   p  > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]),
   li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]), { border-bottom: solid #9999CC; }

   div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
   div.head p { margin: 0; }
   div.head h1 { margin: 0; }
   div.head .logo { float: right; margin: 0 1em; }
   div.head .logo img { border: none } /* remove border from top image */
   div.head dl { margin: 1em 0; }
   div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }

   body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
   body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
   body > .toc > li > * { margin-bottom: 0.5em; }
   body > .toc > li > * > li > * { margin-bottom: 0.25em; }
   .toc, .toc li { list-style: none; }

   .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
   .brief li { margin: 0; padding: 0; }
   .brief li p { margin: 0; padding: 0; }

   .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
   .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
   .category-list li { display: inline; }
   .category-list li:not(:last-child)::after { content: ', '; }
   .category-list li > span, .category-list li > a { text-transform: lowercase; }
   .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */

   .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
   .XXX > :first-child { margin-top: 0; }
   p .XXX { line-height: 3em; }
   .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
   .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
   .annotation :link, .annotation :visited { color: inherit; }
   .annotation :link:hover, .annotation :visited:hover { background: transparent; }
   .annotation span { border: none ! important; }
   .note { color: green; background: transparent; font-family: sans-serif; }
   .warning { color: red; background: transparent; }
   .note, .warning { font-weight: bolder; font-style: italic; }
   p.note, div.note { padding: 0.5em 2em; }
   span.note { padding: 0 2em; }
   .note p:first-child, .warning p:first-child { margin-top: 0; }
   .note p:last-child, .warning p:last-child { margin-bottom: 0; }
   .warning:before { font-style: normal; }
   p.note:before { content: 'Note: '; }
   p.warning:before { content: '\26A0 Warning! '; }

   .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
   .bookkeeping { font-size: 0.8em; margin: 2em 0; }
   .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
   .bookkeeping dt { margin: 0.5em 2em 0; }
   .bookkeeping dd { margin: 0 3em 0.5em; }

   h4 { position: relative; z-index: 3; }
   h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
   .element {
     background: #EEEEFF;
     color: black;
     margin: 0 0 1em 0.15em;
     padding: 0 1em 0.25em 0.75em;
     border-left: solid #9999FF 0.25em;
     position: relative;
     z-index: 1;
   }
   .element:before {
     position: absolute;
     z-index: 2;
     top: 0;
     left: -1.15em;
     height: 2em;
     width: 0.9em;
     background: #EEEEFF;
     content: ' ';
     border-style: none none solid solid;
     border-color: #9999FF;
     border-width: 0.25em;
   }

   .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
   td > .example:only-child { margin: 0 0 0 0.1em; }

   ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
   ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
   ul.domTree li li { list-style: none; }
   ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
   ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
   ul.domTree span { font-style: italic; font-family: serif; }
   ul.domTree .t1 code { color: purple; font-weight: bold; }
   ul.domTree .t2 { font-style: normal; font-family: monospace; }
   ul.domTree .t2 .name { color: black; font-weight: bold; }
   ul.domTree .t2 .value { color: blue; font-weight: normal; }
   ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
   ul.domTree .t7 code, .domTree .t8 code { color: green; }
   ul.domTree .t10 code { color: teal; }

   body.dfnEnabled dfn { cursor: pointer; }
   .dfnPanel {
     display: inline;
     position: absolute;
     z-index: 10;
     height: auto;
     width: auto;
     padding: 0.5em 0.75em;
     font: small sans-serif, Droid Sans Fallback;
     background: #DDDDDD;
     color: black;
     border: outset 0.2em;
   }
   .dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
   .dfnPanel :link, .dfnPanel :visited { color: black; }
   .dfnPanel p { font-weight: bolder; }
   .dfnPanel * + p { margin-top: 0.25em; }
   .dfnPanel li { list-style-position: inside; }

   #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
   #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
   #configUI p label { display: block; }
   #configUI #updateUI, #configUI .loginUI { text-align: center; }
   #configUI input[type=button] { display: block; margin: auto; }

   fieldset { margin: 1em; padding: 0.5em 1em; }
   fieldset > legend + * { margin-top: 0; }
   fieldset > :last-child { margin-bottom: 0; }
   fieldset p { margin: 0.5em 0; }

   .stability {
     position: fixed;
     bottom: 0;
     left: 0; right: 0;
     margin: 0 auto 0 auto !important;
    z-index: 1000;
     width: 50%;
     background: maroon; color: yellow;
     -webkit-border-radius: 1em 1em 0 0;
     -moz-border-radius: 1em 1em 0 0;
     border-radius: 1em 1em 0 0;
     -moz-box-shadow: 0 0 1em #500;
     -webkit-box-shadow: 0 0 1em #500;
     box-shadow: 0 0 1em red;
     padding: 0.5em 1em;
     text-align: center;
   }
   .stability strong {
     display: block;
   }
   .stability input {
     appearance: none; margin: 0; border: 0; padding: 0.25em 0.5em; background: transparent; color: black;
     position: absolute; top: -0.5em; right: 0; font: 1.25em sans-serif; text-align: center;
   }
   .stability input:hover {
     color: white;
     text-shadow: 0 0 2px black;
   }
   .stability input:active {
     padding: 0.3em 0.45em 0.2em 0.55em;
   }
   .stability :link, .stability :visited,
   .stability :link:hover, .stability :visited:hover {
     background: transparent;
     color: white;
   }

  </style><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation
requirements"><link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet" type="text/css"><style type="text/css">

   .applies thead th > * { display: block; }
   .applies thead code { display: block; }
   .applies tbody th { whitespace: nowrap; }
   .applies td { text-align: center; }
   .applies .yes { background: yellow; }

   .matrix, .matrix td { border: hidden; text-align: right; }
   .matrix { margin-left: 2em; }

   .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
   .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
   .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }

   td.eg { border-width: thin; text-align: center; }

   #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
   #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
   #table-example-1 caption { padding-bottom: 0.5em; }
   #table-example-1 thead, #table-example-1 tbody { border: none; }
   #table-example-1 th, #table-example-1 td { border: solid thin; }
   #table-example-1 th { font-weight: normal; }
   #table-example-1 td { border-style: none solid; vertical-align: top; }
   #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
   #table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
   #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
   #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
   #table-example-1 tbody td:first-child::after { content: leader(". "); }
   #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
   #table-example-1 tbody td:first-child + td { width: 10em; }
   #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
   #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }

   .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
   .apple-table-examples * { font-family: "Times", serif; }
   .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
   .apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
   .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
   .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
   .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
   .apple-table-examples td { text-align: right; vertical-align: top; }
   .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
   .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
   .apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
   .apple-table-examples sup { line-height: 0; }

   .details-example img { vertical-align: top; }

   #base64-table {
     white-space: nowrap;
     font-size: 0.6em;
     column-width: 6em;
     column-count: 5;
     column-gap: 1em;
     -moz-column-width: 6em;
     -moz-column-count: 5;
     -moz-column-gap: 1em;
     -webkit-column-width: 6em;
     -webkit-column-count: 5;
     -webkit-column-gap: 1em;
   }
   #base64-table thead { display: none; }
   #base64-table * { border: none; }
   #base64-table tbody td:first-child:after { content: ':'; }
   #base64-table tbody td:last-child { text-align: right; }

   #named-character-references-table {
     white-space: nowrap;
     font-size: 0.6em;
     column-width: 30em;
     column-gap: 1em;
     -moz-column-width: 30em;
     -moz-column-gap: 1em;
     -webkit-column-width: 30em;
     -webkit-column-gap: 1em;
   }
   #named-character-references-table > table > tbody > tr > td:first-child + td,
   #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
   #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; }
   #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; }

   .glyph.control { color: red; }

   @font-face {
     font-family: 'Essays1743';
     src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf');
   }
   @font-face {
     font-family: 'Essays1743';
     font-weight: bold;
     src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf');
   }
   @font-face {
     font-family: 'Essays1743';
     font-style: italic;
     src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf');
   }
   @font-face {
     font-family: 'Essays1743';
     font-style: italic;
     font-weight: bold;
     src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf');
   }

  </style><style type="text/css">
   .domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
  </style><script type="text/javascript">
   function getCookie(name) {
     var params = location.search.substr(1).split("&");
     for (var index = 0; index < params.length; index++) {
       if (params[index] == name)
         return "1";
       var data = params[index].split("=");
       if (data[0] == name)
         return unescape(data[1]);
     }
     var cookies = document.cookie.split("; ");
     for (var index = 0; index < cookies.length; index++) {
       var data = cookies[index].split("=");
       if (data[0] == name)
         return unescape(data[1]);
     }
     return null;
   }
  </script>
  <script src="link-fixup.js" type="text/javascript"></script>
  <link href="style.css" rel="stylesheet"><link href="scripting-1.html" title="4.3 Scripting" rel="prev">
  <link href="spec.html#contents" title="Table of contents" rel="index">
  <link href="grouping-content.html" title="4.5 Grouping content" rel="next">
  </head><body>

  <p class="stability" id="wip"><strong>This is a work in
  progress!</strong> For the latest updates from the HTML WG, possibly
  including important bug fixes, please look at the <a href="http://dev.w3.org/html5/spec/Overview.html">editor's draft</a> instead.
  There may also be a more
  <a href="http://www.w3.org/TR/html5">up-to-date Working Draft</a>
   with changes based on resolution of Last Call issues.
  <input onclick="closeWarning(this.parentNode)" type="button" value="&#9587;&#8413;"></p>
  <script type="text/javascript">
   function closeWarning(element) {
     element.parentNode.removeChild(element);
     var date = new Date();
     date.setDate(date.getDate()+4);
     document.cookie = 'hide-obsolescence-warning=1; expires=' + date.toGMTString();
   }
   if (getCookie('hide-obsolescence-warning') == '1')
     setTimeout(function () { document.getElementById('wip').parentNode.removeChild(document.getElementById('wip')); }, 2000);
  </script>

<div class="head" id="head">
   <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>

   <h1>HTML5</h1>
   </div><div>
   <a href="scripting-1.html" class="prev">4.3 Scripting</a> &#8211;
   <a href="spec.html#contents">Table of contents</a> &#8211;
   <a href="grouping-content.html" class="next">4.5 Grouping content</a>
  <ol class="toc"><li><ol><li><a href="sections.html#sections"><span class="secno">4.4 </span>Sections</a>
    <ol><li><a href="sections.html#the-body-element"><span class="secno">4.4.1 </span>The <code>body</code> element</a></li><li><a href="sections.html#the-section-element"><span class="secno">4.4.2 </span>The <code>section</code> element</a></li><li><a href="sections.html#the-nav-element"><span class="secno">4.4.3 </span>The <code>nav</code> element</a></li><li><a href="sections.html#the-article-element"><span class="secno">4.4.4 </span>The <code>article</code> element</a></li><li><a href="sections.html#the-aside-element"><span class="secno">4.4.5 </span>The <code>aside</code> element</a></li><li><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements"><span class="secno">4.4.6 </span>The <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>, and <code>h6</code> elements</a></li><li><a href="sections.html#the-hgroup-element"><span class="secno">4.4.7 </span>The <code>hgroup</code> element</a></li><li><a href="sections.html#the-header-element"><span class="secno">4.4.8 </span>The <code>header</code> element</a></li><li><a href="sections.html#the-footer-element"><span class="secno">4.4.9 </span>The <code>footer</code> element</a></li><li><a href="sections.html#the-address-element"><span class="secno">4.4.10 </span>The <code>address</code> element</a></li><li><a href="sections.html#headings-and-sections"><span class="secno">4.4.11 </span>Headings and sections</a>
      <ol><li><a href="sections.html#outlines"><span class="secno">4.4.11.1 </span>Creating an outline</a></li></ol></li></ol></li></ol></li></ol></div>

  <h3 id="sections"><span class="secno">4.4 </span>Sections</h3><h4 id="the-body-element"><span class="secno">4.4.1 </span>The <dfn><code>body</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="#sectioning-root">Sectioning root</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>As the second element in an <code><a href="semantics.html#the-html-element">html</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dd><code title="handler-window-onafterprint"><a href="webappapis.html#handler-window-onafterprint">onafterprint</a></code></dd>
   <dd><code title="handler-window-onbeforeprint"><a href="webappapis.html#handler-window-onbeforeprint">onbeforeprint</a></code></dd>
   <dd><code title="handler-window-onbeforeunload"><a href="webappapis.html#handler-window-onbeforeunload">onbeforeunload</a></code></dd>
   <dd><code title="handler-window-onblur"><a href="webappapis.html#handler-window-onblur">onblur</a></code></dd>
   <dd><code title="handler-window-onerror"><a href="webappapis.html#handler-window-onerror">onerror</a></code></dd>
   <dd><code title="handler-window-onfocus"><a href="webappapis.html#handler-window-onfocus">onfocus</a></code></dd>
   <dd><code title="handler-window-onhashchange"><a href="webappapis.html#handler-window-onhashchange">onhashchange</a></code></dd>
   <dd><code title="handler-window-onload"><a href="webappapis.html#handler-window-onload">onload</a></code></dd>
   <dd><code title="handler-window-onmessage"><a href="webappapis.html#handler-window-onmessage">onmessage</a></code></dd>
   <dd><code title="handler-window-onoffline"><a href="webappapis.html#handler-window-onoffline">onoffline</a></code></dd>
   <dd><code title="handler-window-ononline"><a href="webappapis.html#handler-window-ononline">ononline</a></code></dd>
   <dd><code title="handler-window-onpagehide"><a href="webappapis.html#handler-window-onpagehide">onpagehide</a></code></dd>
   <dd><code title="handler-window-onpageshow"><a href="webappapis.html#handler-window-onpageshow">onpageshow</a></code></dd>
   <dd><code title="handler-window-onpopstate"><a href="webappapis.html#handler-window-onpopstate">onpopstate</a></code></dd>
   <dd><code title="handler-window-onredo"><a href="webappapis.html#handler-window-onredo">onredo</a></code></dd>
   <dd><code title="handler-window-onresize"><a href="webappapis.html#handler-window-onresize">onresize</a></code></dd>
   <dd><code title="handler-window-onscroll"><a href="webappapis.html#handler-window-onscroll">onscroll</a></code></dd>
   <dd><code title="handler-window-onstorage"><a href="webappapis.html#handler-window-onstorage">onstorage</a></code></dd>
   <dd><code title="handler-window-onundo"><a href="webappapis.html#handler-window-onundo">onundo</a></code></dd>
   <dd><code title="handler-window-onunload"><a href="webappapis.html#handler-window-onunload">onunload</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">interface <dfn id="htmlbodyelement">HTMLBodyElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute <a href="webappapis.html#function">Function</a> <a href="webappapis.html#handler-window-onafterprint" title="handler-window-onafterprint">onafterprint</a>;
           attribute <a href="webappapis.html#function">Function</a> <a href="webappapis.html#handler-window-onbeforeprint" title="handler-window-onbeforeprint">onbeforeprint</a>;
           attribute <a href="webappapis.html#function">Function</a> <a href="webappapis.html#handler-window-onbeforeunload" title="handler-window-onbeforeunload">onbeforeunload</a>;
           attribute <a href="webappapis.html#function">Function</a> <a href="webappapis.html#handler-window-onblur" title="handler-window-onblur">onblur</a>;
           attribute <a href="webappapis.html#function">Function</a> <a href="webappapis.html#handler-window-onerror" title="handler-window-onerror">onerror</a>;
           attribute <a href="webappapis.html#function">Function</a> <a href="webappapis.html#handler-window-onfocus" title="handler-window-onfocus">onfocus</a>;
           attribute <a href="webappapis.html#function">Function</a> <a href="webappapis.html#handler-window-onhashchange" title="handler-window-onhashchange">onhashchange</a>;
           attribute <a href="webappapis.html#function">Function</a> <a href="webappapis.html#handler-window-onload" title="handler-window-onload">onload</a>;
           attribute <a href="webappapis.html#function">Function</a> <a href="webappapis.html#handler-window-onmessage" title="handler-window-onmessage">onmessage</a>;
           attribute <a href="webappapis.html#function">Function</a> <a href="webappapis.html#handler-window-onoffline" title="handler-window-onoffline">onoffline</a>;
           attribute <a href="webappapis.html#function">Function</a> <a href="webappapis.html#handler-window-ononline" title="handler-window-ononline">ononline</a>;
           attribute <a href="webappapis.html#function">Function</a> <a href="webappapis.html#handler-window-onpopstate" title="handler-window-onpopstate">onpopstate</a>;
           attribute <a href="webappapis.html#function">Function</a> <a href="webappapis.html#handler-window-onpagehide" title="handler-window-onpagehide">onpagehide</a>;
           attribute <a href="webappapis.html#function">Function</a> <a href="webappapis.html#handler-window-onpageshow" title="handler-window-onpageshow">onpageshow</a>;
           attribute <a href="webappapis.html#function">Function</a> <a href="webappapis.html#handler-window-onredo" title="handler-window-onredo">onredo</a>;
           attribute <a href="webappapis.html#function">Function</a> <a href="webappapis.html#handler-window-onresize" title="handler-window-onresize">onresize</a>;
           attribute <a href="webappapis.html#function">Function</a> <a href="webappapis.html#handler-window-onscroll" title="handler-window-onscroll">onscroll</a>;
           attribute <a href="webappapis.html#function">Function</a> <a href="webappapis.html#handler-window-onstorage" title="handler-window-onstorage">onstorage</a>;
           attribute <a href="webappapis.html#function">Function</a> <a href="webappapis.html#handler-window-onundo" title="handler-window-onundo">onundo</a>;
           attribute <a href="webappapis.html#function">Function</a> <a href="webappapis.html#handler-window-onunload" title="handler-window-onunload">onunload</a>;
};</pre>
</dd>
  </dl><p>The <code><a href="#the-body-element">body</a></code> element <a href="rendering.html#represents">represents</a> the main
  content of the document.</p><p>In conforming documents, there is only one <code><a href="#the-body-element">body</a></code>
  element. The <code title="dom-document-body"><a href="dom.html#dom-document-body">document.body</a></code>
  IDL attribute provides scripts with easy access to a document's
  <code><a href="#the-body-element">body</a></code> element.</p><div class="impl">

  <p class="note">Some DOM operations (for example, parts of the
  <a href="dnd.html#dnd">drag and drop</a> model) are defined in terms of "<a href="dom.html#the-body-element-0">the
  body element</a>". This refers to a particular element in the
  DOM, as per the definition of the term, and not any arbitrary
  <code><a href="#the-body-element">body</a></code> element.</p>

  </div><p>The <code><a href="#the-body-element">body</a></code> element exposes as <a href="webappapis.html#event-handler-content-attributes">event handler
  content attributes</a> a number of the <a href="webappapis.html#event-handlers">event
  handlers</a> of the <code><a href="browsers.html#window">Window</a></code> object. It also mirrors
  their <a href="webappapis.html#event-handler-idl-attributes">event handler IDL attributes</a>.</p><p>The <code title="handler-window-onblur"><a href="webappapis.html#handler-window-onblur">onblur</a></code>, <code title="handler-window-onerror"><a href="webappapis.html#handler-window-onerror">onerror</a></code>, <code title="handler-window-onfocus"><a href="webappapis.html#handler-window-onfocus">onfocus</a></code>, <code title="handler-window-onload"><a href="webappapis.html#handler-window-onload">onload</a></code>, and <code title="handler-window-onscroll"><a href="webappapis.html#handler-window-onscroll">onscroll</a></code> <a href="webappapis.html#event-handlers">event
  handlers</a> of the <code><a href="browsers.html#window">Window</a></code> object, exposed on the
  <code><a href="#the-body-element">body</a></code> element, shadow the generic <a href="webappapis.html#event-handlers">event
  handlers</a> with the same names normally supported by <a href="infrastructure.html#html-elements">HTML
  elements</a>.</p><p class="example">Thus, for example, a bubbling <code title="event-error">error</code> event fired on a child of <a href="dom.html#the-body-element-0">the
  body element</a> of a <code><a href="infrastructure.html#document">Document</a></code> would first trigger
  the <code title="handler-onerror"><a href="webappapis.html#handler-onerror">onerror</a></code> <a href="webappapis.html#event-handler-content-attributes">event handler
  content attributes</a> of that element, then that of the root
  <code><a href="semantics.html#the-html-element">html</a></code> element, and only <em>then</em> would it trigger
  the <code title="handler-window-onerror"><a href="webappapis.html#handler-window-onerror">onerror</a></code> <a href="webappapis.html#event-handler-content-attributes" title="event handler content attributes">event handler content
  attribute</a> on the <code><a href="#the-body-element">body</a></code> element. This is because
  the event would bubble from the target, to the <code><a href="#the-body-element">body</a></code>, to
  the <code><a href="semantics.html#the-html-element">html</a></code>, to the <code><a href="infrastructure.html#document">Document</a></code>, to the
  <code><a href="browsers.html#window">Window</a></code>, and the <a href="webappapis.html#event-handlers" title="event handlers">event
  handler</a> on the <code><a href="#the-body-element">body</a></code> is watching the
  <code><a href="browsers.html#window">Window</a></code> not the <code><a href="#the-body-element">body</a></code>. A regular event
  listener attached to the <code><a href="#the-body-element">body</a></code> using <code title="">addEventListener()</code>, however, would fire when the
  event bubbled through the <code><a href="#the-body-element">body</a></code> and not when it reaches
  the <code><a href="browsers.html#window">Window</a></code> object.</p><div class="example">

   <p>This page updates an indicator to show whether or not the user
   is online:</p>

   <pre>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;Online or offline?&lt;/title&gt;
  &lt;script&gt;
   function update(online) {
     document.getElementById('status').textContent =
       online ? 'Online' : 'Offline';
   }
  &lt;/script&gt;
 &lt;/head&gt;
 &lt;body ononline="update(true)"
       onoffline="update(false)"
       onload="update(navigator.onLine)"&gt;
  &lt;p&gt;You are: &lt;span id="status"&gt;(Unknown)&lt;/span&gt;&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

  </div><h4 id="the-section-element"><span class="secno">4.4.2 </span>The <dfn><code>section</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
   <dd><a href="content-models.html#sectioning-content">Sectioning content</a>.</dd>
   <dd><a href="dnd.html#formatblock-candidate"><code title="">formatBlock</code> candidate</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href="#the-section-element">section</a></code> element <a href="rendering.html#represents">represents</a> a
  generic section of a document or application. A section, in this
  context, is a thematic grouping of content, typically with a
  heading.</p><p class="example">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.</p><p class="note">Authors are encouraged to use the
  <code><a href="#the-article-element">article</a></code> element instead of the <code><a href="#the-section-element">section</a></code>
  element when it would make sense to syndicate the contents of the
  element.</p><p class="note" id="use-div-for-wrappers">The <code><a href="#the-section-element">section</a></code>
  element is not a generic container element. When an element is
  needed for styling purposes or as a convenience for scripting,
  authors are encouraged to use the <code><a href="grouping-content.html#the-div-element">div</a></code> element
  instead. A general rule is that the <code><a href="#the-section-element">section</a></code> element is
  appropriate only if the element's contents would be listed
  explicitly in the document's <a href="#outline">outline</a>.</p><div class="example">

   <p>In the following example, we see an article (part of a larger
   Web page) about apples, containing two short sections.</p>

   <pre>&lt;article&gt;
 &lt;hgroup&gt;
  &lt;h1&gt;Apples&lt;/h1&gt;
  &lt;h2&gt;Tasty, delicious fruit!&lt;/h2&gt;
 &lt;/hgroup&gt;
 &lt;p&gt;The apple is the pomaceous fruit of the apple tree.&lt;/p&gt;
 &lt;section&gt;
  &lt;h1&gt;Red Delicious&lt;/h1&gt;
  &lt;p&gt;These bright red apples are the most common found in many
  supermarkets.&lt;/p&gt;
 &lt;/section&gt;
 &lt;section&gt;
  &lt;h1&gt;Granny Smith&lt;/h1&gt;
  &lt;p&gt;These juicy, green apples make a great filling for
  apple pies.&lt;/p&gt;
 &lt;/section&gt;
&lt;/article&gt;</pre>

   <p>Notice how the use of <code><a href="#the-section-element">section</a></code> means that the author
   can use <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code> 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.</p>

  </div><div class="example">

   <p>Here is a graduation programme with two sections, one for the
   list of people graduating, and one for the description of the
   ceremony.</p>

   <pre>&lt;!DOCTYPE Html&gt;
&lt;Html
 &gt;&lt;Head
   &gt;&lt;Title
     &gt;Graduation Ceremony Summer 2022&lt;/Title
   &gt;&lt;/Head
 &gt;&lt;Body
   &gt;&lt;H1
     &gt;Graduation&lt;/H1
   &gt;&lt;Section
     &gt;&lt;H1
       &gt;Ceremony&lt;/H1
     &gt;&lt;P
       &gt;Opening Procession&lt;/P
     &gt;&lt;P
       &gt;Speech by Validactorian&lt;/P
     &gt;&lt;P
       &gt;Speech by Class President&lt;/P
     &gt;&lt;P
       &gt;Presentation of Diplomas&lt;/P
     &gt;&lt;P
       &gt;Closing Speech by Headmaster&lt;/P
   &gt;&lt;/Section
   &gt;&lt;Section
     &gt;&lt;H1
       &gt;Graduates&lt;/H1
     &gt;&lt;Ul
       &gt;&lt;Li
         &gt;Molly Carpenter&lt;/Li
       &gt;&lt;Li
         &gt;Anastasia Luccio&lt;/Li
       &gt;&lt;Li
         &gt;Ebenezar McCoy&lt;/Li
       &gt;&lt;Li
         &gt;Karrin Murphy&lt;/Li
       &gt;&lt;Li
         &gt;Thomas Raith&lt;/Li
       &gt;&lt;Li
         &gt;Susan Rodriguez&lt;/Li
     &gt;&lt;/Ul
   &gt;&lt;/Section
 &gt;&lt;/Body
&gt;&lt;/Html&gt;</pre>

  </div><h4 id="the-nav-element"><span class="secno">4.4.3 </span>The <dfn><code>nav</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
   <dd><a href="content-models.html#sectioning-content">Sectioning content</a>.</dd>
   <dd><a href="dnd.html#formatblock-candidate"><code title="">formatBlock</code> candidate</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href="#the-nav-element">nav</a></code> element <a href="rendering.html#represents">represents</a> a section of
  a page that links to other pages or to parts within the page: a
  section with navigation links.</p><p class="note">Not all groups of links on a page need to be in a
  <code><a href="#the-nav-element">nav</a></code> element &#8212; 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 <code><a href="#the-footer-element">footer</a></code> element alone is sufficient
  for such cases; while a <code><a href="#the-nav-element">nav</a></code> element can be used in such
  cases, it is usually unnecessary.</p><p class="note">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 and/or
  provide on request.</p><div class="example">

   <p>In the following example, the page has several places where
   links are present, but only one of those places is considered a
   navigation section.</p>

   <pre>&lt;body&gt;
 &lt;header&gt;
  &lt;h1&gt;Wake up sheeple!&lt;/h1&gt;
  &lt;p&gt;&lt;a href="news.html"&gt;News&lt;/a&gt; -
     &lt;a href="blog.html"&gt;Blog&lt;/a&gt; -
     &lt;a href="forums.html"&gt;Forums&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;Last Modified: &lt;time&gt;2009-04-01&lt;/time&gt;&lt;/p&gt;
  &lt;nav&gt;
   &lt;h1&gt;Navigation&lt;/h1&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a href="articles.html"&gt;Index of all articles&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="today.html"&gt;Things sheeple need to wake up for today&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="successes.html"&gt;Sheeple we have managed to wake&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/nav&gt;
 &lt;/header&gt;
 &lt;div&gt;
  &lt;article&gt;
   &lt;header&gt;
    &lt;h1&gt;My Day at the Beach&lt;/h1&gt;
   &lt;/header&gt;
   &lt;div&gt;
    &lt;p&gt;Today I went to the beach and had a lot of fun.&lt;/p&gt;
    <em>...more content...</em>
   &lt;/div&gt;
   &lt;footer&gt;
    &lt;p&gt;Posted &lt;time pubdate="" datetime="2009-10-10T14:36-08:00"&gt;Thursday&lt;/time&gt;.&lt;/p&gt;
   &lt;/footer&gt;
  &lt;/article&gt;
  <em>...more blog posts...</em>
 &lt;/div&gt;
 &lt;footer&gt;
  &lt;p&gt;Copyright &#169; 2006 The Example Company&lt;/p&gt;
  &lt;p&gt;&lt;a href="about.html"&gt;About&lt;/a&gt; -
     &lt;a href="policy.html"&gt;Privacy Policy&lt;/a&gt; -
     &lt;a href="contact.html"&gt;Contact Us&lt;/a&gt;&lt;/p&gt;
 &lt;/footer&gt;
&lt;/body&gt;</pre>

   <p>Notice the <code><a href="grouping-content.html#the-div-element">div</a></code> elements being used to wrap all the
   contents of the page other than the header and footer, and all the
   contents of the blog entry other than its header and footer.</p>

  </div><div class="example">

   <p>In the following example, there are two <code><a href="#the-nav-element">nav</a></code>
   elements, one for primary navigation around the site, and one for
   secondary navigation around the page itself.</p>

   <pre>&lt;body&gt;
 &lt;h1&gt;The Wiki Center Of Exampland&lt;/h1&gt;
 &lt;nav&gt;
  &lt;ul&gt;
   &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="/events"&gt;Current Events&lt;/a&gt;&lt;/li&gt;
   <em>...more...</em>
  &lt;/ul&gt;
 &lt;/nav&gt;
 &lt;article&gt;
  &lt;header&gt;
   &lt;h1&gt;Demos in Exampland&lt;/h1&gt;
   &lt;p&gt;Written by A. N. Other.&lt;/p&gt;
  &lt;/header&gt;
  &lt;nav&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a href="#public"&gt;Public demonstrations&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#destroy"&gt;Demolitions&lt;/a&gt;&lt;/li&gt;
    <em>...more...</em>
   &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;div&gt;
   &lt;section id="public"&gt;
    &lt;h1&gt;Public demonstrations&lt;/h1&gt;
    &lt;p&gt;<em>...more...</em>&lt;/p&gt;
   &lt;/section&gt;
   &lt;section id="destroy"&gt;
    &lt;h1&gt;Demolitions&lt;/h1&gt;
    &lt;p&gt;<em>...more...</em>&lt;/p&gt;
   &lt;/section&gt;
   <em>...more...</em>
  &lt;/div&gt;
  &lt;footer&gt;
   &lt;p&gt;&lt;a href="?edit"&gt;Edit&lt;/a&gt; | &lt;a href="?delete"&gt;Delete&lt;/a&gt; | &lt;a href="?Rename"&gt;Rename&lt;/a&gt;&lt;/p&gt;
  &lt;/footer&gt;
 &lt;/article&gt;
 &lt;footer&gt;
  &lt;p&gt;&lt;small&gt;&#169; copyright 1998 Exampland Emperor&lt;/small&gt;&lt;/p&gt;
 &lt;/footer&gt;
&lt;/body&gt;</pre>

  </div><div class="example">

   <p>A <code><a href="#the-nav-element">nav</a></code> 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:</p>

   <pre>&lt;nav&gt;
 &lt;h1&gt;Navigation&lt;/h1&gt;
 &lt;p&gt;You are on my home page. To the north lies &lt;a href="/blog"&gt;my
 blog&lt;/a&gt;, from whence the sounds of battle can be heard. To the east
 you can see a large mountain, upon which many &lt;a
 href="/school"&gt;school papers&lt;/a&gt; are littered. Far up thus mountain
 you can spy a little figure who appears to be me, desperately
 scribbling a &lt;a href="/school/thesis"&gt;thesis&lt;/a&gt;.&lt;/p&gt;
 &lt;p&gt;To the west are several exits. One fun-looking exit is labeled &lt;a
 href="http://games.example.com/"&gt;"games"&lt;/a&gt;. Another more
 boring-looking exit is labeled &lt;a
 href="http://isp.example.net/"&gt;ISP&#8482;&lt;/a&gt;.&lt;/p&gt;
 &lt;p&gt;To the south lies a dark and dank &lt;a href="/about"&gt;contacts
 page&lt;/a&gt;. Cobwebs cover its disused entrance, and at one point you
 see a rat run quickly out of the page.&lt;/p&gt;
&lt;/nav&gt;</pre>

  </div><h4 id="the-article-element"><span class="secno">4.4.4 </span>The <dfn><code>article</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
   <dd><a href="content-models.html#sectioning-content">Sectioning content</a>.</dd>
   <dd><a href="dnd.html#formatblock-candidate"><code title="">formatBlock</code> candidate</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href="#the-article-element">article</a></code> element <a href="rendering.html#represents">represents</a> a
  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.</p><p>When <code><a href="#the-article-element">article</a></code> elements are nested, the inner
  <code><a href="#the-article-element">article</a></code> 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 <code><a href="#the-article-element">article</a></code>
  elements nested within the <code><a href="#the-article-element">article</a></code> element for the blog
  entry.</p><p>Author information associated with an <code><a href="#the-article-element">article</a></code>
  element (q.v. the <code><a href="#the-address-element">address</a></code> element) does not apply to
  nested <code><a href="#the-article-element">article</a></code> elements.</p><p class="note">When used specifically with content to be
  redistributed in syndication, the <code><a href="#the-article-element">article</a></code> element is
  similar in purpose to the <code title="">entry</code> element in
  Atom. <a href="references.html#refsATOM">[ATOM]</a>

  </p><p class="note">The <code><a href="text-level-semantics.html#the-time-element">time</a></code> element's <code title="attr-time-pubdate"><a href="text-level-semantics.html#attr-time-pubdate">pubdate</a></code> attribute can be used to
  provide the publication date for an <code><a href="#the-article-element">article</a></code>
  element.</p><div class="example" id="article-example">

   <p>This example shows a blog post using the <code><a href="#the-article-element">article</a></code>
   element:</p>

   <pre>&lt;article&gt;
 &lt;header&gt;
  &lt;h1&gt;The Very First Rule of Life&lt;/h1&gt;
  &lt;p&gt;&lt;time pubdate datetime="2009-10-09T14:28-08:00"&gt;&lt;/time&gt;&lt;/p&gt;
 &lt;/header&gt;
 &lt;p&gt;If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.&lt;/p&gt;
 &lt;p&gt;<em>...</em>&lt;/p&gt;
 &lt;footer&gt;
  &lt;a href="?comments=1"&gt;Show comments...&lt;/a&gt;
 &lt;/footer&gt;
&lt;/article&gt;</pre>

   <p>Here is that same blog post, but showing some of the comments:</p>

   <pre>&lt;article&gt;
 &lt;header&gt;
  &lt;h1&gt;The Very First Rule of Life&lt;/h1&gt;
  &lt;p&gt;&lt;time pubdate datetime="2009-10-09T14:28-08:00"&gt;&lt;/time&gt;&lt;/p&gt;
 &lt;/header&gt;
 &lt;p&gt;If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.&lt;/p&gt;
 &lt;p&gt;<em>...</em>&lt;/p&gt;
 &lt;section&gt;
  &lt;h1&gt;Comments&lt;/h1&gt;
  &lt;article&gt;
   &lt;footer&gt;
    &lt;p&gt;Posted by: George Washington&lt;/p&gt;
    &lt;p&gt;&lt;time pubdate datetime="2009-10-10T19:10-08:00"&gt;&lt;/time&gt;&lt;/p&gt;
   &lt;/footer&gt;
   &lt;p&gt;Yeah! Especially when talking about your lobbyist friends!&lt;/p&gt;
  &lt;/article&gt;
  &lt;article&gt;
   &lt;footer&gt;
    &lt;p&gt;Posted by: George Hammond&lt;/p&gt;
    &lt;p&gt;&lt;time pubdate datetime="2009-10-10T19:15-08:00"&gt;&lt;/time&gt;&lt;/p&gt;
   &lt;/footer&gt;
   &lt;p&gt;Hey, you have the same first name as me.&lt;/p&gt;
  &lt;/article&gt;
 &lt;/section&gt;
&lt;/article&gt;</pre>

   <p>Notice the use of <code><a href="#the-footer-element">footer</a></code> to give the information
   for each comment (such as who wrote it and when): the
   <code><a href="#the-footer-element">footer</a></code> element <em>can</em> appear at the start of its
   section when appropriate, such as in this case. (Using
   <code><a href="#the-header-element">header</a></code> in this case wouldn't be wrong either; it's
   mostly a matter of authoring preference.)</p>

  </div><h4 id="the-aside-element"><span class="secno">4.4.5 </span>The <dfn><code>aside</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
   <dd><a href="content-models.html#sectioning-content">Sectioning content</a>.</dd>
   <dd><a href="dnd.html#formatblock-candidate"><code title="">formatBlock</code> candidate</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href="#the-aside-element">aside</a></code> element <a href="rendering.html#represents">represents</a> a section
  of a page that consists of content that is tangentially related to
  the content around the <code><a href="#the-aside-element">aside</a></code> element, and which could
  be considered separate from that content. Such sections are often
  represented as sidebars in printed typography.</p><p>The element can be used for typographical effects like pull
  quotes or sidebars, for advertising, for groups of <code><a href="#the-nav-element">nav</a></code>
  elements, and for other content that is considered separate from the
  main content of the page.</p><p class="note">It's not appropriate to use the <code><a href="#the-aside-element">aside</a></code>
  element just for parentheticals, since those are part of the main
  flow of the document.</p><div class="example">

   <p>The following example shows how an aside is used to mark up
   background material on Switzerland in a much longer news story on
   Europe.</p>

   <pre>&lt;aside&gt;
 &lt;h1&gt;Switzerland&lt;/h1&gt;
 &lt;p&gt;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.&lt;/p&gt;
&lt;/aside&gt;</pre>

  </div><div class="example">

   <p>The following example shows how an aside is used to mark up
   a pull quote in a longer article.</p>

   <pre>...

&lt;p&gt;He later joined a large company, continuing on the same work.
&lt;q&gt;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.&lt;/q&gt;&lt;/p&gt;

&lt;aside&gt;
 &lt;q&gt; 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. &lt;/q&gt;
&lt;/aside&gt;

&lt;p&gt;Of course his work &#8212; or should that be hobby? &#8212;
isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;

...</pre>

  </div><div class="example">

   <p>The following extract shows how <code><a href="#the-aside-element">aside</a></code> can be used
   for blogrolls and other side content on a blog:</p>

   <pre>&lt;body&gt;
 &lt;header&gt;
  &lt;h1&gt;My wonderful blog&lt;/h1&gt;
  &lt;p&gt;My tagline&lt;/p&gt;
 &lt;/header&gt;
 &lt;aside&gt;
  &lt;!-- <em>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</em> --&gt;
  &lt;nav&gt;
   &lt;h1&gt;My blogroll&lt;/h1&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a href="http://blog.example.com/"&gt;Example Blog&lt;/a&gt;
   &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;nav&gt;
   &lt;h1&gt;Archives&lt;/h1&gt;
   &lt;ol reversed&gt;
    &lt;li&gt;&lt;a href="/last-post"&gt;My last post&lt;/a&gt;
    &lt;li&gt;&lt;a href="/first-post"&gt;My first post&lt;/a&gt;
   &lt;/ol&gt;
  &lt;/nav&gt;
 &lt;/aside&gt;
 &lt;aside&gt;
  &lt;!-- <em>this aside is tangentially related to the page also, it
  contains twitter messages from the blog author</em> --&gt;
  &lt;h1&gt;Twitter Feed&lt;/h1&gt;
  &lt;blockquote cite="http://twitter.example.net/t31351234"&gt;
   I'm on vacation, writing my blog.
  &lt;/blockquote&gt;
  &lt;blockquote cite="http://twitter.example.net/t31219752"&gt;
   I'm going to go on vacation soon.
  &lt;/blockquote&gt;
 &lt;/aside&gt;
 &lt;article&gt;
  &lt;!-- <em>this is a blog post</em> --&gt;
  &lt;h1&gt;My last post&lt;/h1&gt;
  &lt;p&gt;This is my last post.&lt;/p&gt;
  &lt;footer&gt;
   &lt;p&gt;&lt;a href="/last-post" rel=bookmark&gt;Permalink&lt;/a&gt;
  &lt;/footer&gt;
 &lt;/article&gt;
 &lt;article&gt;
  &lt;!-- <em>this is also a blog post</em> --&gt;
  &lt;h1&gt;My first post&lt;/h1&gt;
  &lt;p&gt;This is my first post.&lt;/p&gt;
  &lt;aside&gt;
   &lt;!-- <em>this aside is about the blog post, since it's inside the
   &lt;article&gt; 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</em> --&gt;
   &lt;h1&gt;Posting&lt;/h1&gt;
   &lt;p&gt;While I'm thinking about it, I wanted to say something about
   posting. Posting is fun!&lt;/p&gt;
  &lt;/aside&gt;
  &lt;footer&gt;
   &lt;p&gt;&lt;a href="/first-post" rel=bookmark&gt;Permalink&lt;/a&gt;
  &lt;/footer&gt;
 &lt;/article&gt;
 &lt;footer&gt;
  &lt;nav&gt;
   &lt;a href="/archives"&gt;Archives&lt;/a&gt; &#8212;
   &lt;a href="/about"&gt;About me&lt;/a&gt; &#8212;
   &lt;a href="/copyright"&gt;Copyright&lt;/a&gt;
  &lt;/nav&gt;
 &lt;/footer&gt;
&lt;/body&gt;</pre>

  </div><h4 id="the-h1-h2-h3-h4-h5-and-h6-elements"><span class="secno">4.4.6 </span>The <dfn id="the-h1-element"><code>h1</code></dfn>, <dfn id="the-h2-element"><code>h2</code></dfn>, <dfn id="the-h3-element"><code>h3</code></dfn>, <dfn id="the-h4-element"><code>h4</code></dfn>, <dfn id="the-h5-element"><code>h5</code></dfn>, and <dfn id="the-h6-element"><code>h6</code></dfn> elements</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
   <dd><a href="content-models.html#heading-content">Heading content</a>.</dd>
   <dd><a href="dnd.html#formatblock-candidate"><code title="">formatBlock</code> candidate</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>As a child of an <code><a href="#the-hgroup-element">hgroup</a></code> element.</dd>
   <dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>
    <pre class="idl">interface <dfn id="htmlheadingelement">HTMLHeadingElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre>
   </dd>
  </dl><p>These elements <a href="rendering.html#represents" title="represents">represent</a> headings
  for their sections.</p><p>The semantics and meaning of these elements are defined in the
  section on <a href="#headings-and-sections">headings and sections</a>.</p><p>These elements have a <dfn id="rank">rank</dfn> given by the number in
  their name. The <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code> element is said to have the highest
  rank, the <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code> element has the lowest rank, and two
  elements with the same name have equal rank.</p><div class="example">

   <p>These two snippets are equivalent:</p>

   <pre>&lt;body&gt;
&lt;h1&gt;Let's call it a draw(ing surface)&lt;/h1&gt;
&lt;h2&gt;Diving in&lt;/h2&gt;
&lt;h2&gt;Simple shapes&lt;/h2&gt;
&lt;h2&gt;Canvas coordinates&lt;/h2&gt;
&lt;h3&gt;Canvas coordinates diagram&lt;/h3&gt;
&lt;h2&gt;Paths&lt;/h2&gt;
&lt;/body&gt;</pre>

   <pre>&lt;body&gt;
 &lt;h1&gt;Let's call it a draw(ing surface)&lt;/h1&gt;
 &lt;section&gt;
  &lt;h1&gt;Diving in&lt;/h1&gt;
 &lt;/section&gt;
 &lt;section&gt;
  &lt;h1&gt;Simple shapes&lt;/h1&gt;
 &lt;/section&gt;
 &lt;section&gt;
  &lt;h1&gt;Canvas coordinates&lt;/h1&gt;
  &lt;section&gt;
   &lt;h1&gt;Canvas coordinates diagram&lt;/h1&gt;
  &lt;/section&gt;
 &lt;/section&gt;
 &lt;section&gt;
  &lt;h1&gt;Paths&lt;/h1&gt;
 &lt;/section&gt;
&lt;/body&gt;</pre>

  </div><h4 id="the-hgroup-element"><span class="secno">4.4.7 </span>The <dfn><code>hgroup</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
   <dd><a href="content-models.html#heading-content">Heading content</a>.</dd>
   <dd><a href="dnd.html#formatblock-candidate"><code title="">formatBlock</code> candidate</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>One or more <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>, <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code>, <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h3</a></code>, <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h4</a></code>, <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h5</a></code>, and/or <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code> elements.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href="#the-hgroup-element">hgroup</a></code> element <a href="rendering.html#represents">represents</a> the
  heading of a section. The element is used to group a set of
  <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>&#8211;<code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code> elements when the heading has
  multiple levels, such as subheadings, alternative titles, or
  taglines.</p><p>For the purposes of document summaries, outlines, and the like,
  the text of <code><a href="#the-hgroup-element">hgroup</a></code> elements is defined to be the text
  of the highest <a href="#rank" title="rank">ranked</a>
  <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>&#8211;<code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code> element descendant of the
  <code><a href="#the-hgroup-element">hgroup</a></code> element, if there are any such elements, and the
  first such element if there are multiple elements with that
  <a href="#rank">rank</a>. If there are no such elements, then the text of
  the <code><a href="#the-hgroup-element">hgroup</a></code> element is the empty string.</p><p>Other elements of <a href="content-models.html#heading-content">heading content</a> in the
  <code><a href="#the-hgroup-element">hgroup</a></code> element indicate subheadings or subtitles.</p><p>The <a href="#rank">rank</a> of an <code><a href="#the-hgroup-element">hgroup</a></code> element is the
  rank of the highest-ranked <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>&#8211;<code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code>
  element descendant of the <code><a href="#the-hgroup-element">hgroup</a></code> element, if there are
  any such elements, or otherwise the same as for an <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>
  element (the highest rank).</p><p>The section on <a href="#headings-and-sections">headings and sections</a>
  defines how <code><a href="#the-hgroup-element">hgroup</a></code> elements are assigned to individual
  sections.</p><div class="example">

   <p>Here are some examples of valid headings. In each case, the
   emphasized text represents the text that would be used as the
   heading in an application extracting heading data and ignoring
   subheadings.</p>

   <pre>&lt;hgroup&gt;
 &lt;h1&gt;<strong>The reality dysfunction</strong>&lt;/h1&gt;
 &lt;h2&gt;Space is not the only void&lt;/h2&gt;
&lt;/hgroup&gt;</pre>

   <pre>&lt;hgroup&gt;
 &lt;h1&gt;<strong>Dr. Strangelove</strong>&lt;/h1&gt;
 &lt;h2&gt;Or: How I Learned to Stop Worrying and Love the Bomb&lt;/h2&gt;
&lt;/hgroup&gt;</pre>

  <p>The point of using <code><a href="#the-hgroup-element">hgroup</a></code> in these examples is to
  mask the <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code> element (which acts as a secondary title)
  from the <a href="#outline">outline</a> algorithm.</p>
  </div><h4 id="the-header-element"><span class="secno">4.4.8 </span>The <dfn><code>header</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
   <dd><a href="dnd.html#formatblock-candidate"><code title="">formatBlock</code> candidate</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>, but with no <code><a href="#the-header-element">header</a></code> or
   <code><a href="#the-footer-element">footer</a></code> element descendants.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href="#the-header-element">header</a></code> element <a href="rendering.html#represents">represents</a> a group
  of introductory or navigational aids.</p><p class="note">A <code><a href="#the-header-element">header</a></code> element is intended to usually
  contain the section's heading (an
  <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>&#8211;<code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code> element or an
  <code><a href="#the-hgroup-element">hgroup</a></code> element), but this is not required. The
  <code><a href="#the-header-element">header</a></code> element can also be used to wrap a section's
  table of contents, a search form, or any relevant logos.</p><div class="example">

  <p>Here are some sample headers. This first one is for a game:</p>

   <pre>&lt;header&gt;
 &lt;p&gt;Welcome to...&lt;/p&gt;
 &lt;h1&gt;Voidwars!&lt;/h1&gt;
&lt;/header&gt;</pre>

   <p>The following snippet shows how the element can be used to mark
   up a specification's header:</p>

   <pre>&lt;header&gt;
 &lt;hgroup&gt;
  &lt;h1&gt;Scalable Vector Graphics (SVG) 1.2&lt;/h1&gt;
  &lt;h2&gt;W3C Working Draft 27 October 2004&lt;/h2&gt;
 &lt;/hgroup&gt;
 &lt;dl&gt;
  &lt;dt&gt;This version:&lt;/dt&gt;
  &lt;dd&gt;&lt;a href="http://www.w3.org/TR/2004/WD-SVG12-20041027/"&gt;http://www.w3.org/TR/2004/WD-SVG12-20041027/&lt;/a&gt;&lt;/dd&gt;
  &lt;dt&gt;Previous version:&lt;/dt&gt;
  &lt;dd&gt;&lt;a href="http://www.w3.org/TR/2004/WD-SVG12-20040510/"&gt;http://www.w3.org/TR/2004/WD-SVG12-20040510/&lt;/a&gt;&lt;/dd&gt;
  &lt;dt&gt;Latest version of SVG 1.2:&lt;/dt&gt;
  &lt;dd&gt;&lt;a href="http://www.w3.org/TR/SVG12/"&gt;http://www.w3.org/TR/SVG12/&lt;/a&gt;&lt;/dd&gt;
  &lt;dt&gt;Latest SVG Recommendation:&lt;/dt&gt;
  &lt;dd&gt;&lt;a href="http://www.w3.org/TR/SVG/"&gt;http://www.w3.org/TR/SVG/&lt;/a&gt;&lt;/dd&gt;
  &lt;dt&gt;Editor:&lt;/dt&gt;
  &lt;dd&gt;Dean Jackson, W3C, &lt;a href="mailto:dean@w3.org"&gt;dean@w3.org&lt;/a&gt;&lt;/dd&gt;
  &lt;dt&gt;Authors:&lt;/dt&gt;
  &lt;dd&gt;See &lt;a href="#authors"&gt;Author List&lt;/a&gt;&lt;/dd&gt;
 &lt;/dl&gt;
 &lt;p class="copyright"&gt;&lt;a href="http://www.w3.org/Consortium/Legal/ipr-notic <em>...</em>
&lt;/header&gt;</pre>

  </div><p class="note">The <code><a href="#the-header-element">header</a></code> element is not
  <a href="content-models.html#sectioning-content">sectioning content</a>; it doesn't introduce a new
  section.</p><div class="example">

  <p>In this example, the page has a page heading given by the
  <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code> element, and two subsections whose headings are
  given by <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code> elements. The content after the
  <code><a href="#the-header-element">header</a></code> element is still part of the last subsection
  started in the <code><a href="#the-header-element">header</a></code> element, because the
  <code><a href="#the-header-element">header</a></code> element doesn't take part in the
  <a href="#outline">outline</a> algorithm.</p>

   <pre>&lt;body&gt;
 &lt;header&gt;
  &lt;h1&gt;Little Green Guys With Guns&lt;/h1&gt;
  &lt;nav&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a href="/games"&gt;Games&lt;/a&gt;
    &lt;li&gt;&lt;a href="/forum"&gt;Forum&lt;/a&gt;
    &lt;li&gt;&lt;a href="/download"&gt;Download&lt;/a&gt;
   &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;h2&gt;Important News&lt;/h2&gt; &lt;!-- this starts a second subsection --&gt;
  &lt;!-- this is part of the subsection entitled "Important News" --&gt;
  &lt;p&gt;To play today's games you will need to update your client.&lt;/p&gt;
  &lt;h2&gt;Games&lt;/h2&gt; &lt;!-- this starts a third subsection --&gt;
 &lt;/header&gt;
 &lt;p&gt;You have three active games:&lt;/p&gt;
 &lt;!-- this is still part of the subsection entitled "Games" --&gt;
 ...</pre>

  </div><h4 id="the-footer-element"><span class="secno">4.4.9 </span>The <dfn><code>footer</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
   <dd><a href="dnd.html#formatblock-candidate"><code title="">formatBlock</code> candidate</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>, but with no <code><a href="#the-header-element">header</a></code> or
   <code><a href="#the-footer-element">footer</a></code> element descendants.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href="#the-footer-element">footer</a></code> element <a href="rendering.html#represents">represents</a> a footer
  for its nearest ancestor <a href="content-models.html#sectioning-content">sectioning content</a> or
  <a href="#sectioning-root">sectioning root</a> element. A footer typically contains
  information about its section such as who wrote it, links to related
  documents, copyright data, and the like.</p><p>When the <code><a href="#the-footer-element">footer</a></code> element contains entire sections,
  they <a href="rendering.html#represents" title="represents">represent</a> appendices, indexes,
  long colophons, verbose license agreements, and other such
  content.</p><p class="note">Contact information for the author or editor of a
  section belongs in an <code><a href="#the-address-element">address</a></code> element, possibly itself
  inside a <code><a href="#the-footer-element">footer</a></code>.</p><p>Footers don't necessarily have to appear at the <em>end</em> of a
  section, though they usually do.</p><p>When the nearest ancestor <a href="content-models.html#sectioning-content">sectioning content</a> or
  <a href="#sectioning-root">sectioning root</a> element is <a href="dom.html#the-body-element-0">the body
  element</a>, then it applies to the whole page.</p><p class="note">The <code><a href="#the-footer-element">footer</a></code> element is not
  <a href="content-models.html#sectioning-content">sectioning content</a>; it doesn't introduce a new
  section.</p><div class="example">

   <p>Here is a page with two footers, one at the top and one at the
   bottom, with the same content:</p>

   <pre>&lt;body&gt;
 &lt;footer&gt;&lt;a href="../"&gt;Back to index...&lt;/a&gt;&lt;/footer&gt;
 &lt;hgroup&gt;
  &lt;h1&gt;Lorem ipsum&lt;/h1&gt;
  &lt;h2&gt;The ipsum of all lorems&lt;/h2&gt;
 &lt;/hgroup&gt;
 &lt;p&gt;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.&lt;/p&gt;
 &lt;footer&gt;&lt;a href="../"&gt;Back to index...&lt;/a&gt;&lt;/footer&gt;
&lt;/body&gt;</pre>

  </div><div class="example">

   <p>Here is an example which shows the <code><a href="#the-footer-element">footer</a></code> element
   being used both for a site-wide footer and for a section
   footer.</p>

   <pre>&lt;!DOCTYPE HTML&gt;
&lt;HTML&gt;&lt;HEAD&gt;
&lt;TITLE&gt;The Ramblings of a Scientist&lt;/TITLE&gt;
&lt;BODY&gt;
&lt;H1&gt;The Ramblings of a Scientist&lt;/H1&gt;
&lt;ARTICLE&gt;
 &lt;H1&gt;Episode 15&lt;/H1&gt;
 &lt;VIDEO SRC="/fm/015.ogv" CONTROLS PRELOAD&gt;
  &lt;P&gt;&lt;A HREF="/fm/015.ogv"&gt;Download video&lt;/A&gt;.&lt;/P&gt;
 &lt;/VIDEO&gt;
 &lt;FOOTER&gt; &lt;!-- footer for article --&gt;
  &lt;P&gt;Published &lt;TIME PUBDATE DATETIME="2009-10-21T18:26-07:00"&gt;&lt;/TIME&gt;&lt;/P&gt;
 &lt;/FOOTER&gt;
&lt;/ARTICLE&gt;
&lt;ARTICLE&gt;
 &lt;H1&gt;My Favorite Trains&lt;/H1&gt;
 &lt;P&gt;I love my trains. My favorite train of all time is a K&#246;f.&lt;/P&gt;
 &lt;P&gt;It is fun to see them pull some coal cars because they look so
 dwarfed in comparison.&lt;/P&gt;
 &lt;FOOTER&gt; &lt;!-- footer for article --&gt;
  &lt;P&gt;Published &lt;TIME PUBDATE DATETIME="2009-09-15T14:54-07:00"&gt;&lt;/TIME&gt;&lt;/P&gt;
 &lt;/FOOTER&gt;
&lt;/ARTICLE&gt;
&lt;FOOTER&gt; &lt;!-- site wide footer --&gt;
 &lt;NAV&gt;
  &lt;P&gt;&lt;A HREF="/credits.html"&gt;Credits&lt;/A&gt; &#8212;
     &lt;A HREF="/tos.html"&gt;Terms of Service&lt;/A&gt; &#8212;
     &lt;A HREF="/index.html"&gt;Blog Index&lt;/A&gt;&lt;/P&gt;
 &lt;/NAV&gt;
 &lt;P&gt;Copyright &#169; 2009 Gordon Freeman&lt;/P&gt;
&lt;/FOOTER&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;</pre>

  </div><div class="example">

   <p>Some site designs have what is sometimes referred to as "fat
   footers" &#8212; 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.</p>

   <p>This fragment shows the bottom of a page on a site with a "fat
   footer":</p>

   <pre>...
 &lt;footer&gt;
  &lt;nav&gt;
   &lt;section&gt;
    &lt;h1&gt;Articles&lt;/h1&gt;
    &lt;p&gt;&lt;img src="somersaults.jpeg" alt=""&gt; Go to the gym with
    our somersaults class! Our teacher Jim takes you through the paces
    in this two-part article. &lt;a href="articles/somersaults/1"&gt;Part
    1&lt;/a&gt; &#183; &lt;a href="articles/somersaults/1"&gt;Part 2&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;&lt;img src="kindplus.jpeg"&gt; Tired of walking on the edge of
    a clif&lt;!-- sic --&gt;? Our guest writer Lara shows you how to bumble
    your way through the bars. &lt;a href="articles/kindplus/1"&gt;Read
    more...&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;&lt;img src="crisps.jpeg"&gt; The chips are down, now all
    that's left is a potato. What can you do with it? &lt;a
    href="articles/crisps/1"&gt;Read more...&lt;/a&gt;&lt;/p&gt;
   &lt;/section&gt;
   &lt;ul&gt;
    &lt;li&gt; &lt;a href="/about"&gt;About us...&lt;/a&gt;
    &lt;li&gt; &lt;a href="/feedback"&gt;Send feedback!&lt;/a&gt;
    &lt;li&gt; &lt;a href="/sitemap"&gt;Sitemap&lt;/a&gt;
   &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;p&gt;&lt;small&gt;Copyright &#169; 2015 The Snacker &#8212;
  &lt;a href="/tos"&gt;Terms of Service&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
 &lt;/footer&gt;
&lt;/body&gt;</pre>

  </div><h4 id="the-address-element"><span class="secno">4.4.10 </span>The <dfn><code>address</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
   <dd><a href="dnd.html#formatblock-candidate"><code title="">formatBlock</code> candidate</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>, but with no <a href="content-models.html#heading-content">heading
   content</a> descendants, no <a href="content-models.html#sectioning-content">sectioning content</a>
   descendants, and no <code><a href="#the-header-element">header</a></code>, <code><a href="#the-footer-element">footer</a></code>, or
   <code><a href="#the-address-element">address</a></code> element descendants.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
  </dl><p>The <code><a href="#the-address-element">address</a></code> element <a href="rendering.html#represents">represents</a> the
  contact information for its nearest <code><a href="#the-article-element">article</a></code> or
  <code><a href="#the-body-element">body</a></code> element ancestor. If that is <a href="dom.html#the-body-element-0">the body
  element</a>, then the contact information applies to the document
  as a whole.</p><div class="example">
   <p>For example, a page at the W3C Web site related to HTML might
   include the following contact information:</p>
   <pre>&lt;ADDRESS&gt;
 &lt;A href="../People/Raggett/"&gt;Dave Raggett&lt;/A&gt;,
 &lt;A href="../People/Arnaud/"&gt;Arnaud Le Hors&lt;/A&gt;,
 contact persons for the &lt;A href="Activity"&gt;W3C HTML Activity&lt;/A&gt;
&lt;/ADDRESS&gt;</pre>
  </div><p>The <code><a href="#the-address-element">address</a></code> element must not be used to represent
  arbitrary addresses (e.g. postal addresses), unless those addresses
  are in fact the relevant contact information. (The <code><a href="grouping-content.html#the-p-element">p</a></code>
  element is the appropriate element for marking up postal addresses
  in general.)</p><p>The <code><a href="#the-address-element">address</a></code> element must not contain information
  other than contact information.</p><div class="example">
   <p>For example, the following is non-conforming use of the
   <code><a href="#the-address-element">address</a></code> element:</p>
   <pre class="bad">&lt;ADDRESS&gt;Last Modified: 1999/12/24 23:37:50&lt;/ADDRESS&gt;</pre>
  </div><p>Typically, the <code><a href="#the-address-element">address</a></code> element would be included
  along with other information in a <code><a href="#the-footer-element">footer</a></code> element.</p><div class="impl">

  <p>The contact information for a node <var title="">node</var> is a
  collection of <code><a href="#the-address-element">address</a></code> elements defined by the first
  applicable entry from the following list:</p>

  <dl class="switch"><dt>If <var title="">node</var> is an <code><a href="#the-article-element">article</a></code> element</dt>
   <dt>If <var title="">node</var> is a <code><a href="#the-body-element">body</a></code> element</dt>

   <dd>

    <p>The contact information consists of all the
    <code><a href="#the-address-element">address</a></code> elements that have <var title="">node</var>
    as an ancestor and do not have another <code><a href="#the-body-element">body</a></code> or
    <code><a href="#the-article-element">article</a></code> element ancestor that is a descendant of <var title="">node</var>.</p>

   </dd>

   <dt>If <var title="">node</var> has an ancestor element that is an <code><a href="#the-article-element">article</a></code> element</dt>
   <dt>If <var title="">node</var> has an ancestor element that is a <code><a href="#the-body-element">body</a></code> element</dt>

   <dd>

    <p>The contact information of <var title="">node</var> is the same
    as the contact information of the nearest <code><a href="#the-article-element">article</a></code> or
    <code><a href="#the-body-element">body</a></code> element ancestor, whichever is nearest.</p>

   </dd>

   <dt>If <var title="">node</var>'s <code><a href="infrastructure.html#document">Document</a></code> has <a href="dom.html#the-body-element-0" title="the body element">a body element</a></dt>

   <dd>

    <p>The contact information of <var title="">node</var> is the same
    as the contact information of <a href="dom.html#the-body-element-0">the body element</a> of the
    <code><a href="infrastructure.html#document">Document</a></code>.</p>

   </dd>

   <dt>Otherwise</dt>

   <dd>

    <p>There is no contact information for <var title="">node</var>.</p>

   </dd>

  </dl><p>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.</p>

  </div><div class="example">

   <p>In this example the footer contains contact information and a
   copyright notice.</p>

   <pre>&lt;footer&gt;
 &lt;address&gt;
  For more details, contact
  &lt;a href="mailto:js@example.com"&gt;John Smith&lt;/a&gt;.
 &lt;/address&gt;
 &lt;p&gt;&lt;small&gt;&#169; copyright 2038 Example Corp.&lt;/small&gt;&lt;/p&gt;
&lt;/footer&gt;</pre>

  </div><h4 id="headings-and-sections"><span class="secno">4.4.11 </span><dfn>Headings and sections</dfn></h4><p>The <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>&#8211;<code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code> elements and the
  <code><a href="#the-hgroup-element">hgroup</a></code> element are headings.</p><p>The first element of <a href="content-models.html#heading-content">heading content</a> in an element
  of <a href="content-models.html#sectioning-content">sectioning content</a> <a href="rendering.html#represents">represents</a> the
  heading for that section. Subsequent headings of equal or higher
  <a href="#rank">rank</a> start new (implied) sections, headings of lower
  <a href="#rank">rank</a> start implied subsections that are part of the
  previous one. In both cases, the element <a href="rendering.html#represents">represents</a> the
  heading of the implied section.</p><p>Certain elements are said to be <dfn id="sectioning-root" title="sectioning
  root">sectioning roots</dfn>, including <code><a href="grouping-content.html#the-blockquote-element">blockquote</a></code> and
  <code><a href="tabular-data.html#the-td-element">td</a></code> 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.</p><ul class="brief category-list"><li><code><a href="grouping-content.html#the-blockquote-element">blockquote</a></code></li>
   <li><code><a href="#the-body-element">body</a></code></li>
   <li><code><a href="interactive-elements.html#the-details-element">details</a></code></li>
   <li><code><a href="forms.html#the-fieldset-element">fieldset</a></code></li>
   <li><code><a href="grouping-content.html#the-figure-element">figure</a></code></li>
   <li><code><a href="tabular-data.html#the-td-element">td</a></code></li>
  </ul><p><a href="content-models.html#sectioning-content">Sectioning content</a> elements are always considered
  subsections of their nearest ancestor <a href="#sectioning-root">sectioning root</a>
  or their nearest ancestor element of <a href="content-models.html#sectioning-content">sectioning
  content</a>, whichever is nearest, regardless of what implied
  sections other headings may have created.</p><div class="example">
   <p>For the following fragment:</p>
   <pre>&lt;body&gt;
 &lt;h1&gt;Foo&lt;/h1&gt;
 &lt;h2&gt;Bar&lt;/h2&gt;
 &lt;blockquote&gt;
  &lt;h3&gt;Bla&lt;/h3&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;Baz&lt;/p&gt;
 &lt;h2&gt;Quux&lt;/h2&gt;
 &lt;section&gt;
  &lt;h3&gt;Thud&lt;/h3&gt;
 &lt;/section&gt;
 &lt;p&gt;Grunt&lt;/p&gt;
&lt;/body&gt;</pre>
   <p>...the structure would be:</p>
   <ol><li>
     Foo (heading of explicit <code><a href="#the-body-element">body</a></code> section, containing the "Grunt" paragraph)
     <ol><li>
       Bar (heading starting implied section, containing a block quote and the "Baz" paragraph)
      </li>
      <li>
       Quux (heading starting implied section with no content other than the heading itself)
      </li>
      <li>
       Thud (heading of explicit <code><a href="#the-section-element">section</a></code> section)
      </li>
     </ol></li>
   </ol><p>Notice how the <code><a href="#the-section-element">section</a></code> ends the earlier implicit
   section so that a later paragraph ("Grunt") is back at the top
   level.</p>
  </div><p>Sections may contain headings of any <a href="#rank">rank</a>, but
  authors are strongly encouraged to either use only <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>
  elements, or to use elements of the appropriate <a href="#rank">rank</a>
  for the section's nesting level.</p><p>Authors are also encouraged to explicitly wrap sections in
  elements of <a href="content-models.html#sectioning-content">sectioning content</a>, instead of relying on
  the implicit sections generated by having multiple headings in one
  element of <a href="content-models.html#sectioning-content">sectioning content</a>.</p><div class="example">
   <p>For example, the following is correct:</p>

   <pre>&lt;body&gt;
 &lt;h4&gt;Apples&lt;/h4&gt;
 &lt;p&gt;Apples are fruit.&lt;/p&gt;
 &lt;section&gt;
  &lt;h2&gt;Taste&lt;/h2&gt;
  &lt;p&gt;They taste lovely.&lt;/p&gt;
  &lt;h6&gt;Sweet&lt;/h6&gt;
  &lt;p&gt;Red apples are sweeter than green ones.&lt;/p&gt;
  &lt;h1&gt;Color&lt;/h1&gt;
  &lt;p&gt;Apples come in various colors.&lt;/p&gt;
 &lt;/section&gt;
&lt;/body&gt;</pre>

   <p>However, the same document would be more clearly expressed
   as:</p>

   <pre>&lt;body&gt;
 &lt;h1&gt;Apples&lt;/h1&gt;
 &lt;p&gt;Apples are fruit.&lt;/p&gt;
 &lt;section&gt;
  &lt;h2&gt;Taste&lt;/h2&gt;
  &lt;p&gt;They taste lovely.&lt;/p&gt;
  &lt;section&gt;
   &lt;h3&gt;Sweet&lt;/h3&gt;
   &lt;p&gt;Red apples are sweeter than green ones.&lt;/p&gt;
  &lt;/section&gt;
 &lt;/section&gt;
 &lt;section&gt;
  &lt;h2&gt;Color&lt;/h2&gt;
  &lt;p&gt;Apples come in various colors.&lt;/p&gt;
 &lt;/section&gt;
&lt;/body&gt;</pre>

   <p>Both of the documents above are semantically identical and would
   produce the same outline in compliant user agents.</p>

   <p>This third example is also semantically identical, and might be
   easier to maintain (e.g. if sections are often moved around in
   editing):</p>

   <pre>&lt;body&gt;
 &lt;h1&gt;Apples&lt;/h1&gt;
 &lt;p&gt;Apples are fruit.&lt;/p&gt;
 &lt;section&gt;
  &lt;h1&gt;Taste&lt;/h1&gt;
  &lt;p&gt;They taste lovely.&lt;/p&gt;
  &lt;section&gt;
   &lt;h1&gt;Sweet&lt;/h1&gt;
   &lt;p&gt;Red apples are sweeter than green ones.&lt;/p&gt;
  &lt;/section&gt;
 &lt;/section&gt;
 &lt;section&gt;
  &lt;h1&gt;Color&lt;/h1&gt;
  &lt;p&gt;Apples come in various colors.&lt;/p&gt;
 &lt;/section&gt;
&lt;/body&gt;</pre>

  </div><h5 id="outlines"><span class="secno">4.4.11.1 </span>Creating an outline</h5><div class="impl">


  <p>This section defines an algorithm for creating an outline for a
  <a href="content-models.html#sectioning-content">sectioning content</a> element or a <a href="#sectioning-root">sectioning
  root</a> element. It is defined in terms of a walk over the nodes
  of a DOM tree, in tree order, with each node being visited when it
  is <i>entered</i> and when it is <i>exited</i> during the walk.</p>

  </div><p>The <dfn id="outline">outline</dfn> for a <a href="content-models.html#sectioning-content">sectioning content</a>
  element or a <a href="#sectioning-root">sectioning root</a> element consists of a list
  of one or more potentially nested <a href="#concept-section" title="concept-section">sections</a>. A <dfn id="concept-section" title="concept-section">section</dfn> 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. <span class="impl">The algorithm for the
  outline also associates each node in the DOM tree with a particular
  section and potentially a heading.</span> (The sections in the
  outline aren't <code><a href="#the-section-element">section</a></code> elements, though some may
  correspond to such elements &#8212; they are merely conceptual
  sections.)</p><div class="example">

   <p>The following markup fragment:</p>

   <pre>&lt;body&gt;
 &lt;h1&gt;A&lt;/h1&gt;
 &lt;p&gt;B&lt;/p&gt;
 &lt;h2&gt;C&lt;/h2&gt;
 &lt;p&gt;D&lt;/p&gt;
 &lt;h2&gt;E&lt;/h2&gt;
 &lt;p&gt;F&lt;/p&gt;
&lt;/body&gt;</pre>

   <p>...results in the following outline being created for the
   <code><a href="#the-body-element">body</a></code> node (and thus the entire document):</p>

   <ol class="brief"><li>
     <p>Section created for <code><a href="#the-body-element">body</a></code> node.</p>
     <p>Associated with heading "A".</p>
     <p>Also associated with paragraph "B".</p>
     <p>Nested sections:</p>
     <ol class="brief"><li>
       <p>Section implied for first <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code> element.</p>
       <p>Associated with heading "C".</p>
       <p>Also associated with paragraph "D".</p>
       <p>No nested sections.</p>
      </li>
      <li>
       <p>Section implied for second <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code> element.</p>
       <p>Associated with heading "E".</p>
       <p>Also associated with paragraph "F".</p>
       <p>No nested sections.</p>
      </li>
     </ol></li>
   </ol></div><div class="impl">

  <p>The algorithm that must be followed during a walk of a DOM
  subtree rooted at a <a href="content-models.html#sectioning-content">sectioning content</a> element or a
  <a href="#sectioning-root">sectioning root</a> element to determine that element's
  <a href="#outline">outline</a> is as follows:</p>

  <ol><li><p>Let <var title="">current outlinee</var> be null. (It holds
   the element whose <a href="#outline">outline</a> is being created.)</p></li>

   <li><p>Let <var title="">current section</var> be null. (It holds a
   pointer to a <a href="#concept-section" title="concept-section">section</a>, so that
   elements in the DOM can all be associated with a section.)</p></li>

   <li><p>Create a stack to hold elements, which is used to handle
   nesting. Initialize this stack to empty.</p></li>

   <li>

    <p>As you walk over the DOM in <a href="infrastructure.html#tree-order">tree order</a>, trigger
    the first relevant step below for each element as you enter and
    exit it.</p>

    <dl class="switch"><dt>If you are exiting an element and that element is the element
     at the top of the stack</dt>

     <dd>

      <p class="note">The element being exited is a <a href="content-models.html#heading-content">heading
      content</a> element.</p>

      <p>Pop that element from the stack.</p>

     </dd>


     <dt>If the top of the stack is a <a href="content-models.html#heading-content">heading content</a>
     element</dt>

     <dd><p>Do nothing.</p></dd>


     <dt>When entering a <a href="content-models.html#sectioning-content">sectioning content</a> element or a
     <a href="#sectioning-root">sectioning root</a> element</dt>

     <dd>

      <p>If <var title="">current outlinee</var> is not null, and the
      <var title="">current section</var> has no heading, create an
      implied heading and let that be the heading for the <var title="">current section</var>.</p>

      <p>If <var title="">current outlinee</var> is not null, push
      <var title="">current outlinee</var> onto the stack.</p>

      <p>Let <var title="">current outlinee</var> be the element
      that is being entered.</p>

      <p>Let <var title="">current section</var> be a newly created
      <a href="#concept-section" title="concept-section">section</a> for the <var title="">current outlinee</var> element.</p>

      <p>Associate <var title="">current outlinee</var> with <var title="">current section</var>.</p>

      <p>Let there be a new <a href="#outline">outline</a> for the new <var title="">current outlinee</var>, initialized with just the new
      <var title="">current section</var> as the only <a href="#concept-section" title="concept-section">section</a> in the outline.</p>

     </dd>


     <dt>When exiting a <a href="content-models.html#sectioning-content">sectioning content</a> element, if
     the stack is not empty</dt>

     <dd>

      <p>Pop the top element from the stack, and let the <var title="">current outlinee</var> be that element.</p>

      <p>Let <var title="">current section</var> be the last section
      in the <a href="#outline">outline</a> of the <var title="">current
      outlinee</var> element.</p>

      <p>Append the <a href="#outline">outline</a> of the <a href="content-models.html#sectioning-content">sectioning
      content</a> element being exited to the <var title="">current
      section</var>. (This does not change which section is the last
      section in the <a href="#outline">outline</a>.)</p>

     </dd>


     <dt>When exiting a <a href="#sectioning-root">sectioning root</a> element, if the
     stack is not empty</dt>

     <dd>

      <p>Run these steps:</p>

      <ol><li><p>Pop the top element from the stack, and let the <var title="">current outlinee</var> be that element.</p></li>

       <li><p>Let <var title="">current section</var> be the last
       section in the <a href="#outline">outline</a> of the <var title="">current
       outlinee</var> element.</p></li>

       <li><p><i>Finding the deepest child</i>: If <var title="">current section</var> has no child sections, stop
       these steps.</p></li>

       <li><p>Let <var title="">current section</var> be the last
       child <a href="#concept-section" title="concept-section">section</a> of the
       current <var title="">current section</var>.</p></li>

       <li><p>Go back to the substep labeled <i>finding the deepest
       child</i>.</p></li>

      </ol></dd>


     <dt>When exiting a <a href="content-models.html#sectioning-content">sectioning content</a> element or a
     <a href="#sectioning-root">sectioning root</a> element</dt>

     <dd>

      <p class="note">The <var title="">current outlinee</var> is
      the element being exited.</p>

      <p>Let <var title="">current section</var> be the first <a href="#concept-section" title="concept-section">section</a> in the
      <a href="#outline">outline</a> of the <var title="">current outlinee</var>
      element.</p>

      <p>Skip to the next step in the overall set of steps. (The walk
      is over.)</p>

     </dd>


     <dt>If the <var title="">current outlinee</var> is null</dt>

     <dd><p>Do nothing.</p></dd>


     <dt>When entering a <a href="content-models.html#heading-content">heading content</a> element</dt>

     <dd>

      <p>If the <var title="">current section</var> has no heading,
      let the element being entered be the heading for the <var title="">current section</var>.</p>

      <p>Otherwise, if the element being entered has a
      <a href="#rank">rank</a> equal to or greater than the heading of the
      last section of the <a href="#outline">outline</a> of the <var title="">current outlinee</var>, then create a new <a href="#concept-section" title="concept-section">section</a> and append it to the
      <a href="#outline">outline</a> of the <var title="">current outlinee</var>
      element, so that this new section is the new last section of
      that outline. Let <var title="">current section</var> be that
      new section. Let the element being entered be the new heading
      for the <var title="">current section</var>.</p>

      <p>Otherwise, run these substeps:</p>

      <ol><li><p>Let <var title="">candidate section</var> be <var title="">current section</var>.</p></li>

       <li><p>If the element being entered has a <a href="#rank">rank</a>
       lower than the <a href="#rank">rank</a> of the heading of the <var title="">candidate section</var>, then create a new <a href="#concept-section" title="concept-section">section</a>, and append it to <var title="">candidate section</var>. (This does not change which
       section is the last section in the outline.) Let <var title="">current section</var> be this new section. Let the
       element being entered be the new heading for the <var title="">current section</var>. Abort these substeps.</p>

       </li><li><p>Let <var title="">new candidate section</var> be the
       <a href="#concept-section" title="concept-section">section</a> that contains <var title="">candidate section</var> in the <a href="#outline">outline</a> of
       <var title="">current outlinee</var>.</p></li>

       <li><p>Let <var title="">candidate section</var> be <var title="">new candidate section</var>.</p></li>

       <li><p>Return to step 2.</p></li>

      </ol><p>Push the element being entered onto the stack. (This causes
      the algorithm to skip any descendants of the element.)</p>

      <p class="note">Recall that <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code> has the
      <em>highest</em> rank, and <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code> has the lowest
      rank.</p>

     </dd>


     <dt>Otherwise</dt>

     <dd><p>Do nothing.</p></dd>

    </dl><p id="associatedSection">In addition, whenever you exit a node,
    after doing the steps above, if the node is not associated with a
    <a href="#concept-section" title="concept-section">section</a> yet and <var title="">current section</var> is not null, associate the node
    with the <a href="#concept-section" title="concept-section">section</a> <var title="">current section</var>.</p>

   </li>

   <li><p>If the <var title="">current outlinee</var> is null,
   then there was no <a href="content-models.html#sectioning-content">sectioning content</a> element or
   <a href="#sectioning-root">sectioning root</a> element in the DOM. There is no
   <a href="#outline">outline</a>. Abort these steps.</p></li>

   <li><p>Associate any nodes that were not associated with a <a href="#concept-section" title="concept-section">section</a> in the steps above with <var title="">current outlinee</var> as their section.</p></li>

   <li><p>Associate all nodes with the heading of the <a href="#concept-section" title="concept-section">section</a> with which they are
   associated, if any.</p></li>

   <li><p>If <var title="">current outlinee</var> is <a href="dom.html#the-body-element-0">the body
   element</a>, then the outline created for that element is the
   <a href="#outline">outline</a> of the entire document.</p></li>

  </ol><p>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.</p>

  <p>When creating an interactive table of contents, entries should
  jump the user to the relevant <a href="content-models.html#sectioning-content">sectioning content</a>
  element, if the <a href="#concept-section" title="concept-section">section</a> was
  created for a real element in the original document, or to the
  relevant <a href="content-models.html#heading-content">heading content</a> element, if the <a href="#concept-section" title="concept-section">section</a> in the tree was generated for
  a heading in the above process.</p>

  <p class="note">Selecting the first <a href="#concept-section" title="concept-section">section</a> of the document therefore
  always takes the user to the top of the document, regardless of
  where the first heading in the <code><a href="#the-body-element">body</a></code> is to be found.</p>

  <p>The <dfn id="outline-depth">outline depth</dfn> of a <a href="content-models.html#heading-content">heading content</a>
  element associated with a <a href="#concept-section" title="concept-section">section</a> <var title="">section</var>
  is the number of <a href="#concept-section" title="concept-section">sections</a> that
  are ancestors of <var title="">section</var> in the
  <a href="#outline">outline</a> that <var title="">section</var> finds itself
  in when the <a href="#outline" title="outline">outlines</a> of its
  <code><a href="infrastructure.html#document">Document</a></code>'s elements are created, plus 1. The
  <a href="#outline-depth">outline depth</a> of a <a href="content-models.html#heading-content">heading content</a> element
  not associated with a <a href="#concept-section" title="concept-section">section</a>
  is 1.</p>

  <p>User agents should provide default headings for sections that do
  not have explicit section headings.</p>

  <div class="example">

   <p>Consider the following snippet:</p>

   <pre>&lt;body&gt;
 &lt;nav&gt;
  &lt;p&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/p&gt;
 &lt;/nav&gt;
 &lt;p&gt;Hello world.&lt;/p&gt;
 &lt;aside&gt;
  &lt;p&gt;My cat is cute.&lt;/p&gt;
 &lt;/aside&gt;
&lt;/body&gt;</pre>

   <p>Although it contains no headings, this snippet has three
   sections: a document (the <code><a href="#the-body-element">body</a></code>) with two subsections
   (a <code><a href="#the-nav-element">nav</a></code> and an <code><a href="#the-aside-element">aside</a></code>). A user agent could
   present the outline as follows:</p>

   <ol class="brief"><li>Untitled document
     <ol><li>Navigation</li>
      <li>Sidebar</li>
     </ol></li>
   </ol><p>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 implementor's preferences, etc.</p>

  </div>

  <div class="note">

   <p>The following JavaScript function shows how the tree walk could
   be implemented. The <var title="">root</var> argument is the root
   of the tree to walk, and the <var title="">enter</var> and <var title="">exit</var> arguments are callbacks that are called with
   the nodes as they are entered and exited. <a href="references.html#refsECMA262">[ECMA262]</a></p>

   <pre>function (root, enter, exit) {
  var node = root;
  start: while (node) {
    enter(node);
    if (node.firstChild) {
      node = node.firstChild;
      continue start;
    }
    while (node) {
      exit(node);
      if (node.nextSibling) {
        node = node.nextSibling;
        continue start;
      }
      if (node == root)
        node = null;
      else
        node = node.parentNode;
    }
  }
}</pre>

  </div>

  </div>
</body></html>