Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 0 down vote favorite
1

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.

share|improve this question
1  
What are you confused about? This question is way to vague. – DA01 Oct 28 '12 at 1:50

closed as off topic by DA01, Yisela♦, Johannes, Ken - Abdias Software, Scott Nov 24 '12 at 19:46

Questions on Graphic Design Stack Exchange are expected to relate to graphic design within the scope defined in the FAQ. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about closed questions here.

3 Answers

up vote 2 down vote accepted

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!

share|improve this answer
Thanks Grant! You have the most reliable comment about H Tags.. Very helpful..Thanks! – Rupert Jamison Oct 30 '12 at 4:17
up vote 3 down vote

From http://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.

share|improve this answer
3  
There is sometimes discussion if more than one H1 tag should be used per page. Apart from that, I agree, there isn't much to it. – Marc Edwards Oct 27 '12 at 13:04
up vote 1 down vote

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.

share|improve this answer
1  
"Of course this is only of concern for SEO" SEO is a side issue. The main priority is that it be an accessible, well structured document. – DA01 Oct 28 '12 at 20:40
1  
All the more pertinent in using header tags properly. – Geoff Hogg Oct 29 '12 at 0:11
So, it needs that the H1 tag will no be use repeatedly on each page of your website right? – Rupert Jamison Oct 30 '12 at 4:18

Not the answer you're looking for? Browse other questions tagged or ask your own question.