{"id":358,"date":"2021-03-21T15:01:53","date_gmt":"2021-03-21T15:01:53","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=358"},"modified":"2021-03-21T15:01:53","modified_gmt":"2021-03-21T15:01:53","slug":"a-decade-a-year-of-heading-backwards","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2021\/03\/21\/a-decade-a-year-of-heading-backwards\/","title":{"rendered":"A decade + a year of heading backwards"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-361 size-full\" src=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/03\/gafotas.jpg\" alt=\"Patrick Lauke pervey (eyes closed) glasses look\" width=\"900\" height=\"121\" srcset=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/03\/gafotas.jpg 900w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/03\/gafotas-300x40.jpg 300w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/03\/gafotas-768x103.jpg 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/p>\n<p>Originally published <a href=\"https:\/\/codepen.io\/stevef\/post\/a-decade-of-heading-backwards\">February 2020<\/a>, updated today.<\/p>\n<p>It&#8217;s actually been longer (I remember being introduced to the outline algorithm in <a href=\"https:\/\/www.w3.org\/2007\/11\/07-TechPlenAgenda.html\">2007<\/a>), but <strong>11 years<\/strong> is a number worth signifying.<\/p>\n<p>In <del>2020<\/del> <strong>2021<\/strong> as it was in 2010 the <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/sections.html#headings-and-sections\">HTML specification<\/a> defines an outline algorithm and specifies how it affects heading rank regardless of the hard coded heading level <code>h1...h6<\/code> and how <code>&lt;hgroup&gt;<\/code> <em>automagically<\/em> transforms multiple headings into a single heading.<\/p>\n<p>Problem is that its never been implemented, as a consequence developers taking the specification as the truth, have been and continue to be misled. The reality of this fantasy has been burned into <a href=\"https:\/\/www.google.com\/search?q=html5+outline+algorithm&amp;sxsrf=ACYBGNQkM6WKeK9adtJCwyC2EYaZmsSsqg:1581329526525&amp;source=lnms&amp;tbm=bks&amp;sa=X&amp;ved=2ahUKEwj67M3F38bnAhW0oFwKHSULDQgQ_AUoAXoECA4QCQ&amp;biw=1280&amp;bih=616&amp;dpr=1.5\">many books on HTML<\/a> and articles over the last decade. The disconnection between implementation reality and HTML specification has been raised <a href=\"https:\/\/adrianroselli.com\/2016\/08\/there-is-no-document-outline-algorithm.html\">many a time<\/a>. This was in the past partially mitigated by the the HTML5 specification (2014), which initially <a href=\"https:\/\/www.w3.org\/TR\/html50\/sections.html#outlines\">warned of the disconnect<\/a> and later <a href=\"https:\/\/www.w3.org\/TR\/html52\/sections.html#headings-and-sections\">modified the definitions<\/a> of the various elements effected by the non existent outline algorithm and obsoleted the <code>hgroup<\/code> element (as it does nothing apart from provide a hook for developers to hang CSS styles off), so that they aligned with a (less) desirable but actual implementation of the semantics of headings and sectioning elements. This included updating the code examples to reflect that <code>&lt;h1&gt;<\/code> elements are semantically <strong>heading level 1<\/strong> elements regardless of what they are nested in.<\/p>\n<p>There has been ongoing discussions with the current keepers of the HTML specification, but as such discussions do, have dragged on for years. This is not uncommon or sometimes undesirable, but what is uncommon and undesirable is that important information used by developers and expected to have a passing relationship to reality, does not and has not aligned with implementations for 10 years or so.<\/p>\n<h2>10 years + 1, no change<\/h2>\n<p>Good news was that there appeared to be <a href=\"https:\/\/github.com\/whatwg\/html\/pull\/3499#issuecomment-577866180\">movement at the station<\/a> and the HTML specification <em>may sometime<\/em> soonish reflect reality. The question is still 10 years + 1:<\/p>\n<p><strong>Why is it OK to have a substantial set of authoritative semantic HTML definitions misdirect developers for so long?<\/strong><\/p>\n<p>And then there is the question <a href=\"https:\/\/github.com\/whatwg\/html\/pull\/3499#issuecomment-578048752\">What do we do with <code>&lt;hgroup&gt;<\/code>?<\/a><\/p>\n<p class=\"note\">New PR &#8211; <a href=\"https:\/\/github.com\/whatwg\/html\/pull\/6462\">Obsolete &lt;hgroup&gt; <\/a>#6462 by <a href=\"https:\/\/github.com\/sideshowbarker\">SideShowBarker<\/a><\/p>\n<h2>Further Reading<\/h2>\n<ul>\n<li><a href=\"https:\/\/html5doctor.com\/computer-says-no-to-html5-document-outline\/\">Computer says NO to HTML5 document outline<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/wiki\/HTML\/Usage\/Headings\/h1only\">Effect of using only h1 for headings<\/a><\/li>\n<\/ul>\n<h2>Further Listening<\/h2>\n<p><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/5ymL0pXowEY\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Originally published February 2020, updated today. It&#8217;s actually been longer (I remember being introduced to the outline algorithm in 2007), but 11 years is a number worth signifying. In 2020 2021 as it was in 2010 the HTML specification defines an outline algorithm and specifies how it affects heading rank regardless of the hard coded [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-358","post","type-post","status-publish","format-standard","hentry","category-htmlaccessibility"],"_links":{"self":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/358","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/comments?post=358"}],"version-history":[{"count":4,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/358\/revisions"}],"predecessor-version":[{"id":363,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/358\/revisions\/363"}],"wp:attachment":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/media?parent=358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/categories?post=358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/tags?post=358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}