Myths and Facts of h1 Tags on Web Pages

Posted: April 25, 2009 at 05:34:59 by Dani Iswara. Words count: 795.
Last updated: May 4, 2009 at 10:07:49.

How many <h1> tags should you have on web pages? Should there be only one top-level heading? Another old debatable things. Some people think a document has at least one subject. Which one should cover that for the XHTML web pages?
  • <title>?
  • <h1>?

These opinions might be a myth

There are no evidence yet (if any, show me, please!), so these opinions are myth only. h1 tags should:
  • be only one h1 per web document.
  • contains phrases of the words in <title>.
  • be the first header tag in the source code.
  • be unique (to avoid internal duplicate content?).
  • contains the page target keywords.
  • not used as a site-wide elements on sidebar section.

Those opinions might be a fact

Based on semantic and accessibility point of view, some of the above opinions might be a fact (as a theory/best practices):
  • Web page as a single hierarchy, should be only have one h1 level heading. Represents the topic of the page.

    Semantically, books, papers, have only one top-level heading. DOM (Document Object Model) have a logical structure and it contains only one root element.

  • When screen reader users tabbing form heading to heading (including navigation and sidebar sections), in a logical order (h1, h2, ..., h6; properly nested; doesn’t skip any levels), the web pages would be more scannable.

    Therefore, we can see many guru's websites of web standards, semantic, and accessibility uses h2 tags for their navigation and sidebar menus.

From Illinois Center for Information Technology Accessibility (iCITA), Unique Title Overview said:
title element
The title element in the head element should contain both the title of the website and title of the web resource. The title element is typically rendered in the title bar at the top of the graphical window of most graphical browsers such as Internet Explorer, Opera, Mozilla and Firefox.
h1 element
The h1 element should contain the title for the web resource and may contain the title of the website. The page should contain at least one and no more than two h1 elements.
Try the test, run FAE (Functional Accessibility Evaluator). Who will get the benefit from having only one h1 tag?

So, what is Google says?

On Google.com, using keywords bali web design, these websites have something different:
  1. chazzuka.com, has two h1 tags on their homepage. One in alt attribute (note: alt is not a tag), the other in a pure text (Figure 1 & 2).
    <h1> with <alt> attribute

    Figure 1. alt attribute inside h1 tag.

    <h1> as a part of <title>

    Figure 2. Plain text of h1 contains phrases of title.

  2. baliwebdesign.net, has no h1 tag. The top level heading is h2 (Figure 3).
    h2 as top level heading

    Figure 3. No h1, no problem. h2 is enough.

  3. vierstra.com, has one h1 tag in <table> element.
    h1 inside table element

    Figure 4. table element contains h1 tag.

  4. dstudiobali.com, has one h1 tag.
  5. limbai.com has three h1 tags (Figure 5).
    3 h1 on one web page

    Figure 5. More than one h1 on web page. Not only 2, but 3. No matter.

They still ranks high on search engine result pages (SERPs). :) Of course, Google is not that strict! Because we can find so many web pages which not "perfect on markup". But still relevant with their context itself. You may see the different results on Google Indonesia (keywords: bali web design). Depends on the language type of their homepages. The next question is, should web authors/developers/designers focus more on users or "the perfect markup"?

Search Engine Optimization (SEO) perspective

People call "the perfect markup" as a Classic/Static/On-page SEO. In SEO point of view, for most publishers, maybe traffic is much more important to convert something. Gives what visitors want and like. Perhaps, not for all visitors. At least, for potential readers or users, on targeted keywords. You don't have to worry about h1 tags. Those search results are the fact. Any other evidence, please! You may see SEO conflicts.

Conclusions

I am not an expert in SEO. As a stupid guy, I'll say, no matter for SEO. h1 tag is useful for users. It's all behind the meaning (semantic) of the code. How to use it? Learn from the best practices. :) Further reading: Just unessential weblog
Dani Iswara, mail me: [myfirstnamelastname]@gmail.com.

Posted in category: Web Designs
Tags: , , , , , ,
17 Comments/Trackbacks (Comment closed)

