Hello everyone,
For any web site should the <H1> tag be used for the logo/branding of the web site (Which makes sense to me if you were to remove all styles form a page) or only for titles of things printed in a web page. I see examples in books on HTML standards that don’t recommend H1 for the masthead area (branding area).
What does everyone else think? Thanks in advance.
The “h” tags usually indicate the “more important” content, like titles and subjects. It would be appropriate to use the h1 tag for branding, then maybe h2 for section/page/article titles, h3 for less important summary content, and so on.
The h tags have a minor influence over search rankings if used appropriately, and screen readers take advantage of them as well.
For design and layout, it honestly doesn’t matter all that much.
Why not use h1 for the logo and title of the document? No law against using two h1 elements. However, the logo/company-name/site-name should not be in a h* element, is my personal opinion.
Not all books are correct :). You need to be aware of that while reading web design books (especially since the content can get so outdated so fast)
I agree with the above poster, except in teh regards of where to use specific <h#> tags 
Edit-Logic ninjad in…I mean I agree with Force (and disagree :))
I’m of the opinion that there should only be one h1 element per page and it should contain info relating to what the article/page is about. I don’t think that a logo or site title should be in an h1. (unless the page is the ‘about’ page then the h1 could be “about site title”)
^ that’s what I do.
Often we have useless main pages (index.html) that exist I guess to make the boss feel good about himself. The logo (company name) IS what that page is about.
However all the other pages are about something else, and the logo is just a p and the h1 is in the main content heading it (as it generally should).
I’ve kinda stopped doing this recently though because my colleague uses a template and apparently it’s just too darn hard to make the logo an h1 on the main page and a p on all the other pages. Or so he tells me 
Seriously if templates are so difficult to work with, then they’re not saving time and should be dumped, period
Thank you everyone for your advice.
Maybe I am being a bit too much of a stickler on this topic. I maintain the web site of a city college and because they are federally funded the site must be 508/ADA compliant. So I am concerned with how screen readers read the pages and I wondered if the H1 tag made that big of a difference. Also when removing all css I wanted to see if the content and hierarchy of the page still made sense. That is why I thought maybe I should set the logo as H1.
Does any one think that makes a difference?
If the logo is just an image, no. If the logo is text, maybe.
It’s really a judgment call or matter of preference if you want the most important h element to be the logo, although BPartch probably said it best.
<h1><img src=“logo.png” alt=“Teh College”></h1>
Is the same as
<h1>Teh College</h1>
<p><img src=“logo.png” alt=“Teh College”></p>
same as
<p>Teh College</p>
So what’s in the tag matters less than what the tag is. Ideally, on your “about” page, the h1 is the title of the about page. The Campus page is about the campus. Etc
<p>Walden U</p>
<h1>Campus Activities</h1>
<p>dis page be all 'bout the weed you can smoke here at Walden college, man</p>
To me, the thing to remember about heading tags is they are there to provide STRUCTURE to the page… Structurally/grammatically lower order headings should be SUBSECTIONS of the higher order heading preceeding it… and as such you are only supposed to have ONE H1. Likewise the simple rule that tags are supposed to be used for what the element IS, NOT how it’s going to appear. Appearance is CSS’ job.
So whenever you use a h1, EVERY HEADING on the page should qualify as a subsection of that h1. This is why using it for things like the current page title can in fact be incorrect…
Let’s use a newspaper as our example. Let’s say we have the name of the paper, a giant headline, and then a bunch of smaller headlines… That giant headline would NOT be the h1. Why? Because “Town gets new K-6 school” or “West Street still under Construction” is NOT a subsection of “MAYOR CAUGHT TAKING MILLION DOLLAR BRIBE” - structurally those all would make the most sense as h2. Just because the main headline of the newspaper is in a font five times larger than the others does not structurally make it a higher level heading! The H1 would be the paper name. Turn to an inner page of the newspaper and the paper title is still there in the first HEADING on the page - that’s still the h1 despite the small text. That’s STRUCTURE. All the articles are the same ‘level’ regardless of how they are PRESENTED. That makes them all H2. You want them in order of importance, that’s what source order is for.
Whenever you use a lower level heading I say ask yourself “Is this a subsection of the heading before it” - if the answer is no, ask “is this kin to it?” - if no, ask “is it kin to it’s parent heading” - and if you end up answering no to that at the h1, you’ve got the wrong element as your h1.
Likewise, I would never use an IMG tag as the only content of a heading. IMG is for content images, not presentational affectations. A logo or image banner heading is a presentational replacement or supplement to the text that would be there - as such I always use a gilder-levin type image replacement on my logo/banner.
<h1>
Site Title
<span></span>
</h1>
Or something to that effect. Style the text as close to the logo as possible, absolute position the span over the text with a the banner image as it’s background hiding the text.
The best way to tell if you are screwing up your heading orders is right there in the Firefox web developer toolbar - Information > View Document Outline. If it kvetches about missing headings or the order doesn’t make any sense, you screwed it up.
… and most of the people not using H1 as their site logo/banner/title usually have sites where they skipped heading orders and have nonsensical heading orders if you view the document outline.
It mostly boils down to a lot of coders still thinking like it was a decade ago during the browser wars where even the browser makers didn’t give a flying hoot in hell for what the W3C ‘recommended’ and the simple fact that many people cannot get out of their heads the default appearance of various tags - which by the specifications has little if anything to do with the tags meaning or intended purpose. Modern markup is about separation of presentation from content for a reason… or if you prefer separation of appearance from grammatical structure.
That little logo next to “Sitepoint” is not presentation, it is part of the content. As such it should be marked up as an image element. Logos are content just as much as the very text they sit beside.
I might conceed that if the description of the image was “sitepoint logo” and it was separate from the text. Applied as a whole to the text, I’d rather be able to style the text in a meaningful manner and have ACTUAL text there, than the half-assed alt text which always looks like crap, and ends up treated VERY poorly by screen readers.
The technique used there being a great candidate for image replacement.
Though using sitepoint’s main page as an example is a GREAT way to show how NOT to use a heading tag - since the first heading on the page is a h2 with the site not even HAVING a h1. This is why screen readers and alt navigation methods choke on the site. If there’s no H1, it’s improper to even be using H2’s since then there’s nothing to even be subsections OF.
Which, well, I won’t say it. Let’s just say I remember someone from this site complaining to me about that the same time he was ripping one of Yanks books to shreds…
Open up Sitepoint’s home page in Firefox with the web developer toolbar installed, and go into Information > View Document outline… Most of it isn’t bad and cascades out quite nicely… but that big “HEADER MISSING” thanks to there being no H1… When there’s a element that obviously SHOULD BE… That and the extra unnecessary headings (or would be unneccesary if the source order made more sense) like “Site Navigation” a large site like Sitepoint might be able to get away with, but pull that on a smaller page and you risk being slapped down for content cloaking… or the “search this site” H2 that should semantically be a LEGEND?
… and since most search engines and many screen readers ignore alt text, that’s a EMPTY heading to boot… which is why it says “NO HEADING TEXT”… Which is what some screen readers will read out to you; see JAWS infamous “EMPTY HEADING” it says is a loud robust voice different from the other text.
Great way to start a page 
But as Dan would say, it’s hard to take it seriously when conditional comments are resorted to for IE6, IE7 AND the compatibility meta for IE8 - that’s just a sure sign it’s poorly written… Like the 65k of markup to deliver 6k of plaintext with what, 12 content images? No excuse for that to be more than 15k of markup, and 12-13k would be a realistic expectation for it. (content * 1.5 + 1.5 header + 0.2k per content image) + or - 5k depending on what’s in there for form elements. (Selects are a *****)
In any case, it’s a presentational affectation applied to the text “SITEPOINT” - treat it as such… If I WERE to use a IMG there, I’d use a image AND gilder-levin to overwrite the text, treating the logo and banner text as two separate elements… which really sounds like more effort than it’s worth. The bottom line being GET SOME ACTUAL TEXT in that heading!
In our new template, we do:
<p id=“pageheading”>Text logo</p>
We set a background image on this, with the text set off the left edge of the screen, so with CSS enabled you see the logo, but disabled you see the text.
Then in the document:
<h1>Document title</h1>
<h2>Subtitle</h2>
etc
For things like the sidebar or nav, we use <p> with classes to control appearance. Thus, the <h?> tags only appear in the actual document content, and are thus never out of order.
When we used <h?> tags for the nav and sidebar headings, there was always the possibility of this:
<h1>foo</h1>
<h3>bar</h3>
<h2>ed</h2>
Semantically incorrect for the sidebar and main heading, but when you DO use headings it isolated them to the actual content of the page. Semi-sensible approach, and I can see the advantages…
Just not sure I’d ever want to ABUSE HTML that way… But that’s probably because 90% of the time I see classes on tags that already have MEANING like paragraph, I want to puke… though that usually stems from people putting the same class on every paragraph inside the same element with a perfectly good class on the parent; NOT what you are describing doing.
Though using the h1 for the heading you should NEVER have a reason to jump to a h3 - if it’s after the h1, it’s a h2 - period, end of story. If you are using ANY other means of determining what ‘level’ it should be, you’re doing it all wrong… that h1 h3 h2 should never arise if the page is written right in the first place, at WORST that would be h1 h2 h2 - you might ‘want’ a h3 because you ‘think’ it’s “less important”, but that’s NOT the structural meaning. It might not be the ‘level’ you want, but structurally it should make sense when you look at a document outline.
Honestly, if something came out h1 h3 h2 and WAS structurally correct, I’d assume something was wrong with the source order.
See the people who jump to H3, H4 or even H5 in their sidebars when they don’t even HAVE the higher level headings preceeding them. That’s not semantically correct. Just because it’s in the sidebar doesn’t make them lower ‘order’ headings - structurally those are just as likely to be H2 as the h2 in the main column. The presentation might be different, but STRUCTURALLY there’s no reason those should be dropped in priority. I see that screwup all the time - people making them H3’s in a content first layout, and you ask "why is “recent articles” a subsection of “Apple bans third party advertisers”? Again, just because YOU are displaying it smaller doesn’t mean that’s what the heading level means.
But then I often see sites that while attractive, have little to no semantics in mind in their layout. You’d think people were wasting time dicking around drawing pretty pictures in PSD’s FIRST, instead of putting the goofy paint program where it belongs; at the END of the process.
Put the content you want into semantic markup FIRST, then bend that markup to your will with CSS to create your layout; then and ONLY then start up the goof assed paint program to hang graphics on your layout. In that way, I suppose you could say that by starting out with the semantic markup before I even THINK layout, I’m making my document structure and therein my heading orders FIRST.
Doing it the other way around usually means tag abuse, nonsensical heading orders, and graphical elements that are wasteful and require tons of trickery if they are even POSSIBLE. Hence all the small sites people vomit together in Dreamweaver and Frontpage, or worse slice apart in fireworks and try to call websites.
You know, tag abuse - like the people abusing ordered lists, div’s and spans on obviously tabular data; Like the latest skins from myBB, vBulletin and phpBB… all because they were too lazy to ever learn about tags like CAPTION, TH, etc, etc…
But what do I know, I’m the nutjob who takes everything on the 12 year old WDG HTML reference page like it was the gospel of John.
I use Gilder-Levin for both versions of my logos: it still makes no sense to have the h1 on the logo/company name on a page specifically about “Get a Quote” – THAT should be my h1, that’s what the page is about and the whole reason for its existence. Those pages have a p for the logo (not to have a logo, but because the logo is the company, therefore website, name).
However I use Gilder-Levin mostly because I want to style that text, and you can’t style alt-text except in that one xul-infested browser who thinks it’s “correcting” your PNGs because your image happens to have an EMPTY sRGB chunk in it, arg.
I haven’t found a search engine or a screen reader I’m willing to care about who ignores alt text (that’s a bug worth either fixing or ignoring) so I’ve stopped worrying about “someone might not see it” (google, yahoo and ixquick are pretty much all I’m going to bother with… Jaws, Window-Eyes, NVDA, VoiceOver and Orca are all I’m going to bother with… all deal in some (but not the same) way with alt text, good enough for me). Gilder-Levin for stylish no-images.
cydewaze, your problem is that there are people who have CSS on, but images off (saving bandwidth in that busy wifi cafe sipping unpronounceably coffee-based products for example), the get neither image nor text… the text only appears when people have CSS off too (and so linear browsers SEs etc). So I don’t use that technique any more.
deathshadow60 - You are pretty much making all the points that were floating around in my head. When I was trying to learn more about web standards/compliance/ADA ects… I was reading a book about web standards that used an example of a news paper web site but put the <h1> <h2> in places I did not agree. Just as the example that you gave. I was rather surprised. I would imagine one would create a page that makes the most sense first laid out with the most basic of HTML styling and then add all the bells and whistles. I don’t think its that terribly hard.
btw. What do you do deathshadow60? you seem very entrenched in proper use of HTML tagging structure.
<Sigh> I am thinking I should just structure my page more towards the techniques deathshadow60 is suggesting and listen to the pages read aloud in a screen reader and decide when they make sense. 
I probably know what book 
A lot of it comes down to people simply not being able to separate in their mind the default apparance of the tag from it’s structural meaning. If you are doing PRESENTATIONAL markup, then sure, the uber-big headline is the h1… if you are doing STRUCTURAL markup with separation of presentation (CSS) from content/structure (HTML) then the size of the text once rendered makes not one lick of difference.
EXACTLY!
I WAS doing freelance web development since about 2002, but have retired within the past year or two due to health concerns. Prior to that I spent two decades doing database development, low level service tech, Network technician, and a stint with the USAF. I’ve got over thirty years of using computers under my belt, and about two and a half decades working with them professionally… So most of this is nothing new to me, most of it just the new crowd of kids slapping new acronyms on stuff we were doing in the 70’s under other names.
I kinda had to step back anyways because of my increasing disgust with the ineptitude of the people I was trying to work with, the increased amount of sleazeball scammers in the industry (most of them with SEO or Marketing in their job description) and how many developers just don’t give a **** about the quality of their work. See the people writing HTML at some of the largest companies around… Even web based businesses seem determined to flush themselves by abusing technologies like Ajax, Javascript at Y!, Google and MSN… Just look at what [url=http://my.opera.com/deathshadow/blog/2008/12/20/rubbish-code-take-ii]Microsoft has done to hotmail.
Simple fact is most of these coders diving for the fat bloated (non-semantic presentational) template systems like YUI or GRID, much less fatter distended train wrecks like jQuery, Prototype and Mootools… sleazing out their designs in Dreamweaver or the Artist formerly known as Frontpage…
Most of them couldn’t code their way out of a piss soaked paper bag with a hole in the bottom - or WORSE they code themselves into a hole so deep they’ll never get out by making things so absurdly complicated that any ‘savings’ they sold said changes to the suits as are nowhere to be found.
Better than the screen reader is the simple tool in the Firefox Web Developer Toolbar.
Information > View Document Outline.
It will tell you missing headers, and it shows you a heading tree. The tree shows you that h2’s are subsections of the h1 preceeding it, that h3’s are subsections of the h2’s preceeding it, and so on down the line… It can’t be any clearer.
It’s just PART of why this whole ‘draw a goofy picture in photoshop first’ nonsense just pisses me off at this point - most of the people working that way knowing nothing of accessibility, separation of presentation from content, media types - Most can’t even tell you WHY certain tags and attributes were deprecated, much less what ones those are! Even when they use CSS they can’t even be bothered in many cases to use a MEDIA attribute…
Much less the fundemental concept behind what HTML is SUPPOSED TO BE ABOUT: Device independance and neutrality. The HTML specification only ‘suggests’ default appearances becuase HTML isn’t supposed to let you dictate appearance - that’s the user agent’s job. During the browser wars we got away from that when N$ and M$ started throwing in more and more presentational controls, and it wasn’t until CSS was added we were FINALLY able to get back to what HTML is supposed to be about… Writing content in a manner where presentation is either controlled by the user agent (browser) - or presentation for specific capability devices is handled separately. (CSS).
Of course those same people who cannot make that separation in their minds have hijacked HTML5 the past few years and steered it down a road I don’t think I want to follow - undoing ALL the progress STRICT has given us and flushing every good idea it had.
/* sorry for the rant */
…and listen to the pages read aloud in a screen reader and decide when they make sense.
If you’re going to test in a screen reader (a good thing to do, not so much for headers but just, does the page make sense?), don’t just listen, navigate and use it.
Can you find the contact form?
Can you fill it in?
Can you navigate the page using the proper semantic markup you’ve used? (by header, by list, by form, by table, etc)
Do any words run together unexpectedly?
Are any words missing?
I can vouch for crusty; I don’t agree with him on everything he rants over but the rants are great for learning. I’m glad I ran into him and Dan when I was green at this stuff.
Some good discussion above
Playing devils advocate you may be interested in this recent Sitepoint article where it seems that H1 elements can now indeed appear in the middle of the html and [URL=“http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H42”]endorsed by the W3c.
A lot of my (larger) clients specifically request that on the home page the logo (Company name) is the h1 but on internal pages the h1 is used for declaring the contents of that page and not for the logo.
The w3c link above suggest that the h1 should be the same as the “title element” in the head of the page and as the content of the title elements should change on each page to reflect its content then it makes sense that you don’t have a logo or company name as your h1 heading on all pages as that would be bad for seo and accessibility.
It seems that this is a topic with no outright winner but a common-sense, structured and logical approach is the way to go.
I come for a more SEO Background so that is more my focus.
From a Usability perspective, I don’t define the internal pages as <p class=“heading”>Company Name</p>, as the second you take the CSS away, it looks odd. Instead what I do is have something like this.
Home Page
<h1>Company Name</h1>
<h2>Home Page Introduction</h2>
<p>Blurb</p>
<h2>Second Header</h2>
etc. etc., trying to maintain the nested elements from h1 - h6 the best I can.
Internal pages I usually go for this:-
<h1>Page Title - Company Name</h1>
<h2>Page Title/Description again</h2>
<p>Blurb</p>
Etc. etc.
Like Paul mentioned above, it’s each to their own, feel mine looks neat, but no doubt people will disagree