HTML Headings: Not Just "Big, Bigger, Biggest"

#a11y #html #webdev

A common error I see most junior web developers (and lots of non-junior folks!) make is misusing heading tags. I recently reviewed some code for a friend who's diving into front end development at a bootcamp, and reminded them to respect semantic rules for heading tags, mentioning that it's important for accessibility reasons.

Their response was super encouraging: "I didn't realize there were semantic reasons [for heading tags] outside of like -- being big bigger biggest! So that's pretty cool."

So wait, what are headings actually for then, if not to make some text bigger than others? Answer: structure and semantics! Semantic HTML elements, like <form>, <table>, and <h1> clearly define their contents for both the browser and assistive technologies like screen readers. These elements have purposes that aren't just visual, although it's easy to assume that some elements (particularly heading tags) have purely visual purposes based on default browser styling.

So what's the purpose of heading tags?

Heading tags provide a structured hierarchy for the page, like an outline. A first-level heading tag (<h1>) is the most important, and describes the entire page. It should usually be pretty similar to the <title> attribute for the page. <h2>tags describe large sections of content, with <h3> tags describing sub-sections, <h4> tags describing sub-sub-sections, etc. Each page needs to have exactly one <h1>. You don't have to use the rest of the heading elements, but you can't skip any and they can't be out of order. For example, if you use an <h3> element, you have to have an <h2> somewhere above it.

But what do I do if I want a bigger heading?

It can be tempting to use whatever heading tag corresponds to the size of text you want, but remember that heading tags aren't about text size, that's what font-size in CSS is for. Front end languages follow the separation of concerns principle. That is, each part of the code has a distinct purpose. In front end development, HTML is about structure and content, CSS is about presentation, and JS is about interaction. This means that our semantic HTML elements aren't about presentation, since that's the job of our CSS. If we want heading tags to look a certain way, we use CSS to achieve it.

What does this have to do with accessibility?

People who use assistive technology, such as screen readers, use heading tags to navigate and quickly jump to areas of a page. This is similar to how sighted users will visually skim a page via headings and other text. Headings are an integral part of web accessibility, and are discussed in the Web Content Accessibility Guidelines (WCAG) under 1.3.1: Info and Relationships and 2.4.6: Headings and Labels.

Learn more: