Search code examples
htmlsemantic-markuphtml-heading

Is there a max character/word limit for heading tags?


I understand that heading tags are for semantic purposes, and as long as you don't abuse their purpose, in theory, you shouldn't be penalized in the search engines... But how long is too long?

I've always felt like it was an unspoken rule that you shouldn't put an entire paragraph in a h* tag, even a h4-h6, but I've never really questioned if that's right or wrong. But what about a 15-20 word sentence? Where's the line? And if there isn't a definitive character/word limit, what limitations should I observe when picking a h* tag over something like p.subtitle?

I know I'm probably over-thinking this, but would love some feedback nonetheless.


Solution

  • What the HTML spec says

    The HTML specifications don’t define such a limit, neither for h1-h6 nor for any other element.

    The places where one would expect such a limit to be mentioned would be the element’s definition itself (The h1, h2, h3, h4, h5, and h6 elements) or the element’s content model (phrasing content). Specifically the definition of Text doesn’t mention any limit.

    In its section about parsing, the HTML 5.1 spec notes (bold emphasis mine):

    The algorithm described below places no limit on the depth of the DOM tree generated, or on the length of tag names, attribute names, attribute values, Text nodes, etc. While implementors are encouraged to avoid arbitrary limits, it is recognized that practical concerns will likely force user agents to impose nesting depth constraints.

    So user agents will typically have their own limits, but these would be very high.

    In practice

    I don’t think that it would make sense to discuss an informal limit. Headings should be as long as they have to be. Think about long titles of works like scientific papers or novels, e.g., this book has more than 50 words in its title:

    <h1 class="book-title">
        Noisy outlaws, unfriendly blobs, and some other things that 
        aren't as scary, maybe, depending on how you feel about lost 
        lands, stray cellphones, creatures from the sky, parents who 
        disappear in Peru, a man named Lars Farf, and one other story 
        we couldn't quite finish, so maybe you could help us out
    </h1>
    

    That said, it’s of course important not to misuse heading elements. If you have a subheading, subtitle, alternative title or tagline, don’t use a heading element. The common way to mark these cases up is using the header element, one heading element, and one or more p elements, e.g.:

    <header>
      <h1><!-- the actual heading --></h1>
      <p><!-- the subheading or similar --></p>
    </header>