Is it ok to use more than one <h1>?
<h1>
<h2>
<h3>
<h2>
<h1>
<h2>
Is it ok to use more than one <h1>?
<h1>
<h2>
<h3>
<h2>
<h1>
<h2>
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ā¦
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.