html5 product page headings??

**Glasspoole** · May 17, 2011 00:47

Hi,

this html5 heading thing is driving me crazy

That is what i did first:

Code:

<body>
<div class="page"><!-- begin: .page -->
  <article>
    <header>
      <hgroup>
        <h1>company name</h1>
        <h2>product name</h2>
      </hgroup>
    </header>

    <p><strong>product name</strong><br />price / item number</p>
  
    <h1>product characteristics</h1>
    <p>Lorem ipsum</p>
    <h2>product details</h2>
    <p>Lorem ipsum</p>
    <h3>specifications</h3>
    <p>Lorem ipsum</p>
  
  </article>

</div><!-- end: .page -->
</body>

But if i look at it the page has no heading. The first h1 becomes the heading for the article - right?

What i learnd is to don't put divs and spans in there if they are not really needed and style what you can style directly. But looks like i need an extra div, just to put my site heading in there.
Second idea:

Code:

<body>
<div class="page"><!-- begin: .page -->
  <div class="right-column"><!-- begin: .right-column -->
    <header class="page-header">
      <hgroup>
        <h1>company name</h1>
        <h2>product name</h2>
      </hgroup>
    </header>  
  
  <article>
    <header>
      <h1>product name</h1>
      <p>price / item number</p>
    </header>
    
    <section>
    <h1>product characteristics</h1>
    <p>Lorem ipsum</p>
    </section>
    
    <section>
    <h1>product details</h1>
    <p>Lorem ipsum</p>
    </section>
    
    <section>
    <h1>specifications</h1>
    <p>Lorem ipsum</p>
    </section>
    
  </article>

  </div><!-- end: .right-column -->
</div><!-- end: .page -->
</body>

But there are a lot of other ways i can think of.
Giving the article an extra header or not...
Giving product characteristics, product details and specifications h1-h3...

From my point of view are product characteristics, product details and specifications all the same important. But like i said, normaly wie use as less as possible tags. But this html5 stuff is blowing up the source code. First i thought its better and i can get rid of some divs and giv them a meaning. But in view of the semantic and the headings???

I really dont know whats the right way.

**Stevie D** · May 17, 2011 04:24

You might need to expand on what you mean by "it has no heading" ... which bits that should be headings don't look like headings? Even better, can you give us a link to a demo page?

**Glasspoole** · May 17, 2011 09:28

The side itself has no heading - the body - just the article.
Here is the work in progress (you need to remove the spaces):
odenwaldsport .de/ 0ee/ produkte /squat-rack-multi-om100

I saw the lynda.com HTML5 First Look and that brought me to this point now that my site has no title with my first example. He also gives the nav a h1 and hides the heading.

And if you check it with HTML 5 Outliner than it says untitled section on nav's and aside's.

If i look at outliner, then my second example looks right.
What outliner not shows is the h2's in hgroup's.

**Stevie D** · May 17, 2011 12:45

Hmmm ... I'm getting error messages when I try to outline the whole page.

But pasting in the source of <div class="page"> gives:

ODENWÄLDER SPORT-SYSTEME
1. 404 nicht funnde
2. Untitled section
3. Untitled section

That's what I'd expect - the <header> <hgroup> gives the top heading, then subordinate to that (and equal) are the <section> with the <h3>, the <nav> (with no heading) and the <aside> (with no heading).

