Html headings outline

Is it ok to use more than one <h1>?


<h1>
  <h2>
    <h3>
  <h2>
<h1>
  <h2>

:slight_smile:

Yes, but it depends upon whether it makes sense with regards to the specific page structure and content its rare that people do use more than one H1 per page but it’s not illegal.

It is valid markup – but semantically it’s nonsensical gibberish unless you are vomiting up that HTML 5 nonsense with all the extra new ā€œtags for nothingā€ like <SECTION> and <HEADER>.

H1 is semantically the structurally most important (NOT the most important, there’s a difference) heading on a page, which means that all content on the page and all other headings on the page are subsections of it – this is why slapping the H1 on something like the first article title when there are multiple articles and lower order heading items on a page is rubbish from a semantic/grammatical point of view.

Using multiple H1’s is like having multiple trunks on a tree – it happens, but it looks weird and really isn’t the norm. Just because it’s valid HTML doesn’t make it good coding practice.

Remember the common sense of document structure – by definition all lower order (higher numbered) headings are the start of subsections of the higher order (lower numbered) heading preceding it… which is why skipping numbers going down the hierarchy makes no sense, and why having more than one H1 also makes no sense; see why on 99% of my layouts I make the site title and/or logo the H1 – because everything on the page are subsections of the website itself.

Headings are so simple – I don’t know why everyone constantly messes it up or finds such a simple concept so hard to work with – Usually when this question comes up, IMHO someone has failed to divine the purpose of numbered heading tags, or is trying to abuse them for that fraction of a percent myth spread by the SEOtards.

As a rule of thumb, if you need more than one H1, there’s something WRONG with your markup and/or content… but without actually SEEING your markup and/or content, we’re all guessing wildly here. If you would care to post what you are working on, maybe we can help you dial it in closer.

I think for a page like this: http://www.imdb.com/ is where it gets confusing. (Ok I know it’s a bloated fill-in-the-blanks), but for a simpler page, still, where do you put the H1? I see people placing it on their logo to account for this. I mean HTML goes back to the days where mainly people were using it to share scientific articles or research papers, or info like that, where there is a clear, traditional hierarchy for that kind of thing. But since page structure has stayed the same, but the intent of the internet has changed, it’s seems sometimes like trying to fit a square into a circle. IMDB doesn’t even use the H1 at all that I could see, because there seems to be no real main header. They just start with H2s, which people say you aren’t supposed to do either (skip the H1).

Thing is, I don’t see that as confusing at all, as I see what SHOULD be a H1 (the site name/logo), a whole bunch of H2 (all of the golden yellow headings), and H3 under them… Of course, they don’t even come CLOSE to handling it properly as it appears whoever is choosing their tags is doing so presentationally; since all those H3 after the ā€œIMDB Hit Listā€ H2 should also be H2, since they are NOT subsections of ā€˜hit list’.

But that’s to be expected when they use 149k of markup in ten separate document files, 798k of javascript and 329k of CSS to deliver a simple black and white layout of only 9k of actual plaintext and maybe a dozen actual content images… A hefty part of why like a lot of other websites I just don’t go there anymore.

It’s so simple – ā€œis this the start of a subsection of the heading before it? No, then don’t drop to a lower order (higher numbered) heading!ā€ā€¦ I don’t get why/how people get so confused or find it so difficult. IT’S SO MALFING SIMPLE!!!

But then I say the same thing about ā€œthat’s not a paragraphā€, ā€œthat doesn’t need a div around itā€ and ā€œthat’s NOT a definition listā€ so…

MOST of the problem still remains people thinking what the page looks like when they first build their markup; but again I don’t believe in even TRYING to make a layout until AFTER I’ve semantically coded the content (or at the very least a reasonable facsimile of the content)… because if you don’t know what the content is, what business do you have making a layout for it? It’s all the ā€œcart before the horseā€ thinking on web ā€œdesignā€ (and if we’re talking PSD jockeys, I use the term design in the loosest sense) that results in the needlessly complex, convoluted, and generally not viable for web deployment site concepts that do nothing but flush perfectly good websites down the toilet.

See IMDB – which was leaner/faster/better a decade ago when it was on HTML 3.2 than the current scripting for nothing, endless code for nothing, two megabytes of being bent over the table by a tranny doctype train wreck.

Which of course means they’ll double the code size again when they go to the absolute disaster known as HTML 5.

I agree, it is simple. I agree, it’s fine to use H1 for the logo. In fact, I have seen people use it for the end of the breadcrumb, since that defines the subject of all relevant content on the page. It’s just that a logo isn’t a header in the typical traditional sense of a research paper. For example, when writing a letter on an official letterhead, you have your logo and address on top, THEN you have the title of the letter, which would be the H1 in a website, then all the subheaders.

I wasn’t around making websites 20 years ago, but I could imagine that the general idea when the internet was being used for papers, was that if there was a logo, it would be a content image, then the H1 was the title of the paper itself. So I don’t think people are conditioned to think of a logo like a main header of a document, especially if they are used to writing company letter, or a research paper etc, even though I agree it is. If you asked them what the main header was for something like that, they would probably not say ā€œthe company logo.ā€ I just think people don’t know if it is technically ok to do that on a website.

Another point of confusion comes when you actually DO have a main page title on a sub page, that fits the classical mold of what people think a header is. Then they switch from the H1 containing the logo, to being that title. Whereas, I think that if you are using the H1 for the logo, just make the main title in the subhead to H2, and all the rest H3 etc.

But that’s to be expected when they use 149k of markup in ten separate document files, 798k of javascript and 329k of CSS to deliver a simple black and white layout of only 9k of actual plaintext and maybe a dozen actual content images… A hefty part of why like a lot of other websites I just don’t go there anymore.

Hehe, I knew that was coming… :wink:

I’m moving away from the concept that the <h1> tag should be used for the site logo, basically i now just use a small anchor tag whether it be floated is absolutely positioned in the header and use the <h1> tag for the current page. If its the homepage i will hide the <h1> tag but leave it in the markup so the page is still semantic and SEO friendly but allows for <h2,3,4,5,6> tags to follow nicely afterwards, personal preference seems to be more common these days but since getting into SEO more during the recent months i have re-evaluated the way i write my markup based on where and when a heading tag is used within the page.

I know deathshadow60 dislikes HTML5 from a semantic view because of how it wastes markup on elements such as <hgroup> which i agree with as you shouldn’t need to group headings together, headings such as <h1> should only be reserved to important titles such as the page your currently on or a featured topic/article on the website, <h2,3> should be used to contain titles for sub articles that are high priority still but don’t carry the impact that <h1> would.

<h4,5,6> should be used for side blocks/content areas that have even less importance on a page but still carry a mid-range priority for SEO, when it comes down to it heading tags should be used based on the type of content proceeding it, where it is on the page and how a user is going to interpret the content in a plain text view. I’m not an SEO expert but i do believe that the way my markup is done represents a well-structured and SEO friendly webpage that everyone can enjoy.

Just my 2 cents.