h1 element should only be allowed once

by **JAB Creations** » Thu Jan 07, 2010 2:23 pm

A well designed website should emulate a newspaper, after all you wouldn't see the big header, 'Won War!' and then half way down the page in the same font-size, 'Women shaves cat'. The h1 element should only be allowed to be used on the page once.

by **valkyr** » Thu Jan 07, 2010 3:38 pm

This is what we have CSS for.

It allows each section of a document, as well as the document as a whole, to have independently structured levels of headings in their own context, which can then be styled whatever way you want.

It's up to you how many sections you choose to split the document into though, meaning you could very well end up with just a single h1 acting as an overall page header.

by **JAB Creations** » Thu Jan 07, 2010 4:25 pm

I was not talking about styling.

by **valkyr** » Fri Jan 08, 2010 4:38 pm

JAB Creations wrote:after all you wouldn't see the big header, 'Won War!' and then half way down the page in the same font-size, 'Women shaves cat'.

by **JAB Creations** » Fri Jan 08, 2010 5:04 pm

I'm speaking of the context of what the header represents which is emphasized by the font-size though not dictated by it.

by **zcorpan** » Fri Jan 08, 2010 10:08 pm

h1 is not necessarily the top-level heading in HTML5. If you're using the sectioning elements (section, article, nav, aside), then you can use h1 for all your headings if you want.

The following are equivalent:

Code: Select all: <h1>a</h1> <h2>b</h2> <h3>c</h3>

Code: Select all: <h1>a</h1> <section> <h2>b</h2> <section> <h3>c</h3> </section> </section>

Code: Select all: <h1>a</h1> <section> <h1>b</h1> <section> <h1>c</h1> </section> </section>

by **JAB Creations** » Mon Jan 11, 2010 5:57 pm

That is what the h2 element should be used for. The h1 element should encompass what the entire page is about just like the title.

by **zcorpan** » Tue Jan 12, 2010 9:44 am

by **JAB Creations** » Tue Jan 12, 2010 9:07 pm

'Won War!' and 'Woman Shaves Cat', you tell me. :wink:

by **lyosha** » Wed Jan 13, 2010 12:35 am

In HTML 5, all the headings are the same, just like in XHTML2 everything was just <h>. The browser is supposed to understand this (XHTML 2 syntax):

Code: Select all: <body> <h>Heading one</h> <article> <h>Heading two</h> <section> <h>Heading three</h> <p>blablabla</p> </section> </article> </body>

body > h
is not equivalent to:
body > article > section > h

In fact, you could write it like this and an HTML 5 browser will render it correctly:

Code: Select all: <body> <h6>Heading one</h6> <article> <h1>Heading two</h1> <section> <h3>Heading three</h3> <p>blablabla</p> </section> </article> </body>

That is a completely correct outline in HTML 5, it's just stupidly written.

by **JAB Creations** » Wed Jan 13, 2010 1:16 am

The problem with removing numbers from the headers is that a lot of people aren't correctly using headers in the first place.

So while a search engine or browser may interpret the first h element as h1 an inexperienced (or simply incompetent) web author may put h (as h1) in the middle or bottom of the page with other headers appearing before the main header (in top-to-bottom fashion) and it will be up to search engines to determine the correct context of these headers. Additionally it becomes obnoxious to apply CSS...

h.h1 {}
h.h2 {}
h.h3 {}
/* etc */

by **lyosha** » Wed Jan 13, 2010 3:09 am

The CSS may be a problem, I don't know what the solution to that is, but doing top to bottom shouldn't be a problem if you do this:

Code: Select all: <body> <article> <section> <p>blablabla</p> <h3>heading three</h3> </section> <h2>heading two</h2> </article> <h1>heading one</h1> </body>

I believe one way to handle the CSS is to continue using the h1-h6 along with the nesting as they are now. After, it is your choice on your website whether you want to use h1-h6 or only h1 all the way.

by **JAB Creations** » Wed Jan 13, 2010 3:36 am

That's not top-to-bottom.

by **rekk1986** » Wed Jan 13, 2010 3:46 am

JAB Creations wrote:I was not talking about styling.

if you don't mention about Styling, what are you talking about? Font size is style . Please explain more to me . Thanks

by **lyosha** » Wed Jan 13, 2010 4:23 am

JAB Creations wrote:That's not top-to-bottom.

Sorry, I misread your post the first time. Why do we need to make HTML idiot-proof though? Incompetent web authors can make messes with HTML 4 just as well as with HTML 5. That said, the HTML 5 heading structure is actually a bit more idiot-proof than HTML 4's h1-h6.

The only real problem you've mentioned so far is changing the style for nested headings:

body h1
body article h1
body article section h1
body section article section h1
...

way too cumbersome. There has to be a better way than that to style headings.

h1 element should only be allowed once

h1 element should only be allowed once

Re: h1 element should only be allowed once

Who is online

Who is online