h1 element should only be allowed once

by **JAB Creations** » Wed Jan 13, 2010 4:52 am

No, HTML5's header approach is less idiot-proof. An inexperienced web designer won't know each header's relative worth whereas with HTML4 / XHTML1 it's automatically implied. Styling isn't the issue I'm concerned with, context is. 'Won War' would never be put at the bottom of a page while 'Woman Shaves Cat' would never be put at the top.

rekk, the browser's default styling is relative to the weight of the header's context to the overall page as is it's numbering (1~6).

Consider the following from not only a styling point of view though also from a search engine's point of view.

<title>HTML5</title>
<h1>HTML5</h1>
<h2>Elements</h2>
<h3>a</h3>
<h4>Attributes</h4>
<h5>Values</h5>

<title>HTML5</title>
<h>HTML5</h>
<h>Elements</h>
<h>a</h>
<h>Attributes</h>
<h>Values</h>

While the hierarchy is correct for both in their vertical order a search engine would have to guess my second example is correct. Personally I'd rather not make the search engine guess so it would know that I know what I'm talking about.

Now consider an incompetent designer's possible implementation...
<title>War Won!</title>
<h5>Woman Shaves Cat</h5>
<h2>Buy Useless Crap!</h2>
<h1>War Won!</h1>

<title>War Won!</title>
<h>Woman Shaves Cat</h>
<h>Buy Useless Crap!</h>
<h>War Won!</h>

In my third example as a search engine I would see the designer is clearly incompetent and would at best making the page rank only better then pages that do not use any headers whatsoever.

In my fourth example a search engine could see that the page is likely about a war but since cats and useless crap appear before the main header it's probably not an important war.

Hierarchy is not only about including numbers though also the order of their appearance. Sure with CSS2 one can use positioning to visually reverse or over-complicate the appearance of headers however a search engine will always read the page's code from top to bottom.

Numbered headers clearly have the advantage and their proper implementation should be enforced less we lower our standards however that would reflect poorly upon our industry as a whole.

by **lyosha** » Thu Jan 14, 2010 12:51 am

I have seen a lot of misuse with h1-h6. HTML 5 isn't going to improve that OR make it worse; it'll only make it different. Those who screwed up h1-h6 will screw up sectioning and headers. Those who read the specs and did h1-h6 right, will read the specs and to sectioning and headings right.

HTML 4 is not idiot-proof. HTML 5 is not idiot-proof. The incompetent web developer is a moot point. In fact, HTML introduces a lot of new elements that incompetent web developers will screw up; let's remove them all!

Address the issue from your standpoint as the competent developer you might be. Your current argument is completely invalid.

by **JAB Creations** » Thu Jan 14, 2010 2:27 am

Lyosha, you picked the easier point I made to counter though did not address my search engine concerns.

by **zcorpan** » Thu Jan 14, 2010 9:20 am

Search engines can implement the outline algorithm to make sense of HTML5 headings.
http://gsnedders.html5.org/outliner/

by **Tae** » Tue Mar 02, 2010 5:04 pm

What about something like:

<section>
<h1></h1>
<h1></h1>
</section>

?

