When to Use h1 in Well Structured HTML

[ot]

Spot the dutchman? :wink: :D[/ot]

I like this thread - very informative. :slight_smile:

[ot]siteguru:
it’s totally, like, zonker in Doonsebury, man
[/ot]

And? This is precisely why we DON’T use h1’s to make text bigger. That’s not HTML’s job, and yes, your page should look like a college paper without CSS, not look “good”. Those who do surf with CSS off are looking for the big text to tell them the name of the page. If the logo is representing the company name on the page about the company (like the main page) then it can be cool. But on the Products page, the h1 had better be “Our Jawsome Products To Rock Your World”.

Some argue that the title of the page should still be Joe’s Garage Stuff and Jawsome Products should be an h2, but you are talking about SEO? Google sees the prodcuts page as a standalone page and had better know it’s about Products (from Joe’s Garage), not about Joe’s Garage with a subtopic of Jawsome Products.

I do put the company name in the <title> though:
<title>Jawsome Products - Joe’s Garage</title>

So for those arguing you should make the title tag and the h1 tag the same, then you’ve got more leeway.

I have to agree with the above posts. This has been a really informative thread :slight_smile:

I may get my head bitten off but I was wondering if you guys would take a look at the page I am working on and maybe give me your two cents and how it can be improved. I’m trying really hard to make sure this page is both nice looking, usable and following ADA compliance standards. The new look of the web site was made before I was hired so I had to work with what was already there. Plus when I started here I worked for a private company and we did not have to worry about being 508/ADA compliant and all that stuff so it was all new to me!:eek: So now… It was decided that the home page was pretty crappy and could be improved so I’m reworking it.

Here is the test link I am putting up right now to see how its looking.
http://www.lavc.edu/test/newMastheadLook.html
Im still working on making all the links live and tweeking the layout a little more but for the most part this is what were going to try and go with.

Please be gentle (:

Not certain what the sitepoint article has to do with putting them out of order, since the last example talks about the WCAG and puts them in a sensible order… as to the W3C page - there’s actually no rules in HTML that says what order they HAVE to be in, but from a structural standpoing the example on that page makes no sense…

Why do I say it makes no sense? “Missing header” before the h2, so it’s a subsection of nothing - and “related links” is iffy as a subsection of “Stock Market up today” (though it could) - and that completely falls apart if you have shock more than one article on the page, headings in your sidebar that is unrelated to the ‘article’, etc, etc… It should be about providing structure to the ENTIRE document, NOT about structure to just the article area… Which putting the h1 in the article doesn’t do.

NOT that I’d ever put a heading called “navigation” on my menu, people are smart enough to figure out what a list of options is - at least the main one. On the right side I want to add a h2 for “advertising”, a h2 for “About us”, or a h2 for “Latest Work”… Go to your average wordpress blog on just a single article view - are ANY of the headings in the side column subsections of the article? Hell no. That leaves you to either not use heading tags on them as cydewaze suggests (non-semantic markup - I would never do that), or suck it up and make something else the h1… again making the site name the only logical candidate.

If your clients know that much about it - what the devil are they even hiring you for? That’s the question I’d be asking them - sounds like micromanagement by people who don’t know enough about consistency of layout… Hell, that’s a question I asked one of my last clients before telling them to shove it and walking out on the project. Literally I told a client “Look, you are micromanaging stuff you don’t understand. If you understood it, you wouldn’t have needed to hire me in the first place. You want to do it? YOU DO IT!” SLAM

Which I’ve heard some people promote the idea of - but that’s not what heading tags are for. They are for providing STRUCTURE to the page… if it was supposed to be the same as TITLE, why are they even two separate tags? … and here I thought duplicate content was considered a bad thing :wink:

Agreed - to me, it’s all about structure and order… which is why I prefer horizontal main menus (pet peeve, I hate calling it ‘navigation’ - seems vague to me), content first columns, and semantic markup.

NOT that I’d ever put a heading called “navigation” on my menu, people are smart enough to figure out what a list of options is - at least the main one.

The main one, or the only one, yes. It is cool to have headers above navigation when you have several of them though: one for the site, maybe one for products, maybe another for the personal account. Mike Cherim hides them, but they’re an extra hook for screen readers and anyone else who can jump with headers. Visually, you can usually tell what’s a menu and what menu it is. If you have a lot of lists together though, and don’t have visual feedback, a header can make the difference.

My h1 element is typically the same across all of my sites pages. I like to put the generic phrase people are most likely to be searching for some variant of in my h1.

For instance if I have an “old books” site my h1 will be “old books” throughout the site.

For different categories I’ll use h2 for the category title, say “old kids books”, on the category pages and h3 for the various item titles, say “The Little Engine That Could”, in the category pages.

On the various item pages I switch to using the item title in the h2 and use h3-h5 for subsections throughout the page as needed.

I always reserve h6 for heading navigation sections.

My title element is typically the same as my h1 element on the index, and the same as the h2 on other pages. I tend to append things like “page x of Y” to my title element on things like category pages so I don’t get duplicate title warnings in Google webmaster tools though.

I think h1 element should contain the keywords about the article/page. I don’t think that a logo or site title should be in an h1.

A H1 is a heading; NOT a generic SEO keyword emphasis tool, a heading element briefly describes the topic of the section it introduces.

None of which would be subsections of the content column - hence the h1 there being inappropriate.

Having read this thread, I got more confused than before. I wish I did not read it:)

