Opinions on semantic use of heading tags?

[Makosuke]

I've read a few articles and think I have a general idea of what's a good way to approach which things to label h1, h2, etc on a page, but I thought I'd see if anyone has alternate opinions.

The template I'm designing is for a site with a bunch of content, but the biggest portion is movie reviews. Visually, it'll appear something like this (I'm simplifying as much as I can):

Site Name (in decorative banner)
MOVIE TITLE (or page title)
Review (or other section name)

{...summary of page content...}

Full Title and Subtitle of Movie

{vital stats box}

Plot Summary

{content}

Review

{content}

Trivia

{content}

I want to lay out the code in a semantically logical way then style it, but I'm not sure how to handle the heading levels. Note that the title of the movie is repeated twice to address things with really long subtitles, since the primary title is also being used as a decorative design element and I want to keep it restricted to one line if at all possible.

I'm thinking that the pseudocode would look like this:

<div>Site Name</div>
<h1>MOVIE TITLE Review</h1>

{Summary}

<h2>Full Title and Subtitle</h2>

{vital stats box}

<h2>Plot Summary<h2>

{content}

<h2>Review</h2>

{content}

<h2>Trivia</h2>

{content}

My main question is what to do with the site name from a semantics standpoint. Do I leave it as "plain" text in an appropriate div, as a background image with no semantic content at all, as a second h1 (seems wrong, but not entirely illogical), or lower h level?

Also, does it make sense to have the full movie title at an <h2> level, or should it be non-heading text styled to look more important?

Any suggestions or opinions greatly appreciated.

 

[angelwatt]

Site name inside the div could work as is. Generally this is the same as the domain name and/or what you have in the title tag. Having it in a h1 (or other heading tag) doesn't help much in SEO and even from a semantic standpoint doesn't make too much of a difference.

A different way to look at this is to consider HTML5 and the new tags ex., header, article, footer, section, etc. This ALA article that previews HTML5 might give you some ideas. Also, the HTML5 specification has some good notes. I'm not saying use HTML5, but the discussions of headings is relevant and it's good to think about how we'll be marking up pages eventually.

 

[Makosuke]

Interesting suggestion. I had been sort of writing HTML5 off as a little too far in the future for this project, but maybe I should use an HTML5 doctype and add some basic <header>, <nav>, <section> type tags to add some extra semantics to the structure.

Sadly, it looks like using said HTML5 elements in place of divs for CSS purposes isn't yet practical; I could live with a bit of IE-only Javascript to hack support into it, but it looks like there's a Gecko bug that would completely break styling these elements in Firefox 2.x and Camino 1.x, with no easy workaround.

Not feeling quite ready to abandon those browsers yet, so I guess that leaves me with redundant not-semantically-meaningful divs scattered about for styling purposes, but no harm in a little future-looking. I was going to need at least an extra layer of container divs to get the layout I wanted anyway, so I guess it's not that much of a tragedy.

Of course, now I need to decide what goes in the <header> tag--the site title, just the review title, the whole top of the document, or leave the site name dangling out there on its own anyway. If I understand the intended meaning of the tags, I assume <header> is for the site title, while the remainder of the content should be in an <article> tag with appropriate <secction>s. I hope.

On a lateral note, the full title probably shouldn't be in an <h> tag at all now that I think about it, since it's really just informative text, not any kind of a heading for that chunk of content.