{"id":289070,"date":"2019-06-18T07:22:53","date_gmt":"2019-06-18T14:22:53","guid":{"rendered":"http:\/\/css-tricks.com\/?p=289070"},"modified":"2020-07-17T21:43:38","modified_gmt":"2020-07-18T04:43:38","slug":"how-to-section-your-html","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-to-section-your-html\/","title":{"rendered":"How to Section Your HTML"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The <a href=\"https:\/\/www.w3.org\/TR\/html5\/dom.html#sectioning-content\" rel=\"noopener\">sectioning elements<\/a> in HTML5 are <code>&lt;nav&gt;<\/code>, <code>&lt;aside&gt;<\/code>, <code>&lt;article&gt;<\/code>, and <code>&lt;section&gt;<\/code>. <code>&lt;body&gt;<\/code> is also kind of a sectioning element since all content lying inside of it is <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Guide\/HTML\/Using_HTML_sections_and_outlines#Defining_sections\" rel=\"noopener\">part of the default document section<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is a brief explanation of each sectioning element and how they are used:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/html.spec.whatwg.org\/multipage\/sections.html#the-nav-element\" rel=\"noopener\"><code>&lt;nav&gt;<\/code><\/a> \u2013 Equivalent to <code>role=\"navigation\"<\/code>. Major site navigation that consistently appears frequently across the site. Examples include the primary navigation, secondary navigation, and in-page navigation.<\/li><li><a href=\"https:\/\/html.spec.whatwg.org\/multipage\/sections.html#the-aside-element\" rel=\"noopener\"><code>&lt;aside&gt;<\/code><\/a> \u2013 Equivalent to <code>role=\"complementary\"<\/code>. Content that is only tangentially related (or not related) to the main content. Think of something like a sidebar with supplementary information, a note within an article, or the outer container for a list of related articles at the bottom of a blog post.<\/li><li><a href=\"https:\/\/html.spec.whatwg.org\/multipage\/sections.html#the-article-element\" rel=\"noopener\"><code>&lt;article&gt;<\/code><\/a> \u2013 Equivalent to <code>role=\"article\"<\/code>. Content that is self-contained in that it makes sense on its own when taken out of context. That could mean a widget, a blog post or even a comment within a blog post.<\/li><li><a href=\"https:\/\/html.spec.whatwg.org\/multipage\/sections.html#the-section-element\" rel=\"noopener\"><code>&lt;section&gt;<\/code><\/a> \u2013 Equivalent to <code>role=\"region\"<\/code>. Content that needs extra context from its parent sectioning element to make sense. This is a generic sectioning element that is used whenever it doesn\u2019t make sense to use the other more semantic ones.<\/li><\/ul>\n\n\n\n<p class=\"explanation wp-block-paragraph\">&#x1f44b; It has been brought to our attention in the comments (<a href=\"https:\/\/twitter.com\/aardrian\/status\/1141362489298423808\" rel=\"noopener\">and on Twitter<\/a>) that some of the techniques used in this article result in a poor user experience for screen reader users. We\u2019ll be making updates to make sure the article reflects the best possible information. For now, please see Adrian Roselli\u2019s Pen below for a more appropriate approach to sectioning the example layout. Thanks for being such an awesome community where we can all learn and grow together!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BgQqrQ\" src=\"\/\/codepen.io\/anon\/embed\/BgQqrQ?height=450&amp;theme-id=1&amp;slug-hash=BgQqrQ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BgQqrQ\" title=\"CodePen Embed BgQqrQ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-0\">Contents<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This is a very long article that I suspect you will want to come back to and reference multiple times. To make that easier, here is a list of all the article headings:<\/p>\n\n\n\n<div class=\"wp-block-group article-series\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h4 class=\"wp-block-heading\" id=\"table-of-contents\">Table of Contents<\/h4>\n\n\n\n<ol class=\"wp-block-list\"><li><a href=\"#when-to-use-nav\">When to use <code>&lt;nav&gt;<\/code><\/a><ol><li><a href=\"#a-nav-is-unnecessary-around-a-search-form\">A <code>&lt;nav&gt;<\/code> is unnecessary around a search form<\/a><\/li><li><a href=\"#dont-use-the-word-nav-or-navigation-in-the-label\">Don\u2019t use the word \u201cnav\u201d or \u201cnavigation\u201d in the label<\/a><\/li><li><a href=\"#questions-to-ask-yourself\">Questions to ask yourself<\/a><\/li><li><a href=\"#a-nav-doesnt-have-to-be-a-list-of-links\">A <code>&lt;nav&gt;<\/code> doesn\u2019t have to be a list of links<\/a><\/li><\/ol><\/li><li><a href=\"#article-header-id-6\">Avoi<\/a><a href=\"#avoid-nesting-an-aside-inside-an-aside\">d nesting an <code>&lt;aside&gt;<\/code> inside an <code>&lt;aside&gt;<\/code><\/a><\/li><li><a href=\"#article-is-like-block-section-is-like-element\">Article is like \u201cBlock\u201d; Section is like \u201cElement\u201d<\/a><ol><li><a href=\"#comments-sections\">Comments sections<\/a><\/li><\/ol><\/li><li><a href=\"#dont-swap-div-for-a-section\">Don\u2019t swap <code>&lt;div&gt;<\/code> for <code>&lt;section&gt;<\/code><\/a><\/li><li><a href=\"#headers-and-footers\">Headers and footers<\/a><ol><li><a href=\"#what-goes-inside-headers\">What goes inside headers?<\/a><\/li><li><a href=\"#what-goes-inside-footers\">What goes inside footers?<\/a><\/li><\/ol><\/li><li><a href=\"#sectioning-elements-and-the-document-outline-algorithm\">Sectioning elements and the document outline algorithm<\/a><ol><li><a href=\"#no-browser-supports-the-document-outline-algorithm\">No browser supports the document outline algorithm<\/a><\/li><\/ol><\/li><li><a href=\"#sectioning-content\">Sectioning content<\/a><\/li><li><a href=\"#the-main-element\">The <code>&lt;main&gt;<\/code> element<\/a><\/li><li><a href=\"#you-need-to-label-your-sections-here-are-three-methods\">You need to label your sections. Here are three methods.<\/a><ol><li><a href=\"#method-1-add-an-aria-label-attribute\">Method 1: Add an aria-label attribute<\/a><\/li><li><a href=\"#method-2-add-a-h-element-to-it\">Method 2: Add a <code>&lt;h#&gt;<\/code> element to it<\/a><\/li><li><a href=\"#method-3-use-an-aria-labelledby-attribute\">Method 3: Use an <code>aria-labelledby<\/code> attribute<\/a><\/li><\/ol><\/li><li><a href=\"#only-use-one-method-at-a-time\">Only use one method at a time<\/a><\/li><li><a href=\"#adding-section-labels-to-our-example-layout\">Adding section labels to our example layout<\/a><\/li><li><a href=\"#making-heading-1-be-the-first-heading\">Making Heading 1 be the first heading<\/a><\/li><li><a href=\"#concerns-with-the-simplified-outline-algorithm-spec\">Concerns with the simplified outline algorithm spec<\/a><\/li><li><a href=\"#using-aria-on-the-example-layout-sectioning-elements\">Using aria on the example layout sectioning elements<\/a><ol><li><a href=\"#using-aria-label\">Using <code>aria-label<\/code><\/a><\/li><li><a href=\"#using-aria-labelledby\">Using <code>aria-labelledby<\/code><\/a><\/li><li><a href=\"#results-of-using-aria\">Results of using aria<\/a><\/li><\/ol><\/li><li><a href=\"https:\/\/css-tricks.com\/how-to-section-your-html\/#what-happens-when-you-need-h7\">What happens when you need <code>&lt;h7&gt;<\/code>?<\/a><\/li><li><a href=\"#does-your-site-have-a-good-structure\">Does your site have a good structure?<\/a><\/li><li><a href=\"#download-and-use-a-screen-reader\">Download and use a screen reader<\/a><\/li><\/ol>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-1\">When to use <code>&lt;nav&gt;<\/code><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>&lt;nav&gt;<\/code> element only ever needs to be used once per navigation block. Sub-navigation that is already contained inside a <code>&lt;nav&gt;<\/code> element does not need to be wrapped in a second <code>&lt;nav&gt;<\/code> element.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;nav aria-label=\"Primary\">\n  &lt;ul>\n    &lt;li>&lt;a href=\"#\">Primary link&lt;\/a>&lt;\/li>\n    &lt;li>&lt;a href=\"#\">Primary link&lt;\/a>&lt;\/li>\n    &lt;li>\n      &lt;a href=\"#\">Primary link&lt;\/a>\n      &lt;!-- &lt;nav> element is *not* needed again here -->\n      &lt;ul>\n        &lt;li>&lt;a href=\"#\">Secondary link&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Secondary link&lt;\/a>&lt;\/li>\n      &lt;\/ul>\n    &lt;\/li>\n  &lt;\/ul>\n&lt;\/nav><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>&lt;nav&gt;<\/code> element is intended for only <strong>major<\/strong> navigation blocks. \u201cMajor\u201d is a very subjective term though. <a href=\"http:\/\/html5doctor.com\/avoiding-common-html5-mistakes\/#nav-external\" rel=\"noopener\">html5doctor.com<\/a> has a pretty good explanation of when it is and isn\u2019t appropriate to use <code>&lt;nav&gt;<\/code>, keep in mind that the following are opinions and not official W3C rulings:<\/p>\n\n\n\n<div class=\"wp-block-group e ticss-bb61eb00 explanation\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">The key phrase is \u2018major\u2019 navigation. We could debate all day about the definition of \u2018major\u2019, but to me it means:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Primary navigation<\/li><li><s>Site search<\/s><\/li><li>Secondary navigation (arguably)<\/li><li>In-page navigation (within a long article, for example)<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">While there isn\u2019t any right or wrong here, a straw poll coupled with my own interpretation tells me that the following shouldn\u2019t be enclosed by <code>&lt;nav&gt;<\/code>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Pagination controls<\/li><li>Social links (although there may be exceptions where social links are the major navigation, in sites like <a href=\"http:\/\/about.me\/\" rel=\"noopener\">About me<\/a> or Flavours, for example)<\/li><li>Tags on a blog post<\/li><li>Categories on a blog post<\/li><li>Tertiary navigation<\/li><li>Fat footers<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><small>\u2014 <a href=\"http:\/\/html5doctor.com\/avoiding-common-html5-mistakes\/#nav-external\" rel=\"noopener\">html5doctor.com<\/a> (strikethrough mine)<\/small><\/p>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Breadcrumbs are another piece of content that should be wrapped in a <code>&lt;nav&gt;<\/code> element as evidenced by this <a href=\"https:\/\/www.w3.org\/TR\/wai-aria-practices\/examples\/breadcrumb\/index.html#sc1_label\" rel=\"noopener\">W3C breadcrumb HTML example<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"a-ltnavgt-is-unnecessary-around-a-search-form\">A <code>&lt;nav&gt;<\/code> is unnecessary around a search form<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">I disagree with HTML5 Doctor\u2019s opinion that a site search form should be wrapped in a <code>&lt;nav&gt;<\/code> element (thus why I crossed it out). <code>&lt;nav&gt;<\/code> is intended to be wrapped around navigation <em>links<\/em>, not a form. The site search actually has <a href=\"https:\/\/www.w3.org\/TR\/wai-aria-practices\/examples\/landmarks\/search.html\" rel=\"noopener\">its own special role<\/a> that defines it as a search landmark. If you add <code>role=\"search\"<\/code> to the search <code>&lt;form&gt;<\/code> element, it is announced to screen reader users as a search landmark. Screen reader users will also be able to navigate to it when navigating via landmarks. If there are multiple search forms on the page, they should be differentiated using <code>aria-label<\/code> or <code>aria-labelledby<\/code> (more details on these attributes later). Don\u2019t include the word \u201csearch\u201d in the aria label though \u2014 that\u2019s like saying \u201cimage of\u201d in image alt text; it\u2019s unnecessary. Instead, focus on what the search form is searching through. So, for the global site search, giving it <code>aria-label=\"site\"<\/code> would be appropriate.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!-- &lt;nav> is not needed on a search form. -->\n&lt;!-- role=\"search\" is enough -->\n&lt;form role=\"search\" aria-label=\"site\">\n  &lt;label>\n    &lt;span>Search&lt;\/span>\n    &lt;input type=\"search\" \/>\n  &lt;\/label>\n  &lt;button type=\"submit\">Submit&lt;\/button>\n&lt;\/form><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">A <code>role=\"search\"<\/code> form won\u2019t appear in a document outline but I think this is okay considering search forms are often small and self-contained. It still gets the majority of benefits that you get from using sectioning elements. Adding a sectioning element to the mix bombards the screen reader user with messages telling them that it is a search form (one for the sectioning element, one for the search role, and one for the search input label).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"dont-use-the-word-nav-or-navigation-in-the-label\">Don\u2019t use the word \u201cnav\u201d or \u201cnavigation\u201d in the label<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Like with <code>role=\"search\"<\/code>, adding \u201cnavigation\u201d to the label of a <code>&lt;nav&gt;<\/code> element only results in a screen reader saying \u201cnavigation\u201d twice.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;nav aria-label=\"primary navigation\">\n  &lt;!-- Screen reader: \"primary navigation navigation landmark\" -->\n&lt;\/nav>\n\n&lt;nav aria-label=\"primary\">\n  &lt;!-- Screen reader: \"primary navigation landmark\" -->\n&lt;\/nav><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"questions-to-ask-yourself\">Questions to ask yourself<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">That same HTML5 Doctor article lists two questions that you can ask yourself to help you figure out if something should be wrapped in a <code>&lt;nav&gt;<\/code> or not:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Would another sectioning element also be appropriate? If yes, maybe use that instead.<\/li><li>Would you add a link to it in a \u201cskip to\u201d block for accessibility? If not, then it might not be worth using a <code>&lt;nav&gt;<\/code> element.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">In those cases where the navigation is too minor to justify the use of the <code>&lt;nav&gt;<\/code> element, <code>&lt;section&gt;<\/code> is most likely the element that you should use instead.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"a-ltnavgt-doesnt-have-to-be-a-list-of-links\">A <code>&lt;nav&gt;<\/code> doesn\u2019t have to be a list of links<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The most common use case for a <code>&lt;nav&gt;<\/code> is to wrap it around a list of links but <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/sections.html#the-nav-element:the-nav-element-5\" rel=\"noopener\">it doesn\u2019t <em>have<\/em> to be a list of links<\/a>. If your navigation works in a different sort of way, you can still use the <code>&lt;nav&gt;<\/code> element.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!-- Example taken from the &lt;nav> element specification -->\n&lt;!-- https:\/\/html.spec.whatwg.org\/multipage\/sections.html#the-nav-element:the-nav-element-5 -->\n&lt;nav>\n  &lt;h1>Navigation&lt;\/h1>\n  &lt;p>You are on my home page. To the north lies &lt;a href=\"\/blog\">my\n  blog&lt;\/a>, from whence the sounds of battle can be heard. To the east\n  you can see a large mountain, upon which many &lt;a\n  href=\"\/school\">school papers&lt;\/a> are littered. Far up thus mountain\n  you can spy a little figure who appears to be me, desperately\n  scribbling a &lt;a href=\"\/school\/thesis\">thesis&lt;\/a>.&lt;\/p>\n  &lt;p>To the west are several exits. One fun-looking exit is labeled &lt;a\n  href=\"https:\/\/games.example.com\/\">\"games\"&lt;\/a>. Another more\n  boring-looking exit is labeled &lt;a\n  href=\"https:\/\/isp.example.net\/\">ISP&#x2122;&lt;\/a>.&lt;\/p>\n  &lt;p>To the south lies a dark and dank &lt;a href=\"\/about\">contacts\n  page&lt;\/a>. Cobwebs cover its disused entrance, and at one point you\n  see a rat run quickly out of the page.&lt;\/p>\n&lt;\/nav><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In this same vein, it\u2019s okay to have small bits like intro text in the <code>&lt;nav&gt;<\/code> element as long as the primary focus of the content is on the navigation links. Introductory content is best placed inside a <code>&lt;header&gt;<\/code> in the <code>&lt;nav&gt;<\/code> element. I\u2019ll go into more depth on headers and footers later.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;nav>\n  &lt;header>\n    &lt;h2>In this section&lt;\/h2>\n    &lt;p>This is some intro text describing what you will find in this section.&lt;\/p>\n  &lt;\/header>\n  &lt;ul>\n    &lt;li>&lt;a href=\"#\">Sub section one&lt;\/a>&lt;\/li>\n    &lt;li>&lt;a href=\"#\">Sub section two&lt;\/a>&lt;\/li>\n  &lt;\/ul>\n&lt;\/nav><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-2\">Avoid nesting an <code>&lt;aside&gt;<\/code> inside an <code>&lt;aside&gt;<\/code><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In the same way that <code>&lt;nav&gt;<\/code> shouldn\u2019t really ever be nested inside another <code>&lt;nav&gt;<\/code> element, <code>&lt;aside&gt;<\/code> elements also tend not to be nested inside each other. <code>&lt;aside&gt;<\/code> is used to represent content that is tangentially related to the content around it. That means placing an aside inside an aside is basically announcing a tangent away from something that in itself is a tangent away from the main content.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!-- Don't do this -->\n&lt;aside aria-label=\"Side bar\">\n\n  &lt;aside>\n    &lt;h2>Share&lt;\/h2>\n    &lt;ul>\n      &lt;!-- List of social media links -->\n    &lt;\/ul>    \n  &lt;\/aside>\n\n  &lt;aside>\n    &lt;h2>Recommendations:&lt;\/h2>\n    &lt;ul>\n      &lt;li>\n        &lt;article>\n          &lt;h2>&lt;a href=\"#\">Related article title&lt;\/a>&lt;\/h2>\n          &lt;p>Article description&lt;\/p>\n        &lt;\/article>\n      &lt;\/li>\n      &lt;!-- List of recommended articles continues -->\n    &lt;\/ul>\n  &lt;\/aside>\n\n&lt;\/aside><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">If you have a sidebar that has multiple sections, don\u2019t nest <code>&lt;aside&gt;<\/code> elements inside of <code>&lt;aside&gt;<\/code> elements like in the example above. Instead, make the sidebar a single <code>&lt;aside&gt;<\/code> and then use <code>&lt;section&gt;<\/code> (or another appropriate sectioning element) to create the different sections.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!-- Do this instead -->\n&lt;aside aria-label=\"Side bar\">\n\n  &lt;section>\n    &lt;h2>Share&lt;\/h2>\n    &lt;ul>\n      &lt;!-- List of social media links -->\n    &lt;\/ul>    \n  &lt;\/section>\n\n  &lt;section>\n    &lt;h2>Recommended articles:&lt;\/h2>\n    &lt;ul>\n      &lt;li>\n        &lt;article>\n          &lt;h2>&lt;a href=\"#\">Related article title&lt;\/a>&lt;\/h2>\n          &lt;p>Article description&lt;\/p>\n        &lt;\/article>\n      &lt;\/li>\n      &lt;!-- List of recommended articles continues -->\n    &lt;\/ul>\n  &lt;\/section>\n\n&lt;\/aside><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-3\">Article is like \u201cBlock\u201d; Section is like \u201cElement\u201d<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>&lt;section&gt;<\/code> and <code>&lt;article&gt;<\/code> are easy to get confused with one another. If you are familiar with \u201cBlock Element Modifier\u201d (<a href=\"https:\/\/css-tricks.com\/bem-101\/\">BEM<\/a>) syntax, then an easy way to think of the difference between the two is that an <code>&lt;article&gt;<\/code> is a bit like the \u201cB\u201d (or \u201cBlock\u201d) in BEM. It is a container that stores self-contained content that still makes sense when placed in a different context. Individual tweets on Twitter and each list item on a search results page would be considered <code>&lt;article&gt;<\/code> elements.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i1.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/sectioning-01.png?ssl=1\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><code>&lt;section&gt;<\/code> is like the \u201cE\u201d (or \u201cElement\u201d) in BEM. It is a sub-section that requires context from its parent sectioning element to make sense. <code>&lt;section&gt;<\/code> is a generic catch-all sectioning element that you use when it doesn\u2019t make sense to use the other sectioning elements. So, if in doubt, go with <code>&lt;section&gt;<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Note that if something is styled as a \u201cBlock\u201d in BEM, that doesn\u2019t automatically mean that it is an <code>&lt;article&gt;<\/code> element. Same goes for BEM \u201cElements\u201d and <code>&lt;section&gt;<\/code> elements. The element of something should be based on the meaning of the content, <em>not how the content looks<\/em>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"comments-sections\">Comments sections<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Something that may surprise people is that individual comments on a blog post are <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/article#Examples\" rel=\"noopener\">also considered articles<\/a>, even though they are in reply to the main blog post. The <code>&lt;article&gt;<\/code> element wrapping around the main blog post should also wrap around the comments section though. This is to represent that the comments go with the main article.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;article>\n  &lt;h1>I am an awesome blog post!&lt;\/h1>\n  &lt;p>I am some body text content.&lt;\/p>\n\n  &lt;section>\n    &lt;h2>Comments&lt;\/h2>\n    &lt;ul>\n      &lt;li>\n        &lt;article>\n          &lt;h2>Username&lt;\/h2>\n          &lt;p>This is the comment body text.&lt;\/p>\n          &lt;footer>\n            &lt;p>\n              Meta data like post date makes sense\n              in either the header or the footer.\n            &lt;\/p>\n          &lt;\/footer>\n        &lt;\/article>\n      &lt;\/li>\n    &lt;\/ul>\n  &lt;\/section>\n&lt;\/article><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i1.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/sectioning-02.png?ssl=1\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-4\">Don\u2019t swap div for a section<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Just because we have these fancy sectioning elements now, it doesn\u2019t mean that the good old <code>&lt;div&gt;<\/code> element has lost all of its usefulness. <code>&lt;div&gt;<\/code> has no semantic meaning, so it is quite useful whenever we are altering the HTML purely for the sake of styling purposes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s say that we have a blog post contained inside an <code>&lt;article&gt;<\/code> element that we need to wrap in something for the sake of styling purposes.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!-- I need a wrapper element -->\n&lt;article>\n  &lt;h1>I am a blog post&lt;\/h1>\n  &lt;p>I am some content&lt;\/p>\n&lt;\/article><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Reaching for the <code>&lt;section&gt;<\/code> element in this circumstance is not the right thing to do.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!-- Do not do this -->\n&lt;section class=\"wrapper\">\n  &lt;article>\n    &lt;h1>I am a blog post&lt;\/h1>\n    &lt;p>I am some content&lt;\/p>\n  &lt;\/article>\n&lt;\/section><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Though <code>&lt;section&gt;<\/code> is technically a generic element, <code>&lt;div&gt;<\/code> is the far more appropriate option in this circumstance. This new wrapping container is not meant to have any semantic meaning behind it and that is exactly what <code>&lt;div&gt;<\/code> is designed to be used for.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!-- Use a &lt;div> if the element is only used for styling purposes -->\n&lt;div class=\"wrapper\">\n  &lt;article>\n    &lt;h1>I am a blog post&lt;\/h1>\n    &lt;p>I am some content&lt;\/p>\n  &lt;\/article>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Another way to remember this: if you can\u2019t think of a meaningful heading to apply to a <code>&lt;section&gt;<\/code>, then it probably shouldn\u2019t be a <code>&lt;section&gt;<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-5\">Headers and footers<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Although they don\u2019t necessarily need to, sectioning elements may contain a <em>single<\/em> <code>&lt;header&gt;<\/code> and a <em>single<\/em> <code>&lt;footer&gt;<\/code> with the header being at the top of the section and the footer being at the bottom.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2019\/06\/Basic-sectioning-element.svg\" alt=\"A basic sectioning element with a header and a footer.\" width=\"500\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Sectioning elements can be nested inside one another as many times as is needed based on the content.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2019\/06\/Nesting-sectioning-elements.svg\" alt=\"Nested sectioning elements\" width=\"500\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The header and footer in a sectioning element can also contain sectioning elements.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2019\/06\/sections-inside-headers-and-footers.svg\" alt=\"Headers and footers containing sectioning elements\" width=\"500\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The one major restriction around nesting sectioning elements is that headers and footers <a href=\"https:\/\/www.w3.org\/TR\/html50\/sections.html#the-header-element\" rel=\"noopener\">cannot be nested inside other headers and footers<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2019\/06\/headers-and-footers-inside-headers-and-footers.svg\" alt=\"\" width=\"500\"\/><figcaption>Nesting headers and footers inside one another is not allowed.<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"what-goes-inside-headers\">What goes inside headers?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Headers are used for introductory content. Appropriate things to include in <code>&lt;header&gt;<\/code> elements include (but are not limited to):<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The heading element (<code>&lt;h1&gt;<\/code>\u2013<code>&lt;h6&gt;<\/code>)<\/li><li>An introductory paragraph or statement.<\/li><li>A profile picture<\/li><li>A logo<\/li><li>A search form<\/li><li>Primary navigation<\/li><li>Author\u2019s name<\/li><li>Post\/updated date<\/li><li>Meta data<\/li><li>Social media links<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"what-goes-inside-footers\">What goes inside footers?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Footer elements primarily hold things like meta data and minor supporting content. Appropriate things to include in <code>&lt;footer&gt;<\/code> elements include (but are not limited to):<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Copyright information<\/li><li>Legalities<\/li><li>Footnotes<\/li><li>Low priority site navigation<\/li><li>Author\u2019s name<\/li><li>Post\/updated date<\/li><li>Meta data<\/li><li>Social media links<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">You will notice that there is some cross over between the header and the footer in terms of content that is appropriate to both. This is mostly because meta-type content fits well in either element. It mainly comes down to the design that you are trying to achieve. <code>&lt;header&gt;<\/code> elements do tend to signify that the content inside of them is of greater importance than the content inside of a <code>&lt;footer&gt;<\/code> element though.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-6\">Sectioning elements and the document outline algorithm<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">An important thing to know about these sectioning elements is that <a href=\"https:\/\/www.w3.org\/TR\/html5\/sections.html#headings-and-sections\" rel=\"noopener\">they are all supposed to feature a <code>&lt;h#&gt;<\/code> element inside of them<\/a> (or be labeled in some other way, but more on that later). This is primarily for the sake of something called the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Guide\/HTML\/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm\" rel=\"noopener\">document outline algorithm<\/a>. This is an algorithm that uses sectioning elements to help determine what level a heading (<code>&lt;h#&gt;<\/code>) should be without having to rely exclusively on the number that the developer has provided. So, have you ever wondered whether or not it\u2019s okay to have more than one <code>&lt;h1&gt;<\/code> on a page? This is meant to make that a non-issue (but hold on for a sec, because there is more to the story).<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!-- No Document outline algorithm -->\n&lt;article>\n  &lt;h1>Primary heading&lt;\/h1>\n\n  &lt;h2>Secondary heading&lt;\/h2>\n  &lt;p>Some text.&lt;\/p>\n\n  &lt;h3>Tertiary heading&lt;\/h3>\n  &lt;p>Some text.&lt;\/p>\n&lt;\/article><\/code><\/pre>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!-- With document outline algorithm -->\n&lt;article>\n  &lt;h1>Primary heading&lt;\/h1> &lt;!-- Recognized as &lt;h1> -->\n  \n  &lt;!-- sectioning element sets new heading level context -->\n  &lt;section>\n    &lt;h1>Secondary heading&lt;\/h1> &lt;!-- Recognized as &lt;h2> -->\n    &lt;p>Some text.&lt;\/p>\n\n    &lt;h2>Tertiary heading&lt;\/h2> &lt;!-- Recognized as &lt;h3> -->\n    &lt;p>Some text.&lt;\/p>\n  &lt;\/section>\n\n&lt;\/article><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">There is a lot more to learn about the document outline algorithm. I\u2019ll stop here though because\u2026<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"no-browser-supports-the-document-outline-algorithm\">No browser supports the document outline algorithm<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">There is not a single browser that supports this method of creating a heading structure. This is a shame. It would make building accessible websites much easier if we didn\u2019t have to worry so much about using the correct heading level all the time.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As far as I\u2019m aware, there are two main reasons why no browser has implemented the algorithm. One is that browser vendors are afraid of breaking the heading structure of sites that have used sectioning elements incorrectly. The other reason is that the <a href=\"https:\/\/www.w3.org\/TR\/html5\/sections.html#creating-an-outline\" rel=\"noopener\">current document outline algorithm spec<\/a> is difficult to implement and no browser vendor has been willing to put the time into implementing it yet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In reference to the first reason, there is <a href=\"https:\/\/github.com\/w3c\/html\/issues\/774\" rel=\"noopener\">a long discussion<\/a> about incorporating a new <code>&lt;h&gt;<\/code> element instead of using the <code>&lt;h1&gt;<\/code> element to tell browsers to use the document outline algorithm. I was in favor of this new <code>&lt;h&gt;<\/code> element idea until <a href=\"https:\/\/github.com\/w3c\/html\/issues\/774#issuecomment-452062461\" rel=\"noopener\">I realized<\/a> that an attribute on the <code>&lt;html&gt;<\/code> element or adding a <code>&lt;meta&gt;<\/code> tag to the <code>&lt;head&gt;<\/code> would work even better as a means of telling browsers it was safe to use the algorithm. It is also better for headings to fall back to a <code>&lt;h1&gt;<\/code> in unsupported browsers than falling back to a <code>&lt;span&gt;<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you would like to play around with this <code>&lt;h&gt;<\/code> concept though, there is a plugin called <a href=\"https:\/\/github.com\/jonathantneal\/hfill#hfill-\" rel=\"noopener\">hfill<\/a>. It allows you to nest <code>&lt;hx&gt;<\/code> headings inside sectioning elements to create the document outline without having to worry about heading levels so much. There is a <a href=\"https:\/\/jonathantneal.github.io\/hfill\/\" rel=\"noopener\">demo<\/a> available for you to try it out. The major flaw in this plugin though is that the <em>only<\/em> way to increment heading levels is by nesting sectioning elements inside one another. There is no <code>&lt;h1&gt;<\/code>-is-greater-than-<code>&lt;h2&gt;<\/code> dynamic in this plugin which is the main reason I fell out of love with this <code>&lt;h&gt;<\/code> element idea. This lack of heading hierarchy would make CMS rich text editors far too difficult for clients to use.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As for the issue around implementation difficulty, work is being done to produce a <a href=\"https:\/\/github.com\/whatwg\/html\/pull\/3499\" rel=\"noopener\">simplified spec<\/a> that browser vendors are more likely to adopt. The document outline algorithm has been in the HTML specifications for years. Hopefully this simplified spec will allow the algorithm to become a reality.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Although the algorithm is not supported anywhere yet, we can still build with the algorithm in mind. If we build with it in mind, then we gain the following benefits:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>We future-proof our sites in case the algorithm ever <em>does<\/em> get implemented.<\/li><li>We can <em>significantly<\/em> improve the user experience for screen reader users.<\/li><li>We <em>potentially<\/em> improve search engine optimization (SEO) due to search engines being able to better understand the site\u2019s content.<\/li><li>We can create a better user experience for users by allowing them to use native browser features that make use of sectioning elements, like <a href=\"https:\/\/css-tricks.com\/reader-mode-the-button-to-beat\/\">Reader Mode<\/a>.<\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-7\">Sectioning content<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Take a look at this mock-up layout I put together and think about how you might split it up into sections.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i1.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/sectioning-03.png?ssl=1\" alt=\"Mock-up layout featuring a logo, primary nav, and search in the header, a secondary navigation in a left sidebar, and a main content area  in the middle with primary and secondary headings, a sidebar on the right with share links and links to recommended articles.\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This is how I would split the layout up into sectioning elements (only the solid lines represent sectioning elements).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i1.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/sections-diagram.png?resize=1024%2C656&amp;ssl=1\" alt=\"Layout showing where various sectioning elements would appear.\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In terms of HTML markup, it looks like this:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;body>\n\n  &lt;header>\n    &lt;a href=\"\/\" title=\"Go to home page\">\n      &lt;img src=\"logo.png\" alt=\"Site logo\">\n    &lt;\/a>\n    &lt;nav>\n      &lt;ul>\n        &lt;li>&lt;a href=\"#\">Primary nav&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Primary nav&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Primary nav&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Primary nav&lt;\/a>&lt;\/li>\n      &lt;\/ul>\n    &lt;\/nav>\n    &lt;form role=\"search\" aria-label=\"site\">\n      &lt;label>\n        &lt;span>Search&lt;\/span>\n        &lt;input type=\"search\"\/>\n      &lt;\/label>\n      &lt;button type=\"submit\">Submit&lt;\/button>\n    &lt;\/form>\n  &lt;\/header>\n\n  &lt;nav>\n    &lt;ul>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n    &lt;\/ul>\n  &lt;\/nav>\n\n  &lt;main>\n    &lt;article>\n      &lt;h1>Main article heading&lt;\/h1>\n      &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae sunt igitur communia vobis cum antiquis, iis sic utamur quasi concessis; Nihil acciderat ei, quod nollet, nisi quod anulum, quo delectabatur, in mari abiecerat. Unum est sine dolore esse, alterum cum voluptate. Laboro autem non sine causa; Theophrasti igitur, inquit, tibi liber ille placet de beata vita? Nihil opus est exemplis hoc facere longius. Duo Reges constructio interrete. Graecum enim hunc versum nostis omnes Suavis laborum est praeteritorum memoria. Haec et tu ita posuisti, et verba vestra sunt.&lt;\/p>\n\n      &lt;h2>Article secondary heading&lt;\/h2>\n      &lt;p>Nos commodius agimus. A mene tu? Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur. Tenesne igitur, inquam, Hieronymus Rhodius quid dicat esse summum bonum, quo putet omnia referri oportere? Nihilo beatiorem esse Metellum quam Regulum. Sed quanta sit alias, nunc tantum possitne esse tanta. Philosophi autem in suis lectulis plerumque moriuntur. Esse enim, nisi eris, non potes.&lt;\/p>\n      &lt;p>Sunt enim quasi prima elementa naturae, quibus ubertas orationis adhiberi vix potest, nec equidem eam cogito consectari. Id Sextilius factum negabat. Quorum sine causa fieri nihil putandum est. Quae autem natura suae primae institutionis oblita est?&lt;\/p>\n    &lt;\/article>\n  &lt;\/main>\n\n  &lt;aside>\n    &lt;section>\n      &lt;h2>Share&lt;\/h2>\n      &lt;ul>\n        &lt;li>&lt;a href=\"#\">Facebook&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Twitter&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Email&lt;\/a>&lt;\/li>\n      &lt;\/ul>\n    &lt;\/section>\n    &lt;section>\n      &lt;h2>Recommended&lt;\/h2>\n      &lt;ul>\n        &lt;li>\n          &lt;article>\n            &lt;h3>&lt;a href=\"#\">Related article&lt;\/a>&lt;\/h3>\n            &lt;p>Article description&lt;\/p>\n          &lt;\/article>\n        &lt;\/li>\n        &lt;li>\n          &lt;article>\n            &lt;h3>&lt;a href=\"#\">Related article&lt;\/a>&lt;\/h3>\n            &lt;p>Article description&lt;\/p>\n          &lt;\/article>\n        &lt;\/li>\n      &lt;\/ul>\n    &lt;\/section>\n  &lt;\/aside>\n\n  &lt;footer>\n    &lt;ul>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n    &lt;\/ul>\n  &lt;\/footer>\n\n&lt;\/body><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-8\">The <code>&lt;main&gt;<\/code> element<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">There is a very important semantic element that I used in the markup above that I haven\u2019t covered yet and that is the <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/grouping-content.html#the-main-element\" rel=\"noopener\"><code>&lt;main&gt;<\/code><\/a> element. The <code>&lt;main&gt;<\/code> element represents the primary content of the page. It is not supposed to feature any side bars or navigation elements in it. You also must not have more than one <code>&lt;main&gt;<\/code> element on the page unless all other <code>&lt;main&gt;<\/code> elements on the page have a <code>hidden<\/code> attribute applied to them (this is for the sake of SPAs).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>&lt;main&gt;<\/code> element is <strong>not<\/strong> a sectioning element. This means that it doesn\u2019t help contribute to the document outline algorithm and it can\u2019t feature a <code>&lt;header&gt;<\/code> or <code>&lt;footer&gt;<\/code> element as a direct child. It is a landmark element though so screen reader users are able to navigate to it quite easily.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I\u2019m not 100% sure if using <code>&lt;article&gt;<\/code> in the <code>&lt;main&gt;<\/code> element like I have done above is necessary. Semantically, it does make sense. The main content is self-contained, thus justifying use of the <code>&lt;article&gt;<\/code> element in this way. From a document outline algorithm perspective, the <code>&lt;article&gt;<\/code> element also helps with the document structure.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From a usability point of view, it feels a bit unnecessary and the document outline algorithm doesn\u2019t even work anywhere at the moment. I\u2019m going to continue using it throughout my examples but I would be interested to know what other people think about this in the comments section.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-9\">You need to label your sections. Here are three methods.<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">I am going to be saying the word \u201clabel\u201d a lot throughout this article. Keep in mind that I am not talking about the <code>&lt;label&gt;<\/code> element. <strong>The <code>&lt;label&gt;<\/code> element is <em>not<\/em> used to label sectioning elements.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sectioning elements require labels so that screen reader users are able to quickly identify what content they can find inside that particular section of the site. I consider using sectioning elements without providing associated section labels as an <a href=\"https:\/\/www.w3.org\/TR\/2016\/NOTE-WCAG20-TECHS-20161007\/G130\" rel=\"noopener\">accessibility fail<\/a>, unless it is the only one of its type on the page. It is also <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/navigation-mechanisms-descriptive.html#navigation-mechanisms-descriptive-164-head\" rel=\"noopener\">recommended<\/a> that the exact same label text not be used on multiple sectioning elements (or heading elements). This makes each section more recognizable to screen reader users which helps them navigate the site more easily.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are three ways to label a sectioning element. In the following examples, I refer to \u201ctransport\u201d and \u201cportability\u201d as a way of explaining how easy it is to save the section into a component and use that component multiple times in multiple different contexts.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I also provide lists of positives and negatives in the examples as well. In these lists, I assume that you want the section label to be readable by screen readers but <em>hidden<\/em> from sighted users.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"method-1-add-an-arialabel-attribute\">Method 1: Add an aria-label attribute<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">This is the quickest and easiest way to label a sectioning element.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;section aria-label=\"Label for this section\">\n  &lt;p>Content for this section&lt;\/p>\n&lt;\/section><\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"the-arialabel-translation-issue\">The aria-label translation issue<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">The main draw back of <code>aria-label<\/code> (at the time of writing) is that most browsers are unable to translate these values for users who speak a different language than you. The developers at Google recently <a href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=933519#c8\" rel=\"noopener\">fixed this bug in Chrome<\/a>, however this is <a href=\"https:\/\/twitter.com\/aardrian\/status\/1133459538827460608\" rel=\"noopener\">still a problem<\/a> for every other browser.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If your website has a large international audience or you know that many of your users do not speak your language, you should probably avoid using this attribute until all browsers support the translation of this property. If you don\u2019t have those sorts of users, it\u2019s pretty safe to assume that the non-sighted users viewing your site are able to understand your language \u2014 well enough to be able to navigate your site, anyway.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you need more convincing, let\u2019s say your site has very few international users. That means your users generally come from the same country as you. If they come from the same country then they are likely to speak the same language as you, so there is already a fairly small percentage of your users that don\u2019t understand the native language of your site. Now take into account that <code>aria-label<\/code> only affects <em>screen reader<\/em> users. That is now only a fraction of an already small percentage of your users who will experience the issue. And now consider that Chrome (by far the most popular browser in the world) now supports translation of the <code>aria-label<\/code> attribute. The user has to <em>also<\/em> not be using an up to date version of Chrome as their browser for the translation issue to be a problem. If you factor all of that together, it is highly probable that you may not have <em>any<\/em> users who are both able to perceive the <code>aria-label<\/code> attributes and are incapable of comprehending what they say. This makes me feel like the bad multi-lingual support in <code>aria-label<\/code> isn\u2019t really worth worrying that much about <em>unless<\/em> you have a large international audience or you have many users that you know do not speak your language.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"positives\">Positives<\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li>Super quick and easy to implement.<\/li><li>Doesn\u2019t affect heading structure.<\/li><li>Makes components easy to transport.<\/li><li>Is invisible to sighted users.<\/li><\/ul>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"negatives\">Negatives<\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li>Not translated into other languages in non-Chrome browsers (at time of writing).<\/li><li>Often not supported by page structure analysis tools.<\/li><li>Confusion can arise from not knowing what level other headings inside the section should be at.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"method-2-add-a-lthgt-element-to-it\">Method 2: Add a <code>&lt;h#&gt;<\/code> element to it<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">By <code>&lt;h#&gt;<\/code> I mean <code>&lt;h1&gt;<\/code>, <code>&lt;h2&gt;<\/code>, <code>&lt;h3&gt;<\/code>,<code>&lt;h4&gt;<\/code>,<code>&lt;h5&gt;<\/code>, or <code>&lt;h6&gt;<\/code> depending on what makes sense. Adding a heading to a sectioning element is a quick way to label it.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"heading-placement\">Heading placement<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">The heading can be placed either directly in the sectioning element, like this:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;section>\n  &lt;h1>Heading&lt;\/h1>\n  &lt;p>content&lt;\/p>\n&lt;\/section><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u2026or placed inside the <code>&lt;header&gt;<\/code> element:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;section>\n  &lt;header>\n    &lt;h1>Heading&lt;\/h1>\n    &lt;p>I'm a byline&lt;\/p>\n  &lt;\/header>\n\n  &lt;p>Content&lt;\/p>\n&lt;\/section><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">You can also place as many <code>&lt;div&gt;<\/code> wrapper elements between the sectioning element and the heading as you want.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!-- This is perfectly fine -->\n&lt;section>\n  &lt;div>\n    &lt;header>\n      &lt;div>\n        &lt;h1>Heading&lt;\/h1>\n        &lt;p>I'm a byline&lt;\/p>\n      &lt;\/div>\n    &lt;\/header>\n\n    &lt;p>Content&lt;\/p>\n  &lt;\/div>\n&lt;\/section><\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"only-one-heading-of-the-highest-level-per-sectioning-element\">Only one heading of the highest level per sectioning element<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">There should really only be one heading of the highest level in a sectioning element. The spec says that when there are multiple top level headings or headings of a higher level than the first, the browser is supposed to close the previous sectioning element and start a new one of the same type.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>The first element of <a href=\"https:\/\/www.w3.org\/TR\/html53\/dom.html#heading-content-2\" rel=\"noopener\">heading content<\/a> in an element of <a href=\"https:\/\/www.w3.org\/TR\/html53\/dom.html#sectioning-content-2\" rel=\"noopener\">sectioning content represents<\/a> the heading for that explicit section. Subsequent headings of equal or higher <a href=\"https:\/\/www.w3.org\/TR\/html53\/sections.html#rank\" rel=\"noopener\">rank<\/a> start new implied subsections that are part of the previous section\u2019s parent section. Subsequent headings of lower <a href=\"https:\/\/www.w3.org\/TR\/html53\/sections.html#rank\" rel=\"noopener\">rank<\/a> start new implied subsections that are part of the previous one. In both cases, the element <a href=\"https:\/\/www.w3.org\/TR\/html53\/dom.html#represent\" rel=\"noopener\">represents<\/a> the heading of the implied section.<\/p><p><small>\u2014HTML 5.3, <a href=\"https:\/\/www.w3.org\/TR\/html53\/sections.html#headings-and-sections\" rel=\"noopener\">Headings and Sections<\/a><\/small><\/p><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">In reality, the browser uses the first heading as the section label but these implied sections are never created. It just announces the heading as is when it encounters it. It\u2019s not earth-shatteringly bad but it is somewhat confusing.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!-- Avoid this: -->\n&lt;section>\n  &lt;h2>Heading level two labeling a section&lt;\/h2>\n  &lt;p>Content&lt;\/p>\n\n  &lt;!-- Don't use same level or higher headings as the one labeling the section -->\n  &lt;h2>This is also a heading level two&lt;\/h2>\n  &lt;p>Content&lt;\/p>\n&lt;\/section>\n\n&lt;!-- Do this instead: -->\n&lt;div>\n  &lt;section>\n    &lt;h2>Heading level two labeling a section&lt;\/h2>\n    &lt;p>Content&lt;\/p>\n  &lt;\/section>\n  &lt;section>\n    &lt;h2>Heading level two labeling a different section&lt;\/h2>\n    &lt;p>Content&lt;\/p>\n  &lt;\/section>\n&lt;\/div><\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"the-heading-always-comes-first\">The heading <em>always<\/em> comes first<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">If a sectioning element has a <code>&lt;h#&gt;<\/code> element, that top level heading should always be the very first piece of content inside that sectioning element. Failing to do so counts as an <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/content-structure-separation-sequence.html\" rel=\"noopener\">accessibility fail<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you find yourself needing to place content before your heading (like an image, for example), you can <a href=\"https:\/\/inclusive-components.design\/cards\/#theorderproperty\" rel=\"noopener\">use Flexbox to rearrange the visual order<\/a>. This will allow it to <em>look<\/em> like the image comes before the heading but in the markup the heading comes before the image. There is a bug in IE that will sometimes cause text to not wrap in a <code>flex-direction: column;<\/code> element. You can work around this issue by <a href=\"https:\/\/stackoverflow.com\/a\/55890568\/1611058\" rel=\"noopener\">applying a max-width<\/a> to the flex-child element.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!-- Don't do this -->\n&lt;section>\n  &lt;img src=\"image.jpg\" alt=\"Don't place content or images before the heading\" \/>\n  &lt;h2>Headings should always come first&lt;\/h2>\n  &lt;p>Place regular content after the heading&lt;\/p>\n&lt;\/section>\n\n&lt;!-- Do this instead -->\n&lt;section class=\"example\">\n  &lt;h2>Headings should always come first&lt;\/h2>\n  &lt;img src=\"image.jpg\" alt=\"Don't place content or images before the heading\" \/>\n  &lt;p>Place regular content after the heading&lt;\/p>\n&lt;\/section>\n\n&lt;style>\n.example {\n  display: flex;\n  flex-direction: column;\n}\n.example img {\n  order: -1;\n}\n&lt;\/style><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Note that rearranging the visual order to satisfy WCAG Guideline <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/meaningful-sequence.html\" rel=\"noopener\">1.3.2: Meaningful Sequence<\/a> can conflict directly with WCAG Guideline <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/focus-order.html\" rel=\"noopener\">2.4.3: Focus Order<\/a>. For example, if that image is a link to an article and the heading you are placing it above is <em>also<\/em> a link to the article, placing the heading first breaks the focus order. Placing the image first breaks the meaningful sequence.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In situations like this where these two guidelines conflict with one another, my opinion is that the <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/meaningful-sequence.html\" rel=\"noopener\">1.3.2: Meaningful Sequence<\/a> guideline is the more important guideline to follow if you aren\u2019t able to resolve the conflict in some way. Failing focus order leads to the user suffering a moment of discomfort as they are tabbing through the content and focus is sent to an unexpected location. Failing to follow a meaningful sequence leads to a confused user unsure of the relationship between different bits of content.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"making-visually-hidden-section-labels-out-of-headings\">Making visually hidden section labels out of headings<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Headings are visible to sighted users by default. This makes them super useful if you want the heading to be visible. A lot of the time, we don\u2019t want the label for our sectioning element to be visible though. In order to stop our sighted users from seeing the label, we need to use some CSS.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;style>\n.visually-hidden {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n&lt;\/style>\n\n&lt;section>\n  &lt;h1 class=\"visually-hidden\">Heading&lt;\/h1>\n  &lt;p>content&lt;\/p>\n&lt;\/section><\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"headings-are-wellsupported-by-structure-analysis-tools\">Headings are well-supported by structure analysis tools<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Headings also have a huge advantage for developers in that any page structure analysis tool that you can find will have support for them. This makes heading structures easy to test and debug. The other two section labeling methods have very poor support in testing tools. Not even the <a href=\"https:\/\/validator.w3.org\/\" rel=\"noopener\">official W3C Validator<\/a> service supports the alternatives at the moment. I <a href=\"https:\/\/github.com\/validator\/validator\/issues\/805\" rel=\"noopener\">posted an issue<\/a> to have this fixed \u2014 please consider helping to fix the issue if you are good at coding in Java.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"positives-2\">Positives<\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li>Quick to implement.<\/li><li>Reliably appears in page structure analysis tools making it easy to test and debug.<\/li><li>All browsers will translate the text into other languages.<\/li><li>No confusion over what level other headings inside the section should be.<\/li><\/ul>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"negatives-2\">Negatives<\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li>Affects document heading structure.<\/li><li>Need to ensure that the heading is at the correct level before use.<\/li><li>Visible to the user by default.<\/li><li>Requires CSS to hide the heading from visual users.<\/li><li>Can make components less portable due to heading structure requirements.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"method-3-use-an-arialabelledby-attribute\">Method 3: Use an aria-labelledby attribute<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">This is what it looks like to create a hidden section label using <code>aria-labelledby<\/code>.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;section aria-labelledby=\"unique-id\">\n  &lt;div hidden id=\"unique-id\">Label for this section&lt;\/div>\n  &lt;p>Content for this section&lt;\/p>\n&lt;\/section><\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"labels-can-be-hidden-without-css\">Labels can be hidden without CSS<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Note that I used the <code>hidden<\/code> attribute in the example to hide the div rather than a <code>visually-hidden<\/code> CSS class. <code>aria-labelledby<\/code> is able to read out text that is normally hidden from screen reader users. This adds the bonus effect of preventing the text from being read out twice by the screen reader. Don\u2019t use the <code>aria-hidden<\/code> attribute though. Screen readers will not find the label text. Well, <a href=\"https:\/\/www.nvaccess.org\/about-nvda\/\" rel=\"noopener\">NVDA<\/a> couldn\u2019t find the label text when I tested it. I\u2019m not sure about other screen readers.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"major-portability-issue\">Major portability issue<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\"><code>aria-labelledby<\/code> is the most difficult to use out of all the section labeling methods. The main aspect that makes it difficult to use is that the <code>aria-labelledby<\/code> attribute works off IDs. Things always get more complicated whenever IDs are involved. This is due to web pages only being allowed to have a single instance of an ID on the page at any one time. This makes component portability difficult.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Due to this portability issue, I would really only recommend this option if you need to support a multi-lingual audience and don\u2019t want to mess around with the heading structure.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"no-need-to-place-the-label-near-the-sectioning-element\">No need to place the label near the sectioning element<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">You don\u2019t need to place the element with the label text inside or near the section element that it labels. The text for the label can be placed in a completely different location to the sectioning element. This is thanks to the ID linking the two elements together. I\u2019m not necessarily saying that it is a good idea to do this, but it is a feature of <code>aria-labelledby<\/code> that you should be aware of.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div hidden id=\"unique-id\">Label for this section&lt;\/div>\n\n&lt;!-- 1,000 lines of other HTML -->\n\n&lt;section aria-labelledby=\"unique-id\">\n  &lt;p>Content for this section&lt;\/p>\n&lt;\/section><\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"turn-nonheading-elements-into-section-labels\">Turn non-heading elements into section labels<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">There is one other key reason you may want to use <code>aria-labelledby<\/code>. If you have a visible non-heading element on the page that you want to use as the label for a section, <code>aria-labelledby<\/code> is perfect for this. A <code>&lt;legend&gt;<\/code> element inside a <code>&lt;fieldset&gt;<\/code> is a common use case for this. This doesn\u2019t mean that you <em>have<\/em> to wrap fieldsets in sectioning elements. I\u2019m just pointing it out in case you spot a need for it.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;section aria-labelledby=\"section_label\">\n  &lt;fieldset>\n    &lt;legend id=\"section_label\">\n      I am both the fieldset legend and the section label\n    &lt;\/legend>\n\n    &lt;!-- Form fields go here -->\n  \n  &lt;\/fieldset>\n&lt;\/section><\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"positives-3\">Positives<\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li>All browsers will translate the text into other languages.<\/li><li>Can assign a non-heading element as the section label.<\/li><li>Text for the label does not need to be placed near the section it is labeling.<\/li><\/ul>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"negatives-3\">Negatives<\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li>Requires the use of IDs to work.<\/li><li>Difficult to transport.<\/li><li>It can potentially be difficult to track down where the text for the label is stored in your source code.<\/li><li>Text is visible by default unless a <code>hidden<\/code> attribute is used.<\/li><li>Text might get read out twice by some screen readers if the text is not hidden.<\/li><li>Confusion can arise from not knowing what level other headings inside the section should be at.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-10\">Only use one method at a time<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Don\u2019t use a <code>&lt;h#&gt;<\/code>, an <code>aria-label<\/code> and\/or an <code>aria-labelledby<\/code> attribute at the same time on the same sectioning element. Only every use one labeling method at a time for each sectioning element. Using multiple methods is super confusing and leads to the label being overwritten. It\u2019s a bit like declaring the same property twice in CSS. I wasn\u2019t sure how a screen reader would actually handle this so I created the most ridiculous <code>&lt;section&gt;<\/code> ever and ran it through <a href=\"https:\/\/www.nvaccess.org\/download\/\" rel=\"noopener\">NVDA<\/a>.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!-- Don't do this -->\n&lt;section aria-label=\"Is this the section label?\" aria-labelledby=\"is_this_the_label\">\n  &lt;h1>Or is this the section label?&lt;\/h1>\n  &lt;p id=\"is_this_the_label\">Only ever use one at a time.&lt;\/p>\n&lt;\/section><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This is the order of priority that NVDA gave to the various labeling methods from strongest to weakest:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><code>aria-labelledby<\/code><\/li><li><code>aria-label<\/code><\/li><li><code>&lt;h#&gt;<\/code><\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-11\">Adding section labels to our example layout<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">For a long time, I used headings as the only means of labeling sections. The poor multi-lingual support provided by <code>aria-label<\/code> scared me; and <code>aria-labelledby<\/code> was far too cumbersome to be my primary labeling method. We run into a bit of an issue though if we use <em>only<\/em> headings to label sections. I\u2019ll show you what I mean.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;style>\n  .visually-hidden {\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n  }\n&lt;\/style>\n\n&lt;body>\n\n  &lt;header>\n    &lt;a href=\"\/\" title=\"Go to home page\">\n      &lt;img src=\"logo.png\" alt=\"Site logo\">\n    &lt;\/a>\n    &lt;nav>\n      &lt;h2 class=\"visually-hidden\">Primary&lt;\/h2>\n      &lt;ul>\n        &lt;li>&lt;a href=\"#\">Primary nav&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Primary nav&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Primary nav&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Primary nav&lt;\/a>&lt;\/li>\n      &lt;\/ul>\n    &lt;\/nav>\n    &lt;form role=\"search\" aria-label=\"site\">\n      &lt;label>\n        &lt;span>Search&lt;\/span>\n        &lt;input type=\"search\"\/>\n      &lt;\/label>\n      &lt;button type=\"submit\">Submit&lt;\/button>\n    &lt;\/form>\n  &lt;\/header>\n\n  &lt;nav>\n    &lt;h2 class=\"visually-hidden\">Secondary&lt;\/h2>\n    &lt;ul>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n    &lt;\/ul>\n  &lt;\/nav>\n\n  &lt;main>\n    &lt;article>\n      &lt;h1>Main article heading&lt;\/h1>\n      &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae sunt igitur communia vobis cum antiquis, iis sic utamur quasi concessis; Nihil acciderat ei, quod nollet, nisi quod anulum, quo delectabatur, in mari abiecerat. Unum est sine dolore esse, alterum cum voluptate. Laboro autem non sine causa; Theophrasti igitur, inquit, tibi liber ille placet de beata vita? Nihil opus est exemplis hoc facere longius. Duo Reges constructio interrete. Graecum enim hunc versum nostis omnes Suavis laborum est praeteritorum memoria. Haec et tu ita posuisti, et verba vestra sunt.&lt;\/p>\n\n      &lt;h2>Article secondary heading&lt;\/h2>\n      &lt;p>Nos commodius agimus. A mene tu? Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur. Tenesne igitur, inquam, Hieronymus Rhodius quid dicat esse summum bonum, quo putet omnia referri oportere? Nihilo beatiorem esse Metellum quam Regulum. Sed quanta sit alias, nunc tantum possitne esse tanta. Philosophi autem in suis lectulis plerumque moriuntur. Esse enim, nisi eris, non potes.&lt;\/p>\n      &lt;p>Sunt enim quasi prima elementa naturae, quibus ubertas orationis adhiberi vix potest, nec equidem eam cogito consectari. Id Sextilius factum negabat. Quorum sine causa fieri nihil putandum est. Quae autem natura suae primae institutionis oblita est?&lt;\/p>\n    &lt;\/article>\n  &lt;\/main>\n\n  &lt;aside>\n    &lt;h2 class=\"visually-hidden\">Sidebar&lt;\/h2>\n    &lt;section>\n      &lt;h3>Share&lt;\/h3>\n      &lt;ul>\n        &lt;li>&lt;a href=\"#\">Facebook&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Twitter&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Email&lt;\/a>&lt;\/li>\n      &lt;\/ul>\n    &lt;\/section>\n    &lt;section>\n      &lt;h3>Recommended&lt;\/h3>\n      &lt;ul>\n        &lt;li>\n          &lt;article>\n            &lt;h4>&lt;a href=\"#\">Related article&lt;\/a>&lt;\/h4>\n            &lt;p>Article description&lt;\/p>\n          &lt;\/article>\n        &lt;\/li>\n        &lt;li>\n          &lt;article>\n            &lt;h4>&lt;a href=\"#\">Related article&lt;\/a>&lt;\/h4>\n            &lt;p>Article description&lt;\/p>\n          &lt;\/article>\n        &lt;\/li>\n      &lt;\/ul>\n    &lt;\/section>\n  &lt;\/aside>\n\n  &lt;footer>\n    &lt;ul>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n    &lt;\/ul>\n  &lt;\/footer>\n&lt;\/body><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">If we look at our heading structure now, it will look like this (<em>italics<\/em> = visually hidden; <strong>bold<\/strong> = visible):<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>&lt;h2&gt;<\/code> <em>Primary [nav]<\/em><\/li><li><code>&lt;h2&gt;<\/code> <em>Secondary [nav]<\/em><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Notice that our <code>&lt;h1&gt;<\/code> heading isn\u2019t at the top of the list? It really doesn\u2019t feel right having two <code>&lt;h2&gt;<\/code> headings above the <code>&lt;h1&gt;<\/code> heading.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This form of heading structure is actually <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/page-structure\/headings\/#main-heading-after-navigation\" rel=\"noopener\">allowed by the W3C<\/a> so it doesn\u2019t count as an accessibility fail. I still think that this is a pretty bad UX for screen reader users though. It is not a logical progression from <code>&lt;h1&gt;<\/code> to <code>&lt;h2&gt;<\/code>. It makes the most sense if the first heading you encounter on the page is a <code>&lt;h1&gt;<\/code> then progress into <code>&lt;h2&gt;<\/code> then <code>&lt;h3&gt;<\/code> and so on.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-12\">Making Heading 1 be the first heading<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">For a very long time, I thought the absolute best way to handle this conundrum was to make the <code>&lt;h1&gt;<\/code> visually hidden and have it be the very first piece of content on the page. The thing that everyone thinks is the <code>&lt;h1&gt;<\/code> actually becomes a <code>&lt;h2&gt;<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is what that sort of structure looks like in practice:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;style>\n  .visually-hidden {\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n  }\n&lt;\/style>\n\n&lt;!-- Don't do this -->\n&lt;body>\n  &lt;header>\n    &lt;h1 class=\"visually-hidden\">Main article heading&lt;\/h1>\n    &lt;a href=\"\/\" title=\"Go to home page\">\n      &lt;img src=\"logo.png\" alt=\"Site logo\">\n    &lt;\/a>\n    &lt;nav>\n      &lt;h2 class=\"visually-hidden\">Primary&lt;\/h2>\n      &lt;ul>\n        &lt;li>&lt;a href=\"#\">Primary nav&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Primary nav&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Primary nav&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Primary nav&lt;\/a>&lt;\/li>\n      &lt;\/ul>\n    &lt;\/nav>\n    &lt;form role=\"search\" aria-label=\"site\">\n      &lt;label>\n        &lt;span>Search&lt;\/span>\n        &lt;input type=\"search\"\/>\n      &lt;\/label>\n      &lt;button type=\"submit\">Submit&lt;\/button>\n    &lt;\/form>\n  &lt;\/header>\n\n  &lt;nav>\n    &lt;h2 class=\"visually-hidden\">Secondary&lt;\/h2>\n    &lt;ul>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n    &lt;\/ul>\n  &lt;\/nav>\n\n  &lt;main>\n    &lt;article>\n      &lt;h2>&lt;span class=\"visually-hidden\">Body:&lt;\/span> Main article heading&lt;\/h2>\n      &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae sunt igitur communia vobis cum antiquis, iis sic utamur quasi concessis; Nihil acciderat ei, quod nollet, nisi quod anulum, quo delectabatur, in mari abiecerat. Unum est sine dolore esse, alterum cum voluptate. Laboro autem non sine causa; Theophrasti igitur, inquit, tibi liber ille placet de beata vita? Nihil opus est exemplis hoc facere longius. Duo Reges constructio interrete. Graecum enim hunc versum nostis omnes Suavis laborum est praeteritorum memoria. Haec et tu ita posuisti, et verba vestra sunt.&lt;\/p>\n\n      &lt;h3>Article secondary heading&lt;\/h3>\n      &lt;p>Nos commodius agimus. A mene tu? Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur. Tenesne igitur, inquam, Hieronymus Rhodius quid dicat esse summum bonum, quo putet omnia referri oportere? Nihilo beatiorem esse Metellum quam Regulum. Sed quanta sit alias, nunc tantum possitne esse tanta. Philosophi autem in suis lectulis plerumque moriuntur. Esse enim, nisi eris, non potes.&lt;\/p>\n      &lt;p>Sunt enim quasi prima elementa naturae, quibus ubertas orationis adhiberi vix potest, nec equidem eam cogito consectari. Id Sextilius factum negabat. Quorum sine causa fieri nihil putandum est. Quae autem natura suae primae institutionis oblita est?&lt;\/p>\n    &lt;\/article>\n  &lt;\/main>\n\n  &lt;aside>\n    &lt;h2 class=\"visually-hidden\">Sidebar&lt;\/h2>\n    &lt;section>\n      &lt;h3>Share&lt;\/h3>\n      &lt;ul>\n        &lt;li>&lt;a href=\"#\">Facebook&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Twitter&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Email&lt;\/a>&lt;\/li>\n      &lt;\/ul>\n    &lt;\/section>\n    &lt;section>\n      &lt;h3>Recommended&lt;\/h3>\n      &lt;ul>\n        &lt;li>\n          &lt;article>\n            &lt;h4>&lt;a href=\"#\">Related article&lt;\/a>&lt;\/h4>\n            &lt;p>Article description&lt;\/p>\n          &lt;\/article>\n        &lt;\/li>\n        &lt;li>\n          &lt;article>\n            &lt;h4>&lt;a href=\"#\">Related article&lt;\/a>&lt;\/h4>\n            &lt;p>Article description&lt;\/p>\n          &lt;\/article>\n        &lt;\/li>\n      &lt;\/ul>\n    &lt;\/section>\n  &lt;\/aside>\n\n  &lt;footer>\n    &lt;ul>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n    &lt;\/ul>\n  &lt;\/footer>\n&lt;\/body><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now we have a document outline that looks like this (<em>italics<\/em> = visually hidden; <strong>bold<\/strong> = visible):<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>&lt;h1&gt;<\/code> <em>Main article heading<\/em><ul><li><code>&lt;h2&gt;<\/code> <em>Primary [nav]<\/em><\/li><li><code>&lt;h2&gt;<\/code> <em>Secondary [nav]<\/em><\/li><li><code>&lt;h2&gt;<\/code> <em>Body:<\/em> <strong>Main article heading<\/strong><ul><li><code>&lt;h3&gt;<\/code> <strong>Article secondary heading<\/strong><\/li><\/ul><\/li><li><code>&lt;h2&gt;<\/code> <em>Sidebar<\/em><ul><li><code>&lt;h3&gt;<\/code> <strong>Share<\/strong><\/li><li><code>&lt;h3&gt;<\/code> <strong>Recommended<\/strong><ul><li><code>&lt;h4&gt;<\/code> <strong>Related article<\/strong><\/li><li><code>&lt;h4&gt;<\/code> <strong>Related article<\/strong><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This mostly feels right. The <code>&lt;h1&gt;<\/code> is at the top and it all flows down perfectly with the <code>&lt;h2&gt;<\/code> elements representing major page sections and the <code>&lt;h3&gt;<\/code> elements representing sub sections. The main awkward bit is that the actual <code>&lt;h1&gt;<\/code> and the thing that everyone thinks is a <code>&lt;h1&gt;<\/code> are essentially duplicates of one another.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It wasn\u2019t until I wrote up the first version of this article, had it nearly published, then had it thrown out the window, that I started to think differently. I talked with two accessibility consultants about the issue. They both agreed that, though this is a clever technical solution to the problem, it detracts from the experience of the very people that it is trying to help.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The issue is that when every other website in the world places the <code>&lt;h1&gt;<\/code> heading at the top of the main content area, that is what screen reader users come to expect. When your site is the special snowflake that does things differently, it confuses screen reader users and it takes them some time to figure out how your heading structure is supposed to work.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So, with that in mind, I\u2019ve settled on a new method for handling the labeling of sectioning elements. Basically, any time I would have used a visually hidden heading, I would use an <code>aria-label<\/code> attribute now instead. If the site has a large non-native speaking audience, I would use <code>aria-labelledby<\/code> instead of <code>aria-label<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-13\">Concerns with the simplified outline algorithm spec<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If the <a href=\"https:\/\/whatpr.org\/html\/3499\/e32a6f8...f13faa7\/sections.html#headings-and-sections\" rel=\"noopener\">simplified outline algorithm<\/a> is approved in its current state, we will actually need to start structuring our sites like the visually hidden <code>&lt;h1&gt;<\/code> example anyway (just replace the <code>&lt;h2&gt;<\/code>, <code>&lt;h3&gt;<\/code> and <code>&lt;h4&gt;<\/code> elements with <code>&lt;h1&gt;<\/code> elements).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <a href=\"https:\/\/www.w3.org\/TR\/html53\/sections.html#creating-an-outline\" rel=\"noopener\">original spec<\/a> aimed to create the outline through the labeling of sectioning elements. This new spec is clearly aimed at trying to create the outline purely through heading levels. The algorithm basically calculates the heading level based on the <a href=\"https:\/\/whatpr.org\/html\/3499\/e32a6f8...f13faa7\/sections.html#headings-and-sections:sectioning-content-2\" rel=\"noopener\">number of ancestor sectioning elements<\/a> a heading has <em>plus<\/em> the heading\u2019s base heading level value. It\u2019s a bit more nuanced than that in the spec, but that is the general idea of how it works in simple terms.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The simplified algorithm currently makes no mention of <code>aria-label<\/code> or <code>aria-labelledby<\/code>. This means that those attributes will not help contribute to the document outline that the simplified algorithm generates. With a lack of <code>aria-label<\/code> support, this would mean labeling a sectioning element with <code>aria-label<\/code> could easily lead to skipped heading levels deeper in the tree.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!-- Simplified algorithm skipped heading levels issue -->\n&lt;body>\n  &lt;main>\n    &lt;h1>Primary heading for the page&lt;\/h1> &lt;!-- interpreted as &lt;h1> -->\n    &lt;p>This is some content&lt;\/p>\n  &lt;\/main>\n\n  &lt;!-- sectioning elements increase heading levels -->\n  &lt;aside aria-label=\"Side bar\"> &lt;!-- aria-label does not contribute -->\n    &lt;section>\n      &lt;h1>Share&lt;\/h1> &lt;!-- interpreted as &lt;h3> -->\n      &lt;ul>\n        &lt;!-- list of social media links -->\n      &lt;\/ul>\n    &lt;\/section>\n\n    &lt;section>\n      &lt;h1>Recommended articles:&lt;\/h1>  &lt;!-- interpreted as &lt;h3> -->\n      &lt;ul>\n        &lt;!-- list of recommended articles -->\n      &lt;\/ul>\n    &lt;\/section>\n  &lt;\/aside>\n&lt;\/body><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The simplified spec also considers it <strong>invalid<\/strong> to:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/whatpr.org\/html\/3499\/e32a6f8...f13faa7\/sections.html#headings-and-sections:concept-heading-11\" rel=\"noopener\">not have a heading level of 1 at the root of the document<\/a> (which is problematic if you are placing the main body content inside an <code>&lt;article&gt;<\/code> element); and<\/li><li><a href=\"https:\/\/whatpr.org\/html\/3499\/e32a6f8...f13faa7\/sections.html#headings-and-sections:concept-heading-12\" rel=\"noopener\">not have a heading level of 1 be the first heading in a document<\/a> (which, for the most part, is okay, unless you need to use a heading in the site header or in a left side bar).<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">It does, however, allow for there to be <a href=\"https:\/\/whatpr.org\/html\/3499\/e32a6f8...f13faa7\/sections.html#headings-and-sections:document-headings-7\" rel=\"noopener\">more than one level 1 heading<\/a> at the root of the document, which I find very odd and bad for accessibility (though my concern about this <a href=\"https:\/\/github.com\/whatwg\/html\/pull\/3499#issuecomment-452910628\" rel=\"noopener\">seems to have been ignored<\/a>).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I have voiced the issues I have with the spec and proposed possible solutions in the <a href=\"https:\/\/github.com\/whatwg\/html\/pull\/3499#issuecomment-496053728\" rel=\"noopener\">GitHub discussion<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For the moment, it is still best to use <code>aria-label<\/code> and\/or <code>aria-labelledby<\/code> attributes instead of visually hidden headings to label sectioning elements. It isn\u2019t worth diminishing the experience of our present day users for the sake of a spec that hasn\u2019t even been finalized or accepted yet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-14\">Using aria on the example layout sectioning elements<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"using-arialabel\">Using <code>aria-label<\/code><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">This is what the HTML structure looks like if we use <code>aria-label<\/code> attributes to label the sectioning elements:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;body>\n  &lt;header>\n    &lt;a href=\"\/\" title=\"Go to home page\">\n      &lt;img src=\"logo.png\" alt=\"Site logo\">\n    &lt;\/a>\n    &lt;nav aria-label=\"Primary\">\n      &lt;ul>\n        &lt;li>&lt;a href=\"#\">Primary nav&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Primary nav&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Primary nav&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Primary nav&lt;\/a>&lt;\/li>\n      &lt;\/ul>\n    &lt;\/nav>\n    &lt;form role=\"search\" aria-label=\"site\">\n      &lt;label>\n        &lt;span>Search&lt;\/span>\n        &lt;input type=\"search\"\/>\n      &lt;\/label>\n      &lt;button type=\"submit\">Submit&lt;\/button>\n    &lt;\/form>\n  &lt;\/header>\n\n  &lt;nav aria-label=\"Secondary\">\n    &lt;ul>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n  &lt;\/ul>\n  &lt;\/nav>\n\n  &lt;main>\n    &lt;article>\n      &lt;h1>Main article heading&lt;\/h1>\n      &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae sunt igitur communia vobis cum antiquis, iis sic utamur quasi concessis; Nihil acciderat ei, quod nollet, nisi quod anulum, quo delectabatur, in mari abiecerat. Unum est sine dolore esse, alterum cum voluptate. Laboro autem non sine causa; Theophrasti igitur, inquit, tibi liber ille placet de beata vita? Nihil opus est exemplis hoc facere longius. Duo Reges constructio interrete. Graecum enim hunc versum nostis omnes Suavis laborum est praeteritorum memoria. Haec et tu ita posuisti, et verba vestra sunt.&lt;\/p>\n\n      &lt;h2>Article secondary heading&lt;\/h2>\n      &lt;p>Nos commodius agimus. A mene tu? Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur. Tenesne igitur, inquam, Hieronymus Rhodius quid dicat esse summum bonum, quo putet omnia referri oportere? Nihilo beatiorem esse Metellum quam Regulum. Sed quanta sit alias, nunc tantum possitne esse tanta. Philosophi autem in suis lectulis plerumque moriuntur. Esse enim, nisi eris, non potes.&lt;\/p>\n      &lt;p>Sunt enim quasi prima elementa naturae, quibus ubertas orationis adhiberi vix potest, nec equidem eam cogito consectari. Id Sextilius factum negabat. Quorum sine causa fieri nihil putandum est. Quae autem natura suae primae institutionis oblita est?&lt;\/p>\n    &lt;\/article>\n  &lt;\/main>\n\n  &lt;aside aria-label=\"Sidebar\">\n    &lt;section>\n      &lt;h2>Share&lt;\/h2>\n      &lt;ul>\n        &lt;li>&lt;a href=\"#\">Facebook&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Twitter&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Email&lt;\/a>&lt;\/li>\n      &lt;\/ul>\n    &lt;\/section>\n    &lt;section>\n      &lt;h2>Recommended&lt;\/h2>\n      &lt;ul>\n        &lt;li>\n          &lt;article>\n            &lt;h3>&lt;a href=\"#\">Related article&lt;\/a>&lt;\/h3>\n            &lt;p>Article description&lt;\/p>\n          &lt;\/article>\n        &lt;\/li>\n        &lt;li>\n          &lt;article>\n            &lt;h3>&lt;a href=\"#\">Related article&lt;\/a>&lt;\/h3>\n            &lt;p>Article description&lt;\/p>\n          &lt;\/article>\n        &lt;\/li>\n      &lt;\/ul>\n    &lt;\/section>\n  &lt;\/aside>\n\n  &lt;footer>\n    &lt;ul>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n    &lt;\/ul>\n  &lt;\/footer>\n&lt;\/body><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Here is the layout in CodePen in case you want to have a play around with it (sorry mobile users, it\u2019s not mobile friendly):<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WBybNo\" src=\"\/\/codepen.io\/anon\/embed\/WBybNo?height=450&amp;theme-id=1&amp;slug-hash=WBybNo&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WBybNo\" title=\"CodePen Embed WBybNo\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"using-arialabelledby\">Using <code>aria-labelledby<\/code><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">But let\u2019s assume that you have a huge international audience that speaks all sorts of languages. In that case, it is better to use the <code>aria-labelledby<\/code> attribute. Here is what that would look like:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;body>\n\n  &lt;header>\n    &lt;a href=\"\/\" title=\"Go to home page\">\n      &lt;img src=\"logo.png\" alt=\"Site logo\">\n    &lt;\/a>\n    &lt;nav aria-labelledby=\"primary-nav-label\">\n      &lt;div id=\"primary-nav-label\" hidden>Primary&lt;\/div>\n      &lt;ul>\n        &lt;li>&lt;a href=\"#\">Primary nav&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Primary nav&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Primary nav&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Primary nav&lt;\/a>&lt;\/li>\n      &lt;\/ul>\n    &lt;\/nav>\n    &lt;form role=\"search\" aria-labelledby=\"search-label\">\n      &lt;div id=\"search-label\" hidden>Site&lt;\/div>\n      &lt;label>\n        &lt;span>Search&lt;\/span>\n        &lt;input type=\"search\"\/>\n      &lt;\/label>\n      &lt;button type=\"submit\">Submit&lt;\/button>\n    &lt;\/form>\n  &lt;\/header>\n\n  &lt;nav aria-labelledby=\"secondary-nav-label\">\n    &lt;div id=\"secondary-nav-label\" hidden>Secondary&lt;\/div>\n    &lt;ul>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Secondary nav&lt;\/a>&lt;\/li>\n    &lt;\/ul>\n  &lt;\/nav>\n\n  &lt;main>\n    &lt;article>\n      &lt;h1>Main article heading&lt;\/h1>\n      &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae sunt igitur communia vobis cum antiquis, iis sic utamur quasi concessis; Nihil acciderat ei, quod nollet, nisi quod anulum, quo delectabatur, in mari abiecerat. Unum est sine dolore esse, alterum cum voluptate. Laboro autem non sine causa; Theophrasti igitur, inquit, tibi liber ille placet de beata vita? Nihil opus est exemplis hoc facere longius. Duo Reges constructio interrete. Graecum enim hunc versum nostis omnes Suavis laborum est praeteritorum memoria. Haec et tu ita posuisti, et verba vestra sunt.&lt;\/p>\n\n      &lt;h2>Article secondary heading&lt;\/h2>\n      &lt;p>Nos commodius agimus. A mene tu? Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur. Tenesne igitur, inquam, Hieronymus Rhodius quid dicat esse summum bonum, quo putet omnia referri oportere? Nihilo beatiorem esse Metellum quam Regulum. Sed quanta sit alias, nunc tantum possitne esse tanta. Philosophi autem in suis lectulis plerumque moriuntur. Esse enim, nisi eris, non potes.&lt;\/p>\n      &lt;p>Sunt enim quasi prima elementa naturae, quibus ubertas orationis adhiberi vix potest, nec equidem eam cogito consectari. Id Sextilius factum negabat. Quorum sine causa fieri nihil putandum est. Quae autem natura suae primae institutionis oblita est?&lt;\/p>\n    &lt;\/article>\n  &lt;\/main>\n\n  &lt;aside aria-labelledby=\"sidebar-label\">\n    &lt;div id=\"sidebar-label\" hidden>Sidebar&lt;\/div>\n    &lt;section>\n      &lt;h2>Share&lt;\/h2>\n      &lt;ul>\n        &lt;li>&lt;a href=\"#\">Facebook&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Twitter&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Email&lt;\/a>&lt;\/li>\n      &lt;\/ul>\n    &lt;\/section>\n    &lt;section>\n      &lt;h2>Recommended&lt;\/h2>\n      &lt;ul>\n        &lt;li>\n          &lt;article>\n            &lt;h3>&lt;a href=\"#\">Related article&lt;\/a>&lt;\/h3>\n            &lt;p>Article description&lt;\/p>\n          &lt;\/article>\n        &lt;\/li>\n        &lt;li>\n          &lt;article>\n            &lt;h3>&lt;a href=\"#\">Related article&lt;\/a>&lt;\/h3>\n            &lt;p>Article description&lt;\/p>\n          &lt;\/article>\n        &lt;\/li>\n      &lt;\/ul>\n    &lt;\/section>\n  &lt;\/aside>\n\n  &lt;footer>\n    &lt;ul>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n      &lt;li>&lt;a href=\"#\">Footer link&lt;\/a>&lt;\/li>\n    &lt;\/ul>\n  &lt;\/footer>\n&lt;\/body><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"results-of-using-aria\">Results of using aria<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The heading structure for the site at this point looks like this:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>&lt;h1&gt;<\/code> Main article heading<ul><li><code>&lt;h2&gt;<\/code> Article secondary heading<\/li><li><code>&lt;h2&gt;<\/code> Share<\/li><li><code>&lt;h2&gt;<\/code> Recommended<ul><li><code>&lt;h3&gt;<\/code> Related article<\/li><li><code>&lt;h3&gt;<\/code> Related article<\/li><\/ul><\/li><\/ul><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The document outline (assuming that the original outline algorithm is implemented) looks like this:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>&lt;body&gt;<\/code> Document<ul><li><code>&lt;nav&gt;<\/code> Primary<\/li><li><code>&lt;nav&gt;<\/code> Secondary<\/li><li><code>&lt;article&gt;<\/code> Main article heading<ul><li><code>&lt;section (implied)&gt;<\/code> Article secondary heading<\/li><\/ul><\/li><li><code>&lt;aside&gt;<\/code> Sidebar<ul><li><code>&lt;section&gt;<\/code> Share<\/li><li><code>&lt;section&gt;<\/code> Recommended<ul><li><code>&lt;article&gt;<\/code> Related article<\/li><li><code>&lt;article&gt;<\/code> Related article<\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">You might be thinking that the document outline looks a bit bare. Shouldn\u2019t things like the header and footer and search be announced in there as well? Keep in mind that this is just the explicit stuff. We get a lot of implicit information provided to the user for free by using correct HTML elements in a good structure. This is a simplified version of how a screen reader user might experience the site:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>[Text used in the <code>&lt;title&gt;<\/code> element]<ul><li>Banner landmark<ul><li>Link, site logo [(on focus) \u201cgo to home page\u201d]<\/li><li>\u201cPrimary\u201d navigation landmark<ul><li>[List of navigation links]<\/li><\/ul><\/li><li>\u201cSite\u201d search landmark<\/li><\/ul><\/li><li>\u201cSecondary\u201d navigation landmark<ul><li>[List of navigation links]<\/li><\/ul><\/li><li>Main landmark<ul><li>\u201cMain article heading\u201d article landmark, heading level 1<ul><li>[Content]<\/li><li>Heading level 2, \u201cArticle secondary heading\u201d<ul><li>[Content]<\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><li>\u201cSidebar\u201d complimentary landmark<ul><li>\u201cShare\u201d region landmark, heading level 2<ul><li>[List of share links]<\/li><\/ul><\/li><li>\u201cRecommended\u201d region landmark, heading level 2<ul><li>List with 2 items<ul><li>Item, \u201cRelated article\u201d article landmark, heading level 3<ul><li>[Content]<\/li><\/ul><\/li><li>Item, \u201cRelated article\u201d article landmark, heading level 3<ul><li>[Content]<\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><li>Content info landmark<ul><li>[List of footer links]<\/li><\/ul><\/li><\/ul><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">As you can see, the site structure becomes quite clear and understandable to screen reader users when you factor in all of the extra implicit information that you get from using a good HTML structure<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So, even though no browser supports the document outline algorithm, it is still worth putting some effort into thinking about the outline. Screen readers still tell users what type of section something is, where sections start and (sometimes) end (depends on the screen reader), and what the section label is. This means that your efforts to make a good document structure do not go to waste.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This type of structure comes with multiple benefits:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The page is 100% compatible with the document outline algorithm, future proofing it in-case the algorithm is ever implemented in a real browser.<\/li><li>The heading structure is completely logical.<\/li><li>Screen reader users navigating via headings can quickly jump to important information.<\/li><li>Screen reader users navigating via landmarks have lots of useful landmarks to move about the page.<\/li><li>Screen reader users are able to quickly understand what each section contains without having to read any of the content inside of them.<\/li><li>Content is grouped into semantic sections, so screen reader users do not get confused when leaving one section and entering another.<\/li><li>Search engines are able to better understand what information each section holds, which could potentially improve SEO.<\/li><li>Sighted users can take advantage of native browser features like Reader Mode.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-15\">What happens when you need <code>&lt;h7&gt;<\/code>?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">There is one more sticking point when it comes to labeling sectioning elements that I haven\u2019t addressed yet. Let\u2019s say you have somehow managed to use up all six native heading levels and are now stuck needing one more. What do you do?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You could use the <code>aria-labelledby<\/code> technique if it is just for the sake of labeling a section. Let\u2019s say that you really want this heading to appear in the heading structure though, or maybe you just want to avoid using IDs as much as possible. Whatever the reason, you need an <code>&lt;h7&gt;<\/code> element but <code>&lt;h7&gt;<\/code> doesn\u2019t exist.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is when the <code>aria-level<\/code> attribute comes to the rescue. The <code>aria-level<\/code> attribute will define what the heading level should be for elements that have <code>role=\"heading\"<\/code> applied to them. This is how the <a href=\"https:\/\/www.w3.org\/TR\/WCAG20-TECHS\/ARIA12.html#ARIA12-ex2\" rel=\"noopener\">W3C recommend<\/a> creating a <code>&lt;h7&gt;<\/code> element:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div role=\"heading\" aria-level=\"7\">This is a valid heading level 7 element&lt;\/div>\n<\/code><\/pre>\n\n\n\n<p class=\"explanation wp-block-paragraph\">Not all screen readers support this syntax. I know that JAWS <a href=\"https:\/\/stackoverflow.com\/a\/56067431\/1611058\" rel=\"noopener\">treats these like <code>&lt;h2&gt;<\/code> elements<\/a> rather than <code>&lt;h7&gt;<\/code> elements. If you know of any screen readers that this doesn\u2019t work in, please report the bug to the screen reader developer and also leave a comment down below.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When I need to reach for an <code>&lt;h7&gt;<\/code>, I\u2019ll often use the implied <code>role=\"heading\"<\/code> from an <code>&lt;h6&gt;<\/code> element instead. The <code>aria-level<\/code> attribute will override the implicit \u201c6\u201d level of the <code>&lt;h6&gt;<\/code> element. This <a href=\"https:\/\/www.w3.org\/TR\/using-aria\/#secondrule\" rel=\"noopener\">isn\u2019t exactly endorsed<\/a> by the W3C though. It is cleaner and will allow the heading to still appear in document outline and heading structure testing tools (though they will typically appear as <code>&lt;h6&gt;<\/code> or <code>&lt;h2&gt;<\/code> level headings, not as <code>&lt;h7&gt;<\/code> level headings).<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;h6 aria-level=\"7\">This is also a valid heading level 7 element&lt;\/h6>\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">By using <code>aria-level<\/code>, you now have access to an infinite number of heading levels!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-16\">Does your site have a good structure?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now that you know how to do a proper HTML structure, are you able to apply what you have learned to your website?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I found a pretty good browser extension called \u201cHeadings Map\u201d that is available for both <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/headingsmap\/flbjommegcjonpdmenkdiocclhjacmbi?utm_source=chrome-ntp-icon\" rel=\"noopener\">Chrome<\/a> and <a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/headingsmap\/\" rel=\"noopener\">Firefox<\/a>. This extension will allow you to easily see both a flat heading structure representation of your site (i.e. how all browsers currently read the heading structure) and what the document structure looks like in a browser that supports the document outline algorithm (i.e. how a theoretical future browser that supports the outline algorithm would present the site structure). The HTML5 Outline view needs to be enabled in the settings menu first. This is to prevent users from being fooled into thinking that they are able to use the outline algorithm in production sites.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/sectioning-05.png?ssl=1\" alt=\"The Headings Map extension showing the flat heading structure result on the left and the result of the Document Outline Algorithm on the right.\"\/><\/figure>\n\n\n\n<p class=\"explanation wp-block-paragraph\">Headings Map does not currently support the <code>aria-label<\/code> and <code>aria-labelledby<\/code> attributes on sectioning elements in the HTML5 outline tab. I have been talking with the developer and he is working on fixing this issue. If you know of a good document outline testing tool that already takes <code>aria-label<\/code> and <code>aria-labelledby<\/code> into account, please share a link to it in the comments.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once you have a good document structure testing tool, check that both the heading structure and the document outline display a logical order with no missing headings or missing section labels anywhere.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-17\">Download and use a screen reader<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The best way to test the implied semantics that you get from using correct HTML is to download an actual screen reader and try navigating your site with it. <a href=\"https:\/\/www.nvaccess.org\/download\/\" rel=\"noopener\">NVDA<\/a> is one of the <a href=\"https:\/\/webaim.org\/projects\/screenreadersurvey7\/#primary\" rel=\"noopener\">most used screen readers<\/a> used by real screen reader users. It\u2019s also <strong>free!<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Be aware that the default settings for NVDA are optimized for usage by blind users. These default settings can drive sighted users insane. To enjoy your time using NVDA, perform the following steps (steps are based on a Windows set up, I don\u2019t have a Mac):<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Download <a href=\"https:\/\/www.nvaccess.org\/download\/\" rel=\"noopener\">NVDA<\/a> and install it<\/li><li>Create a shortcut to NVDA in your taskbar (You will be opening and closing it regularly while testing)<\/li><li>Open NVDA from the taskbar<\/li><li>Find NVDA in your system tray (see below)<\/li><li>Right-click the tray icon &gt; \u201cpreferences\u201d &gt; \u201csettings\u201d<\/li><li>Select \u201cmouse\u201d in the left panel<\/li><li>Deselect \u201cEnable mouse tracking\u201d (You can now move your mouse without NVDA screaming at you)<\/li><li>Press \u201cOK\u201d<\/li><li>Right-click the tray icon &gt; \u201cTools\u201d &gt; \u201cSpeech Viewer\u201d (You can now see a log of everything NVDA says, don\u2019t rely purely on this when testing though)<\/li><li>In the Speech Viewer, check the \u201cShow Speech Viewer on Startup\u201d checkbox (It will open the Speech Viewer when you open NVDA)<\/li><li>Familiarize yourself with some of the keyboard controls<\/li><li>To close NVDA, Right-click the tray icon &gt; \u201cExit\u201d &gt; \u201cOK\u201d<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"560\" height=\"239\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/finding-NVDA.png?resize=560%2C239&#038;ssl=1\" alt=\"\" class=\"wp-image-307140\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/finding-NVDA.png?w=560&amp;ssl=1 560w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/finding-NVDA.png?resize=300%2C128&amp;ssl=1 300w\" sizes=\"auto, (min-width: 735px) 864px, 96vw\" \/><figcaption>Location of NVDA on Windows<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">NVDA currently doesn\u2019t support <code>&lt;article&gt;<\/code> and <code>&lt;section&gt;<\/code> elements. There is <a href=\"https:\/\/github.com\/nvaccess\/nvda\/issues\/9227\" rel=\"noopener\">an issue on GitHub<\/a> for supporting <code>&lt;article&gt;<\/code> elements. When I began writing this article <code>&lt;section&gt;<\/code> elements were already supported. Support for <code>&lt;section&gt;<\/code> seems to have dropped for some reason. This means NVDA should be fixed. It doesn\u2019t mean you should stop using the correct semantics in your HTML.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Build your website with the document outline in mind then test the semantics with Headings Map and NVDA (or another screen reader). If you do, you will make your screen reader users <em>very<\/em> happy. You might even make the search engines happier too. &#x1f60a;<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Special thanks to Kevin Galvin (a principal consultant at <a href=\"http:\/\/www.me2accessibility.com.au\/\" rel=\"noopener\">me 2 accessibility<\/a>) for advice around the usability issues of using a visually hidden <code>&lt;h1&gt;<\/code> element at the top of the page and suggesting <code>aria-label<\/code> as an alternative to using visually hidden headings.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The sectioning elements in HTML5 are &lt;nav&gt;, &lt;aside&gt;, &lt;article&gt;, and &lt;section&gt;. &lt;body&gt; is also kind of a sectioning element since [&hellip;]<\/p>\n","protected":false},"author":250795,"featured_media":291691,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[4],"tags":[466,1163,1664,731],"class_list":["post-289070","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-accessibility","tag-document-outline","tag-screen-readers","tag-semantics"],"acf":{"show_toc":"No"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/rectangle-pattern.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":252092,"url":"https:\/\/css-tricks.com\/document-outline-dilemma\/","url_meta":{"origin":289070,"position":0},"title":"The Document Outline Dilemma","author":"Amelia Bellamy-Royds","date":"March 7, 2017","format":false,"excerpt":"For the past few weeks there has been lots of talk about HTML headings in web standards circles. Perhaps you've seen some of the blog posts, tweets, and GitHub issue threads. Headings have been part of HTML since the very first websites at CERN, so it might be surprising to\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/03\/h.png?fit=800%2C500&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/03\/h.png?fit=800%2C500&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/03\/h.png?fit=800%2C500&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/03\/h.png?fit=800%2C500&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":302002,"url":"https:\/\/css-tricks.com\/sticky-table-of-contents-with-scrolling-active-states\/","url_meta":{"origin":289070,"position":1},"title":"Sticky Table of Contents with Scrolling Active States","author":"Chris Coyier","date":"January 30, 2020","format":false,"excerpt":"Say you have a two-column layout: a main column with content and a sidebar. Say it has a lot of content, with sections that requires scrolling. The sidebar column that is largely empty, such that you can safely put a position: sticky; table of contents over there for all that\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/scroll-position.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/scroll-position.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/scroll-position.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/scroll-position.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/scroll-position.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":17694,"url":"https:\/\/css-tricks.com\/css-style-guides\/","url_meta":{"origin":289070,"position":2},"title":"CSS Style Guides","author":"Chris Coyier","date":"August 10, 2012","format":false,"excerpt":"As we wrap up our recent poll on ordering CSS properties, it brings up the larger issue of CSS style guides. Ordering properties is just one choice you have to make that makes up a complete styling strategy. Naming is a part of it. Sectioning is a part of it.\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/08\/smacss.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/08\/smacss.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/08\/smacss.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/08\/smacss.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":273952,"url":"https:\/\/css-tricks.com\/sticky-smooth-active-nav\/","url_meta":{"origin":289070,"position":3},"title":"Sticky, Smooth, Active Nav","author":"Chris Coyier","date":"August 7, 2018","format":false,"excerpt":"Just like the title says! Here's a sidebar navigation bar that... Uses sticky positioning. It stays on the screen when it can, but won't overlap the header, footer, or ever make any of it's links inaccessible. Scrolls smoothly to the sections you click to. Activates the current nav based on\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/smooth-scroll-nav.gif?fit=800%2C400&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/smooth-scroll-nav.gif?fit=800%2C400&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/smooth-scroll-nav.gif?fit=800%2C400&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/smooth-scroll-nav.gif?fit=800%2C400&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":150992,"url":"https:\/\/css-tricks.com\/targetting-menu-elements-submenus-navigation-bar\/","url_meta":{"origin":289070,"position":4},"title":"Targeting Menu Elements with Submenus in a Navigation Bar","author":"Ray Messina","date":"September 23, 2013","format":false,"excerpt":"The following is a guest post by Ray Messina. Ray was interested in sharing this technique as a way to pay forward things he's learned from this site in the past, which is awesome. You might be aware of the jQuery .has method, which allows you to select an element\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":337295,"url":"https:\/\/css-tricks.com\/creating-a-smart-navbar-with-vanilla-javascript\/","url_meta":{"origin":289070,"position":5},"title":"Creating a Smart Navbar With Vanilla JavaScript","author":"Jemima Abu","date":"April 5, 2021","format":false,"excerpt":"Sticky, or fixed, navigation is a popular design choice because it gives users persistent access to navigate the site. On the other hand, it takes up space on the page and sometimes covers content is a way that\u2019s less than appealing. A possible solution? Smart navigation. Let\u2019s define \u201csmart navigation\u201d\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/smart-nav.gif?fit=1000%2C500&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/smart-nav.gif?fit=1000%2C500&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/smart-nav.gif?fit=1000%2C500&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/smart-nav.gif?fit=1000%2C500&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/289070","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/250795"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=289070"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/289070\/revisions"}],"predecessor-version":[{"id":317413,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/289070\/revisions\/317413"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/291691"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=289070"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=289070"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=289070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}