I was expect it is wrong, however, the validator (http://html5.validator.nu/) gives me no errors or warnings, and the outliner (http://gsnedders.html5.org/outliner/) gives me a structure alike:

<body>
<h1></h1>
<h1></h1>
</body>

Â¿Is that OK? Â¿Can a section have more than one <h1> and so grouping
related information?

by **JAB Creations** » Tue Mar 02, 2010 5:23 pm

Tae, my point is that a each page will have a main emphasis. If a page is about XHTML, CSS, and JavaScript then the page is not going to get in to the specifics of any particular language, hence the correct approach would be to have the title and h1 elements labeled as 'Web Design'.

If the page was only about CSS for example and it explained the differences between CSS levels 1, 2, and 3 then the main header and title would be 'CSS Levels Explained' while the secondary headers would be 'Level 1|2|3'.

Using two h1 elements is like trying to use two separate title elements. You can't take a single page and expect it to make sense if you cram two different topics on the same page. That might work with print (as it has two physical sides of a single piece of paper) however the web is not like that. Besides, in regards to SEO it's good to have content though to increase the chance that you'll be found in a search engine you'll want to keep each set of content on it's own dedicated page.

Disregarding all of these arguments and using a gray and undefined header element is actually a very poor idea. Just because designers (and developers outsourced to do design) don't want to bother making their pages with the correct context should not imply that we should weaken the standards. Standards exist to help communities refine the content of which is the context of that given standard.

by **Tae** » Tue Mar 02, 2010 6:27 pm

JAB Creations wrote:Using two h1 elements is like trying to use two separate title elements.

I agree with you, but as I understand the specification

Code: Select all: <section> <h1></h1> <section> <h1></h1> </section> </section>

I the same thing that:

Code: Select all: <h1></h1> <h2></h2>

so, in theory and practice, we don't have two h1 elements. Here is not important the code but the outline of the document.

You can't take a single page and expect it to make sense if you cram two different topics on the same page. That might work with print (as it has two physical sides of a single piece of paper) however the web is not like that. Besides, in regards to SEO it's good to have content though to increase the chance that you'll be found in a search engine you'll want to keep each set of content on it's own dedicated page.

I agree again, but I'm asking about two h1 elements into a section element, so the complete structure could be something like:

Code: Select all: <body> <h1></h1> <section> <h1></h1> <h1></h1> </section> </body>

The outline for this code is the same for

Code: Select all: <body> <h1></h1> <h2></h2> <h2></h2> </body>

I thought this might be related to your question, but now I think my question is about the real value of the section element. So far, the advantage I see is add style to a set of content, however it was no intended for that.

by **JAB Creations** » Tue Mar 02, 2010 6:40 pm

Remember, the header and title elements must relate to the content on the page. The heading levels (when declared properly) help clarify the context of of the content. Please re-read my last post with that in mind in regards to the content examples I wrote about.

As far as I am concerned more then one instance of an h1 element should strictly be considered abuse to artificially attempting to inflate emphasis on the page. This would be like trying to have the same page appear as the first result for two different titles, 'CSS' and 'HTML' which together are a subset of web design so the proper title (and thus h1) should be web design since it is inclusive to both topics.

by **Tae** » Tue Mar 02, 2010 7:11 pm

JAB Creations wrote:Remember, the header and title elements must relate to the content on the page.

Yeah, OK OK OK. I'm agree with you, one page, one title, one header. (This is now the way I use for structure pages, but do not dismiss cases where there may be more of one header.)

Code: Select all: <body> <h1>Header</h1> <section> <h1>Section</h1> </section> </body>

Does that, but using more code than:

Code: Select all: <body> <h1>Header</h1> <h2>Section I</h2> </body>

In both cases the result is the same: one page, one header.

by **JAB Creations** » Tue Mar 02, 2010 7:53 pm

This page's main topic is about 'Web Design, XHTML, CSS, and JavaScript' and is composed of ???

Code: Select all: <body> <h1>Web Design</h1> <section> <h1>XHTML</h1> </section> <section> <h1>CSS</h1> </section> <section> <h1>JavaScript</h1> </section> </body>

This page is about 'Web Design' which is composed of 'XHTML', 'CSS', and 'JavaScript'.

Code: Select all: <body> <h1>Web Design</h1> <section> <h2>XHTML</h2> </section> <section> <h2>CSS</h2> </section> <section> <h2>JavaScript</h2> </section> </body>

By allowing h1 to exist multiple times we could say, "<h1>XHTML</h1> is <h1>XML</h1> and <h1>XML</h1> is <h1>XHTML</h1>" which is false.

Code: Select all: <body> <h1>XML</h1> <section> <h1>XHTML</h1> </section> </body>

By forcing the h1 element to legally exist only once then we could say "<h2>XHTML</h2> is a subset of <h1>XML</h1>" which is true.

Code: Select all: <body> <h1>XML</h1> <section> <h2>XHTML</h2> </section> </body>

by **Tae** » Tue Mar 02, 2010 8:00 pm

All right, as I understand the specification the next page's main topic is about 'Web Design' and is composed of XHTML, CSS, and JavaScript:

Code: Select all: <body> <h1>Web Design</h1> <section> <h1>XHTML</h1> </section> <section> <h1>CSS</h1> </section> <section> <h1>JavaScript</h1> </section> </body>

This is how the outliner work... No? I'm wrong about the specification or you are proposing to modify it?

by **JAB Creations** » Tue Mar 02, 2010 9:01 pm

I'm proposing that the spec should force the h1 element to be unique like the title element.

By using all those values the correct interpretation leads to the incorrect conclusion that the whole topic is somehow called "Web Design XHTML CSS JavaScript". This means there is no parent/child relationship between Web Design and XHTML as the header level automatically implies they are of the same level within the hierarchy. Without header levels there is absolutely no level hierarchy and without the correct implication of header levels the hierarchy relations can not be correctly determined. One can not tell from having <h1>Web Design</h1> and <h1>XHTML</h1> that XHTML is only one of the three sub-topics of Web Design. You can put the elements in relation to other elements though that only implies a relation to those elements; it does not clarify the parent/child hierarchy relation between the main subject and it's components.

In human terms when you have a state of any kind (e.g. country, state, city) there will be one well defined leader (e.g. president, governor, mayor). Consider the following two pages and the context of the relations between the headers...

Code: Select all: <body> <h1>President</h1> <h1>Governor</h1> <h1>Mayor</h1> </body>

Code: Select all: <body> <h1>President</h1> <h2>Governor</h2> <h3>Mayor</h3> </body>

Semantically speaking we can not derive the hierarchy relations between the values in the first set because they all use the same level heading even though many can potentially (though not all and not automatically) tell that some positions have reduced areas of effect in regards to control.

With the second example the headers correctly imply the hierarchy relationship between the roles and we can automatically deduce that a mayor will likely answer to a governor and that a governor will answer to a president. Additionally since the h1 is restricted to a single use we can also deduce that there can only be a single president however there may be more then one governor.

by **granor** » Mon Feb 07, 2011 3:22 pm

Using h1 like title is nonsensical. why would we need 2 elements that do the same thing?

by **BlueBoden** » Wed Feb 09, 2011 5:03 am

It makes no sense to disallow multiple h1s, (a website is not a newspaper).

You have all sorts of elements on a website, including navigation sections. It can easily be argued that navigation sections ain't a part of the main article, and as such should be represented using another h1.

If however you used a h2 instead, then you would in fact be telling UA's: "This is a subsection to h1", which would be false for most websites.

The only reasons why some recommend not using multiple H1's, are mainly SEO related, and not specific to semantics. There are cases where it would be semantically incorrect to use multiple h1s, but that would be limited to the weird cases where the web designer has chosen to use the h1 element for the site logo, where a div would have been more appropriate.

by **JAB Creations** » Wed Feb 09, 2011 11:54 am

BlueBoden wrote:It can easily be argued that navigation sections ain't a part of the main article, and as such should be represented using another h1.

People do not read a webpage to read the navigation: h1 elements should not be used for navigation.

When was the last time you read a page with two very dominant though completely unrelated topics? That is when you would use two h1 elements and it would be completely invalid.

h1 element should only be allowed once

Who is online

Who is online