What are there guides for using Heading tags?

Question

Instantaneous I'm working on developing a portfolio site. Hereby I strive to be as accurate as possible markup. I'm currently stuck in the use of heading tags. Are there any guidelines on the use of h1, h2, h3 tags etc? I find it difficult to determine what is and what is now an h1 h3 is an example.

I like to hear of your findings.

Answer 1

According to w3c:

The header element typically contains the headings for a section (an h1-h6 element or hgroup element), along with content such as introductory material or navigational aids for the section.

So the header can contain h1, etc. But not every h1 should be wrapped in a header. Only if it is related to the section.

The header tag is just semantics. It helps browsers (and developers) to understand your page better.

Answer 2

In fact it's always up to you how to use headers and how many of them you want to use. You should always test your site without CSS enabled and you will see if your markup is correct and articles titles / page titles/ block titles are visible enough

You can look also at some resources

• http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824
• http://www.hobo-web.co.uk/headers/
• http://accessibility.psu.edu/headingshtml

Answer 3

Another great resource that explains heading tags with reference to SEO: https://www.thiscodeworks.com/html-heading-tags-less-than-h1-greater-than-to-less-than-h6-greater-than-html-basics-htmltags-seo/5e19e63f2f9933a537bcc72d

"Best practices for SEO and accessibility purposes when using heading tags is:

Use once or twice with the title of the website of page

Use for section headers inside the page. Good to have one every 200-400 words. But totally depends on the content and layout.

- Use as many as you want to further subsection and highlight key points in the text."