--- title: 'The correct semantic HTML for adding subtitles to h1 tags' date: 2022-07-05 excerpt: 'This is the right format to use if you want to add a subtitle below an h1 tag on your html pages. Semantic HTML makes your site more accessible and better for SEO, since it is easier for search engines to process.' tags: [react, html, seo, tutorial] canonical: https://mikebifulco.com/posts/semantic-html-heading-subtitle --- # The correct semantic HTML for adding subtitles to h1 tags ## Semantic HTML makes your sites better Semantic HTML is important because it helps improve the accessibility of a web page and makes the code more readable. Semantic elements are those that clearly describe their meaning in a way that is easy for both humans and machines to understand. Search engines can more easily parse and understand semantic HTML, [which can help improve your website's SEO](https://developers.google.com/style/semantic-tagging). Semantic HTML uses tags to describe the meaning of content on a page, rather than just its presentation. This can help search engines better understand the content of a page and index it appropriately. ### Using h2 as a subtitle for an h1 is incorrect According to the [html spec](https://html.spec.whatwg.org/multipage/dom.html#heading-content-2), `h1` through `h6` tags are meant to indicate the structure of a document. In other words, each page should have at most 1 `

` tag, and `

` elements should be *sub-sections* of that `h1` - not additional descriptions for it. This [warning from the HTML spec](https://html.spec.whatwg.org/multipage/dom.html#sectioning-content) does a great job of explaining it: > For example, the following snippet, intended to represent the heading of a corporate site, is non-conforming because the second line is not intended to be a heading of a subsection, but merely a subheading or subtitle (a subordinate heading for the same section). > > ```html > >

ACME Corporation

>

The leaders in arbitrary fast delivery since 1920

> ... > > ``` (07/05/2022) As of the time of this writing, whatwg goes on to recommend use of `hgroup` in its solution. [According to MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup#usage_notes), hgroup should not be used, as it is not supported by assistive technologies needed for accesible reading of HTML sites. ## Use this code to add subtitles to headings The correct semantic structure of HTML for a heading with a subtitle is straightforward - nest your `

`, etc with in a `
` tag, and include a `

` tag with an appropriate class name as a sibling to that `h1`: ```html

How to bootstrap a product as a solo founder

Important lessongs learned from building 10 products on my own in 2 years

``` For more details on this, check out [MDN docs on the header tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header), and their [semantics section](https://developer.mozilla.org/en-US/docs/Glossary/Semantics). ### 🚨 UPDATE: I was wrong! 🚨 The first version of this article was wrong! I previously recommended using the `
` tag as per the whatwg spec, but I was corrected by [@AnalyticsEqv](https://twitter.com/AnalyticsEqv) on twitter: MDN specifically recommends against \
because assistive technologies don't support it. β€” EQV Analytics πŸ‡ΊπŸ‡¦ (@AnalyticsEqv) July 5, 2022 Thanks for the correction! I definitely get things wrong sometimes, and I'm always happy to correct myself when appropriate. ## Did you find this helpful? You might also like these other articles I've written: - [How to run dependabot locally on your projects](https://mikebifulco.com/posts/run-dependabot-locally) - [No Floating Promises: an eslint rule to prevent async code errors](https://mikebifulco.com/posts/eslint-no-floating-promises) - [JavaScript tips: nullish coalescing](https://mikebifulco.com/posts/nullish-coalescing-javascript) If you want to hear more from me, consider subscribing to my newsletter πŸ‘‡πŸΌ ## More from mikebifulco.com - [SEO tools I used to grow my sites to 20k+ visitors/month](https://mikebifulco.com/posts/seo-tools-for-new-web-projects) - [Add custom fonts to Next.js sites with Tailwind using next/font](https://mikebifulco.com/posts/custom-fonts-with-next-font-and-tailwind) - [Growth hack: Publish newsletters to your Next.js site with ConvertKit API](https://mikebifulco.com/posts/publish-your-newsletter-with-convertkit-api-next-js) --- Written by Mike Bifulco. Originally published at https://mikebifulco.com/posts/semantic-html-heading-subtitle