> [!tldr] TL;DR
> Avoid skipping heading levels for visual appearance. It *could be* justifiable in some cases, such as a site-level sidebar.

HTML has six levels of [heading elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements), `<h1>` to `<h6>`. They are used by screen readers—and in some cases search engine bots—to indicate a document's semantic structure.

Skipping heading levels mean using them not in order, usually because we want a visually smaller font size.

The [WAI guide](https://www.w3.org/WAI/tutorials/page-structure/headings/) advises against skipping heading levels, with an explicit *exception for fixed page sections*:

> In fixed sections of the page, for example in sidebars, the heading ranks _should not_ change depending on the ranks in the content area. In those cases, consistency across pages is more important.

Example:

```html
<main>
  <h1>Page heading</h1>
  
  <h2>Section heading</h2>
  <h3>Subsection heading</h3>
  <h3>Another subsection heading</h3>
  <h4>Subsubsection heading</h4>
  
</main>
<nav>
  
  <h2>Sidebar heading</h2>
  
</nav>
```

With the same shell/layout template, another page may look like this:

```html
<main>
  <h1>Page heading</h1>
  
  
  
</main>
<nav>
  
  <h2>Sidebar heading</h2>
  
</nav>
```

In support of the exception above, [this article](https://accessible-digital-documents.com/blog/the-skipped-headings-myth/) argues that enforcing the "no skipped headings" rule for patterns like a site-level sidebar will cause "workarounds", eg. using caption instead of heading element in sidebars, that create worse accessibility issues.

> it is impossible to construct any kind of argument or provide any kind of evidence to show that they are always so

> a blanket ban will create accessibility problems that wouldn’t otherwise exist

Bear in mind that guidelines and tools may not be aware of this exception, eg. Google Lighthouse will show a warning to [use proper heading order](https://web.dev/heading-order/) regardless of usage context.

---

In: [[Web accessibility MOC]]

Skipping heading levels is bad for accessibility, except...

I wrote these notes to document my learning process and resources that Future Me—and maybe you?—may find helpful. Since I work primarily in the frontend, most of my notes are on those subjects or are written from that perspective. 

The grouping below is mainly for organisation (ie. skimming and discovery); I find these subjects to overlap and intertwine with each other more often than not IRL. Some links may be listed under multiple groups where relevant. 


## Start here

Essential notes:
- [[Core technologies of the web]]
- [[The value of semantic HTML]]

See notes on...
- [[Browsers network MOC|Browsers and network]]


## Frontend stuff

*Part of the web dev spectrum that predominantly deals with—or pertain to—user interfaces*

See notes on...
- [[CSS MOC|CSS]]
- [[Web browser API MOC|Web APIs]] a.k.a. Browser APIs
- [[JAMstack and serverless MOC|JAMstack and serverless]]
- [[Web frameworks MOC|Web frameworks]]


## Full <del>stuck</del>stack stuff

*The whole range of the web dev spectrum, from server to user*

See notes on...
- [[JavaScript MOC|JavaScript]]
- [[Web frameworks MOC|Web frameworks]]
- [[DB MOC|Databases]]
- [[CMS MOC|Content Management Systems (CMS)]]
- [[CI CD MOC|Continuous integration, Delivery, Deployment (CI/CD)]]
- Tooling — [[TypeScript MOC|TypeScript]]
- Building APIs — [[GraphQL MOC|GraphQL]]


## Best practices

*In the quest for building good web products*

See notes on...
- [[Web performance MOC|Performance]]
- [[Web Accessibility MOC|Accessibility]]
- Code quality, a.k.a. *"Get the computers to do repetitive/predictable grunt work for you"*
	- [[Testing MOC|Testing]]
	- [[Static analysis MOC|Static analysis]]
	- [[TypeScript MOC|TypeScript]] for static type checking


## Generic web/dev/open-source

*Skills and technologies that are useful for web development and a wider range of programming fields*

See notes on...
- [[Git Github MOC|Git and GitHub]]
- [[NPM packages MOC|Publishing NPM packages]]