You are free to share (copy, distribute, transmit) & adapt this blog post under the similar license (Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported; CCA-NC-SA 3.0 Unported). Please put these links on your copy:
Taken from: Myths and Facts of h1 Tags on Web Pages by Dani Iswara.

Unimportant Related/Random Posts

You may also read list of most popular posts and most popular tags of Dani Iswara .Net.

17 Responses to post titled: Myths and Facts of h1 Tags on Web Pages

  1. Comment by nomercy on May 1, 2009 at 18:27:49
    using Firefox 3.0.9 on Linux Mint 6

    kenapa ya dari semua penjelasan mengenai hal yang sama hanya di artikel ini yang masuk di otak saya ...

    acung jempol deh ....

  2. Comment by Dani Iswara on May 1, 2009 at 20:37:26
    using Firefox 3.0.9 on Gentoo

    nomercy,
    thanks, tapi sebaiknya jangan langsung percaya, karena saya juga hanya pengguna biasa. silakan telusuri tautan-2 tersebut untuk lebih jelasnya. :)

  3. Comment by Hendry on May 1, 2009 at 21:56:54
    using Google Chrome 1.0.154.59 on Windows XP

    Hanya blogger yang teliti dan memang berpengalaman yang tau bahwa alt itu bukan tag tapi attribute. Salut!

    On-page is only one factor to search engine ranking. There is also another factor, named appropriately off-page factor, that is more important.

    But because webmasters and bloggers have control over on-page factors, so it is recommended that they optimize it the best as they could.

    Thanks for the great posts in this blog. Subscribed to the feed already.

  4. Comment by Dani Iswara on May 2, 2009 at 00:58:34
    using Firefox 3.0.9 on Gentoo

    Hendry,
    thanks, saya juga taunya karena tulisan para master-2 itu :)

    sometimes, old and classic techniques are boring (but still accessible until now and later). for most of the publishers, the 'new magics' (whatever off-page) SEO are more interesting. :)

  5. Comment by gdenarayana on May 2, 2009 at 21:09:16
    using Firefox 3.0.1 on Windows XP

    berarti utk h1 - h6 itu ndak masalah dipasangin di themes yah bli? tapi saya jarang liat ada yang pasang sampai h6, biasanya sampai h4 aja.

    terus yang baiknya sampai seberapa? apa tergantung keperluan aja bli (terutama accessibilitas screen reader)?

    suksma bli :)

  6. Comment by Dani Iswara on May 2, 2009 at 22:58:37
    using Firefox 3.0.10 on Gentoo

    gdenarayana,
    utk SEO mungkin ngga terlalu ngefek (mungkin juga ini karena penyalahgunaan/overuse tag h1 zaman-2 sebelumnya) :)

    umumnya dipake h1-h3 aja, lebih dari itu biasanya dianggap membingungkan, kecuali halaman web yg bersifat ilmiah ala jurnal..

  7. Comment by ganda on December 23, 2009 at 09:46:30
    using Google Chrome Frame 4.0 on Windows XP

    Setelah saya coba FAE nya, halaman index http://gandamanurung.com lulus 100%. Tapi ketika saya mencoba untuk menganalisis halaman single page/post, FAE menyebutkan warning seperti ini.

    Each ul or ol element that precedes the last h1 element and appears to be a navigation bar should be immediately preceded by a heading element, preferably an h2.
    Warn: 1 ul or ol element (out of 1 total) does not meet the criteria.

    Ada idea? Solusi? Saya pikir itu bagian navigasi atas, namun entah mengapa bukan bagian itu yang salah? Heading untuk related post kah?

    Kemudian ada error lain, bagian comment avatar yang memiliki atribut alt yang kosong. Arh, ini adalah kesalahan kekurangan fungsi get_avatar(), saya berniat untuk mengubahnya kembali agar lebih baik. Untuk error yang pertama, apa yang ada di benak bang Dani?

  8. Comment by Dani Iswara on December 23, 2009 at 10:48:28
    using Firefox 3.5.6 on SuSE

    ganda,
    saya pernah membuat status twitter sesuai kondisi hasil FAE itu. Asumsi saya, dari pesan peringatannya, itu memang masalah di navigasi.

    Beberapa praktisi menganggap algoritma FAE terkait hal itu tidaklah akurat. Tes WCAG 2.0 versi achecker.ca berbeda dengan FAE. Douglast.com pernah saya tanyakan hal tersebut. Dia memakai rujukan FAE. :)

  9. Comment by ganda on December 23, 2009 at 10:51:53
    using Google Chrome Frame 4.0 on Windows XP

    Ya, tapi saya tidak mengerti masalah di navigasi yang mana, sebab pada halaman home, semuanya baik-baik saja. Asumsi saat ini mungkin adalah masalah di related post atau mungkin di sociable plugin? anyway, kenapa plugin sociablenya di copot?

  10. Comment by ganda on December 23, 2009 at 10:53:02
    using Google Chrome Frame 4.0 on Windows XP

    terus kata douglas apa bang? apakah memang algoritma FAE belum sempurna?

  11. Comment by Dani Iswara on December 23, 2009 at 11:29:30
    using Firefox 3.5.6 on SuSE

    ganda,
    keliatan kepanjangan di mobile screen. :) CSS-nya kayaknya mesti ada yang diedit juga kalo mo evaluasi validasi. Mau ngurangin plugin juga sih.

  12. Comment by Dani Iswara on December 23, 2009 at 11:35:29
    using Firefox 3.5.6 on SuSE

    ganda,
    menurut Joe Dolson saat mencoba FAE:

    Now, this isn’t actually the only ground on which my Navigation & Orientation was slammed. I was also informed that within my navigation bars, it is a best practice that “each ol or ul element that appears to be a navigation bar should be immediately preceded by a header element.”

    I’m not sure, honestly, whether this is a fair judgement. Should all navigation bars be preceded with a navigational label which is a heading? I can see that this would be of benefit to screen readers, since they would be able to make use of these headings to quickly navigate between each menu. It’s not something I generally do, although I’ll usually label the main navigation area of a site with a heading element.

    Pendapat aksesibilitas Web menurut Douglas T, poin nomor 8:

    Did you use headings to identify navigation lists? Using a H2-H6 heading before a navigation list will help with screen readers and with keyboard navigation. It helps break up the site into identifiable regions so that navigation is more intuitive. If you don't like the way these headings look, then change their appearance with CSS. This will allow you to keep the appearance you like, but keep the improved navigation too. Update: 52% of screen reader users navigate by headings whenever possible - WebAIM Screen Reader Survey.

  13. Comment by ganda on December 23, 2009 at 11:37:58
    using Google Chrome Frame 4.0 on Windows XP

    padahal untuk single post, sudah saya include juga css nya. bingung letak salahnya di mana.

  14. Comment by ganda on December 23, 2009 at 11:38:55
    using Google Chrome Frame 4.0 on Windows XP

    css sudah saya include dari awal home page. masih bingun letak kesalahannya di mana.

  15. Comment by ganda on December 23, 2009 at 11:46:18
    using Google Chrome Frame 4.0 on Windows XP

    tapi kok di halaman awal katanya valid yah? bingung saya.

  16. Comment by Dani Iswara on December 23, 2009 at 12:23:04
    using Firefox 3.5.6 on SuSE

    ganda,
    setelah upgrade plugin, opsi transparent-nya aktif lagi kan?

  17. Comment by Dani Iswara on December 23, 2009 at 12:33:16
    using Firefox 3.5.6 on SuSE

    ganda,
    iya juga ya. Tapi FAE itu buat HTML kayaknya. Bukan XHTML.
    Karena merujuk pada

    meta element that also includes an http-equiv attribute set to "content-type".

    yang biasanya untuk doctype HTML.

Sorry, for some reasons (sometimes due to sp*ms attack), the comment form is closed at this time. If You have any suggestions, please contact me. Thank you.

Dani Iswara .Net

Return to TOP
›› Older entries: Virtual Clinics for Self-Management Patients
‹‹ Newer entries: Antara peramban Opera, Safari, Google Chrome, Flock, Firefox