It shouldn't show the <h2> in the <hgroup>, because the point of an <hgroup> is that it's a single heading item, which may be split over several block elements for ease of setup. (Of course, that's not a good semantic approach, as it means you're using an <h2> when it isn't a heading. A <p> would be better.)

**Glasspoole** · May 17, 2011 19:45

The 404 error page has a differnd markup then the product pages.
Looks like the outliner does not work allways.
Here is what i have with my first example and as it is now:

HTML Code:

1. Untitled Section
1. ODENWÄLDER SPORT-SYSTEME
       2. Beschreibung:
            1. Ausstattung:
               1. Technische Daten:
       3. Untitled Section
       4. Untitled Section

Here are some blown up markup examples. Jsut take them and put them into outliner:

Code:

<body>

<div class="page"><!-- begin: .page -->
  <div class="right-column"><!-- begin: .right-column -->
    
    <header class="page-header">
      <hgroup>
        <h1>Odenwälder Sport-Systeme (h1)</h1>
        <h2>Power Rack OM101</h2>
      </hgroup>
    </header>  
  
  <article>
    <header>
      <h1>Power Rack OM101 (h1)</h1>
      <p>price: $ 999.00 / item number: OM101</p>
    </header>
    
    <section>
    <h1>product characteristics (h1)</h1>
    <p>Lorem ipsum</p>
    </section>
    
    <section>
    <h1>product details (h1)</h1>
    <p>Lorem ipsum</p>
    </section>
    
    <section>
    <h1>specifications (h1)</h1>
    <p>Lorem ipsum</p>
    </section>
  </article>
  
  </div><!-- end: .right-column -->
  
  <div class="left-column"><!-- begin: .left-column -->
    
    <nav>
    <h2>Main page navigation (h2)</h2>
    <ul>
      <li></li>
      <li></li>
    </ul>
    </nav>
  
  </div><!-- end: .left-column -->

<footer id="contact-footer">
<p>contact</p>
</footer>

<aside id="external-links">
<h3>external-links (h3)</h3>
</aside>

<footer id="page-footer">
<p>copyright</p>
</footer>
</div><!-- end: .page -->

</body>

Code:

<body>

<div class="page"><!-- begin: .page -->
  <div class="right-column"><!-- begin: .right-column -->
    
    <header class="page-header">
      <hgroup>
        <h1>Odenwälder Sport-Systeme (h1)</h1>
        <h2>Power Rack OM101</h2>
      </hgroup>
    </header>  
  
  <article>
    <header>
      <h1>Power Rack OM101 (h1)</h1>
      <p>price: $ 999.00 / item number: OM101</p>
    </header>
    
    <section>
    <h2>product characteristics (h2)</h2>
    <p>Lorem ipsum</p>
    </section>
    
    <section>
    <h2>product details (h2)</h2>
    <p>Lorem ipsum</p>
    </section>
    
    <section>
    <h2>specifications (h2)</h2>
    <p>Lorem ipsum</p>
    </section>
  </article>
  
  </div><!-- end: .right-column -->
  
  <div class="left-column"><!-- begin: .left-column -->
    
    <nav>
    <h2>Main page navigation (h2)</h2>
    <ul>
      <li></li>
      <li></li>
    </ul>
    </nav>
  
  </div><!-- end: .left-column -->

<footer id="contact-footer">
<p>contact</p>
</footer>

<aside id="external-links">
<h3>external-links (h3)</h3>
</aside>

<footer id="page-footer">
<p>copyright</p>
</footer>
</div><!-- end: .page -->

</body>

Also in the html5 DVD from lynda he did not put a section arround all the h2's and says that everything unter this headings is a extra section. He does:

Code:

  <article>
    <header>
      <h1>Power Rack OM101 (h1)</h1>
      <p>price: $ 999.00 / item number: OM101</p>
    </header>
    
    <h2>product characteristics (h2)</h2>
    <p>Lorem ipsum</p>
    
    <h2>product details (h2)</h2>
    <p>Lorem ipsum</p>
    
    <h2>specifications (h2)</h2>
    <p>Lorem ipsum</p>

  </article>

instead of:

Code:

  <article>
    <header>
      <h1>Power Rack OM101 (h1)</h1>
      <p>price: $ 999.00 / item number: OM101</p>
    </header>
    
    <section>
    <h2>product characteristics (h2)</h2>
    <p>Lorem ipsum</p>
    </section>
    
    <section>
    <h2>product details (h2)</h2>
    <p>Lorem ipsum</p>
    </section>
    
    <section>
    <h2>specifications (h2)</h2>
    <p>Lorem ipsum</p>
    </section>
  </article>

sure in outliner it looks the same.

It shouldn't show the <h2> in the <hgroup>, because the point of an <hgroup> is that it's a single heading item, which may be split over several block elements for ease of setup. (Of course, that's not a good semantic approach, as it means you're using an <h2> when it isn't a heading. A <p> would be better.)

But its what they show in every html5 example: a h1 and a h2 one below the other in a hgroup.

**oddz** · May 18, 2011 02:12

Either one could be considered correct. That is one of the major issues I keep with these new elements. Many of them seem unnecessary yet "optional". Its just a cluster f**k. The solution: write HTML4 introducing HTML5 based elements as needed. Which you will probably come to find HTML5 elements such as; asides, nav, etc just seem to add unnecessary bloat. Than throw a HTML5 doctype on it and call it the day. When forced to write HTML5 my recommendation is always write HTML4, validate against HTML 4.01 strict than when complete toss a HTML5 doctype on it – boom HTML5 – that will always be correct. I would probably make more use of other elements if they spec were not in draft stage but as far as I am concerned it would ultimately result in more problems than it would solve. However, h1 and h2 within a hgroup is proper "HTML5" for a title and subtitle. Not to mention if you want to get into SEO implications page weight increases as you use HTML5 standard elements, not only from unnecessary tags but the pure length in comparison to the common HTML4 standard tags. Granted that is being a bite of a nazi but its true.

**Stomme poes** · May 19, 2011 02:57

I agree with oddz, except that supposedly, eventually, in the future, these extra tags won't be bloat, *IF* browsers and other UAs implement the intended new HTML5 "document outline" which would correctly level and the meaning of the headers based on nesting and the meanings of the other tags.

But no browser does this today, and I have no idea if anyone (vendors) is actually interested in following the HTML5 document outline.

**Glasspoole** · May 19, 2011 10:13

I believe that google loves html5. I believe google will look more ad semantic then just h1, h2.

What allways was working for me (SEO) was to give to put the sitename in an h1. The article or product in a h2 and also the articlename or productname again in a strong tag.

But with html5 its differend. I was looking at the mozila site and there the outline thing is better explaint. They write it:
1
1.1
1.2
and that makes it a little bit more clear. Outliner does just 1, 2, 3, 4....
https://developer.mozilla.org/en/Sec...HTML5_document

But i'm still unsure.
I think it needs to make sense and has to be in the right order also if you disable the stylesheet - like a book or newspaper.

This one looks correct to me:

Code:

<body>

<h1>Company name (h1)</h1>

  <article>

  <header>
    <h1>1 product name (h1)</h1>
    <p>In the category: something/somewhere</p> <!-- category breadcrumb -->
  </header>

  <p><strong>product name</strong><br />
  price / item numbr</p>

  <section>
  <h2>1.1 product characteristics (h2)</h2>
  <p>Lorem ipsum</p>
  </section>
    
  <section>
  <h2>1.2 product details (h2)</h2>
  <p>Lorem ipsum</p>
  </section>
    
  <section>
  <h2>1.3 specifications (h2)</h2>
  <p>Lorem ipsum</p>
  </section>

  <footer>
  <h3>Tags: (h3)</h3>
  <ul>
   <li>Tag1,</li>
   <li>Tag2,</li>
   <li>Tag3</li>
  </ul>
  </footer>

  </article>

</body>

But as i said. Sitename in h1 and articlename in h2 was working good for me.
So it makes me nervous to not have the articlename in an h2 tag.

But if you read it it makes sense. The only thing that makes no sense is the
<strong>product name</strong>. So you have the product name again after the breadcrumb. But i need it in this place because of the design/how the site looks.

User Tag List

Thread: html5 product page headings??

Thread Tools

Display

html5 product page headings??

Bookmarks

Bookmarks

Posting Permissions