I only use h1 in the header section. ie. <div id=“header”><h1>Alpha Car Rentals</h1></div>. The text is of course removed from the centre of the screen with css. A header image fills the header space as normal. The page then starts with h2. All subsections take h3. Small areas may take h3 or h4 depending their importantance. Rarely do I go beyond the h4 though.

The main page is the one page of a web site that should NOT use the same template as the rest of the site and not just because the site name and logo belong in the H1 on that page and don’t on the others. Usually there will be lots of things that need to be different on that page compared to the other pages.

Maybe somebody should tell the boys doing HTML5 that we need a <brand> or <logo> element…

None of which would be subsections of the content column - hence the h1 there being inappropriate.

Oh, I agree as far as it not being an h1… that wouldn’t make any sense.

I put mine in whatever level makes sense for where the menu is. Usually when there are multiple menus, they’re not all in the same place or the same header level plane anyway.

I would do that on my main page, since usually the main page is about the site/company/whatever.

But on the contact page, Alpha Car Rentals is no longer the main reason for that particular page, on its own. The h1 of that page is “Contact Alpha Car Rentals” or whatever.

Felgall, too bad I have zero control of my static code once it goes to someone else. This is my experience with templates and it has left a bad taste in my mouth.

Surely the acid test would be to turn off images, javascript and CSS then browse the site as if you were using a screen reader?

It’s true, all books and tutorials are not correct. Writes prove their own opinions any way in their books. But, it’s really make problem for the beginners. Better they should discuss with experts on forums and it’s really useful.

This thread is really helpful for all.

Simplest way to do that without having to actually turn off anything is to just open the page using the Lynx text browser.

Lynx, however, still renders stuff like tables… you still have some visual feedback that you don’t get with a screen reader, as far as keeping track of rows and cols.

Lynx also styles stuff like dt’s and dd’s (dt’s get bold etc) and other little things… nice, and will show your page the way it really is, but for screen reader testing, use a screen reader.

I think its misleading to make anything other than the main topic a h1. The site name or brand isn’t the most important thing on the page. It may be important to the owner, but in regards to finding things the h1 should represent a contrasting factor between pages that helps people differentiate content from one to another. Marking up a logo or brand as a h1 doesn’t help provide any meaning for the user. In addition, it doesn’t provide differentiation of one page to another. Thus I would say its a gray hat SEO trick if anything to mark-up the logo/site name/brand with a h1. In most cases I would even say that using any higher level heading tag for content not specific to the individual page could be considered gray hat area. In my opinion all headings should be used to describe the content of the page. A “heading” for something like navigation or a menu is better marked up as a definition list where the “heading” is placed in the dd and its associated menu/content is placed in the dd. That way something that is pretty much “decorative” isn’t becoming part of the page hierarchy, such as a “heading” for a menu like products, categories, etc. So I guess I make true heading vs. decorative heading decisions based on global vs. page specific objects when it comes down to it. A logo/brand/etc for a site is a global object thus should be mark-up in a away that doesn’t reflect the page hierarchy. That is my opinion at least. I think looking at it like that creates a good separation between the what is actual content (page) vs. the wrapper/shell used create a consistent presence for every pages content.

Goodness, deathshadow60 - you sound awfully worked up about our front page. It’s not perfect, but man, don’t blow a gasket!

As the person responsible for implementing the new front page, allow me to address a few of your issues…

First, I’ll preface by saying that yes, it’s not perfect. Work in progress. I’m stuck using some pretty antiquated templating systems (for historical reasons) until we can get around to replacing some of them, and the process of implementing the front page was … arduous. I’m working on fixing that process - but the front page has suffered in the interim.

Mah bad. I did fix that at one point (the template has a few authors) but it seems to have crept in. Curse you, regression errors! I’ve to-do listed fixing this. Thanks for the catch!

Also acknowledged re: the ‘site search’ text needing to be a LEGEND rather than a H2 tag. Mea culpa again - I’ll look to fixing it (but it’s not as simple as it sounds (yet)).

Man, I’d love to hear your suggestions on how to get everything working right across IE(6-8), FF3.0+, Safari 3+ and Opera without using conditional comments for IE in a timely fashion. Sure it’s possible, but we’re running a business up ins and I can’t afford to spend ages and ages getting everything rendering perfectly without 'em.

You wanna pop me through some CSS and make SitePoint a better place, I’d be in your debt. Otherwise, I’ve got a to-do list that just keeps growing, so I’ll take the compromise (even if it makes me feel dirty!).

We’ve used image replacement techniques for our logo in the past, and you’re right, the advantages probably outweigh the disadvantages. I’ve got a clean-up of the templates and CSS scheduled for later in the week, so I’ll take that on board and see what I can do.

So - thanks for the crits. I think your delivery could’ve been a little more constructive (I’m a sensitive guy sniff :P), but the feedback is well valid and I’ll do everything I can to clean it up!

Most market-department overlords would tend to disagree; the reality is that using a H1 as your page/site title does enhance rankings in results and that has a directly-traceable financial benefit…

This strikes me as being an argument over language definitions; we stray rapidly into the “Oxford Dictionary vs. Common Usage” sort of arguments that people in literature courses get into. It’s all just semantics in the end, and the use of a given tag depends on the interpretation of the tool/people using it!