Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Multiple H1/H2/H3 etc tags 3

Status
Not open for further replies.

1DMF

Programmer
Jan 18, 2005
8,795
GB
I'm curious for your opinions on the validity and semanticness of using multiple h1 tags on a single page and also then multiple sub heading tags h2/h3 etc.

apparently HTML5 has new section tags and you can have a h1 tag in each section making multipe h1 tags on a page.

Is that semantic? and how does that affect accessibility with screen readers etc.

I have always beleive that a page should only have one h1 tag but you can have multiple h2/3/4/5/6 tags, it's relevant to the content and if it is a heading it goes in a heading tag, the number tag you use is relevant to how important the content/heading is.

With that logic, then would you say multiple h1 tags is fine if you have multiple headings on a page that deserve that importance.

or is it even wrong to have multiple h2/3/4/5/6 tags, but that could mean you run out of tags for your headings if only one of each per page is semantically allowed?

All input is appreciated.


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts
 
I generally go with the rule of one h1 tag that is relevant to the page, and multiple h2 tags for each "section" that is relevant to the page. Each "section" may or may not have further h3/4/5/6 if necessary.

Obviously it depends on the content in your page, but that's probably as close to the "rules" that I follow as I can get.

Mark,

Darlington Web Design[tab]|[tab]Experts, Information, Ideas & Knowledge[tab]|[tab]ASP.NET Tips & Tricks
 
This is more of a question of layout style rathe than any rigid HTML rule.

Generaly pages only have 1 H1 tag, but this is because it is what looks right & it is logical to use H tags in order of importance.

there is no reason why a page could not have 0 h1 tags with h2 tags forming the main headers or even multiple h1 tags.

It is good for to follow guidlines where possible but it is also good to know when you can bend or break them.
 
So you have the same thinking as me Mark.

If you ever use HTML5 for markup , will you change that logic for the section tags and use multiple h1 tags?

IPGuru ->
It is good for to follow guidlines where possible but it is also good to know when you can bend or break them.

I know there is a saying "rules are meant to be broken", but I am specifically looking for a rule abiding , semantic answer.

You need to know the rule, before you can make a judgment as to whether to break it or not.

So what's the rule?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts
 
I will only ever use 1 H1 element on a page, and I will always try and have 1. Anything else goes as long as I don't skip levels, e.g. I wouldn't go from H1 -> H2 -> H4 without having an H3 if I can avoid it.

I won't be changing this behaviour just because the new spec says it's OK to, as to me it still makes no sense to have anything other than a single H1.

Dan





Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Snippets & Info:
The Out Atheism Campaign
 
Hi

( If somebody missed reading the specification, the subject of this discussion is HTML5 | The elements of HTML | Sections | Headings and sections. )

As far as I understood, the new section-based heading hierarchy is an alternative available in case someone needs it.

For example you have to include a third-party forum in your site. The forum engine was developed primarily for standalone use, so it already uses headings [tt]h1[/tt]..[tt]h6[/tt]. To have a semantically correct HTML 4/XHTML you should rewrite all headings generated by the third-party forum. But in HTML 5 you just put all the forum content in a separate section. That way your own outer [tt]h1[/tt] will still be one level higher than the [tt]h1[/tt] inside the forum's section.

As I understand, the section-based headings were introduced to solve situations like the above, not to replace the traditional heading hierarchies.


Feherke.
 
Cheers Guys,

There is still the debate as to how having multiple H1's under HTML5 might affect SEO and search engines.

What effect does having multiple h1 tags have for accessibility?

it's not like the screen reader shouts heading tags in varying volume depending on the H# number does it?



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts
 
Well, if you look at what the spec has to say on heading tags
A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones.

[...]

Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped.
There's nothing there about not repeating H1s, and only that odd "some people" note about missing levels (who cares what "some people" think, you're the spec, is it right or not?!)

Personally, I reckon there's usually only one "most important" heading on each page - the page title - so only 1 <h1>. I wouldn't rule out the possibility of multiples, but wouldn't expect to do it often.

I don't do gaps in the hierarchy much either, though I think there's a case for using <h6> for sub-heading information - like the list of categories, poster and post date information that you get below a post's title in a blog.



-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top