: How to use H1, H2 etc. tags properly? I'm confused on how to use the header tags properly so, I need help for this. Since, it is a very important part of web development.

@Pope1402555

The tags h1 through h6 are used to create a sort of document outline, marking major sections.

h1 is usually reserved for the page title, while h2 marks sub-sections and h3-h6 further define sub-sub-sections and so on. This defines a content hierarchy within the page. You do not 'need' to use all the h* elements within a page, and in fact h5 and h6 should seldom be needed; regular use of these two elements suggest the content hierarchy is getting deep, and should perhaps be split into multiple pages.

It's often argued that it's improper to have multiple h1 elements within a page. This has been debunked by Google engineer Matt Cutts.

HTML5 changed things a bit with the outlining algorithm. When writing for HTML5, h1 can be used multiple times within a page to define the document outline, when the h1 elements are first within certain sectioning elements (e.g. article, section). In a sense h2-h6 wouldn't be needed to mark page sections, except within the same section, to define the section heading hierarchy as indicated above.

There is a useful extension for Chrome, HTML5 Outliner, which when clicked shows the heading structure of an HTML5 page. A useful tool!

Vote Up Vote Down

@Gretchen549

Depends what you are using the web page for, but I've had to go fix a web site because it had several <h1> tags, and or had a <h2> under a <h1>.

I believe some SEO software had been run against the websites and they jumped on the ordering of headers as dragging down the score.

It makes sense to have a tree structure. With h1's at the top, h2's below etc.

Of course this is only of concern for SEO, but as a programmer it makes it more ordered, of course a designer might have a different view.

Vote Up Vote Down

@Rivera951

From www.w3schools.com/tags/tag_hn.asp

Definition and Usage

The < h1 > to < h6 > tags are used to define HTML headings.

< h1 > defines the most important heading. < h6 > defines the least
important heading.


I am unsure what more there is to it.

Vote Up Vote Down