HTML 标题是否有长度限制？ (h1, h2 等)

Question

Is it valid HTML5 to have a long sentence as a h2 ?

For example:

<hgroup>
  <h1>
    Food & Drink Products
  </h1>
  <h2>
    There are 5000 food products near you in 100 categories from brands like FoodX, DrinkY, and FoodStuffsZ.
  </h2>
</hgroup>

Or would a p tag more appropriate?

I'm asking because the importance of this text is that of a h2 , but it reads like a paragraph and I could not find an example like this or any mention of heading length on the HTML spec .

Answer 1

You should mark up your text based on what is appropriate for the content you are showing , according to most copy-writing and SEO guidelines.

There is no limit on heading length from a HTML perspective , but you need to consider it from other, arguably more important, perspectives:

• Readability & UX : Headings that are too long can be difficult to read, and could therefore affect usability and users experience. It can also affect the overall appearance of the page and make it look unbalanced or as if you are trying to over-optimise the page which can give a poor impression to users.
• Effectiveness : The shorter and snappier a heading is (without losing meaning of course), the easier it is for users to take it in quickly and the better it gets the message across. That's why slogans and taglines work in marketing!
• SEO : We know that Google pays most attention to the first 60-70 characters in a page title which is generally the same as the h1 . I don't know of any data about how they consider h2 or any other subheadings, but their aim is to appraise pages in the same way humans do. So if they think that overly-long headings are not "user-friendly" then they might not rate it, or worse, penalise the page for attempting to "game" the SEO system.

In summary : As I mentioned earlier, the advice for usability, SEO and general copywriting is to do what makes sense for your own content. So if it makes sense then do it, but in most cases there is no need for long heading and it could a sign that the text needs improvement, and a shorter version would probably work better:)

In the example in your question , I wouldn't consider that text a heading - it sounds more like a paragraph. A heading would be something like " 5000 Food Products Near You in 100 Categories ", with the next text being info about the products and categories.

Answer 2

If you want to be precise, use h1 or h2 for headlines and p for paragraphs. Long headlines are fine, there's no rule saying headlines shouldn't be long.

Also, truth of the matter is, it doesn't matter so much. If you choose p over h2 , as long as it works well for you, that's fine.

There are far more important things, such as writing a responsive website, clean code, etc.

Answer 3

That definitely depends on what you want. If h2 suffices for you use that. I myself would prefer to use <p> for that and then chance css for my liking.

Answer 4

There are no problems to use headers as a paragraph, but the question is for what? If you just want to highlight the text, use a p with a class, it is much better