SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 63
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The role of h1 on a web page

    Up until now, I have been under the impression that the right thing to do was to use h1 for your site title and any article/blog post titles will be h2s and on down.

    This week, however, both an SEO person and an accessibility/usability person told me that the site title should not be a heading; h1, apparently, should be reserved for your page title.

    I have looked around looking for articles of best practice or any consensus on this issue but have not found much. If anyone has anything to contribute, I'd be very grateful to hear your thoughts.

    Thanks.

  2. #2
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Site title/logo should be an img.
    Main page title (or keyword for SEO) should be h1.

    IMHO
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, blain. I thought, though, that that wasn't very good practice from an accessibility point of view. Not necessarily disagreeing - just looking for advice.

    Thanks again!

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Forget SEO for a second.

    The H1 should contain a title which best represents the content of the page. If the content of the page is best captured in the site title then leave that as the H1.

    Just remember that your users are far more important than the search engines so attend to them first.

    @Blain - the site title does not *have* to be an IMG!
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  5. #5
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the 'main' reason why inline images are used for the 'logo' are because of print purposes. Otherwise, you could use a background image and 'hide' your text.

    So technically you are correct Jimmy.

  6. #6
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, the site title doesn't HAVE to be an image, but in practice is nearly always is.

    @cooper - I used to use text replacement for the page logo, but having thought about it, a logo should be considered part of the content of your site, rather than part of the presentation, therefore it should go in the HTML as an image, rather than a background image in your CSS.
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  7. #7
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by blain View Post
    OK, the site title doesn't HAVE to be an image, but in practice is nearly always is.

    @cooper - I used to use text replacement for the page logo, but having thought about it, a logo should be considered part of the content of your site, rather than part of the presentation, therefore it should go in the HTML as an image, rather than a background image in your CSS.
    Yeah, I myself use an inline image for the logo. I was just saying it doesn't have to

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    I think the 'main' reason why inline images are used for the 'logo' are because of print purposes.
    A logotype isn't just text, even if it looks like text. Even a text logotype is very specificially defined: the font face, colours, kerning, style, weight, …

    Therefore a logotype should be an image, since that's the only way to accurately represent it. And thus it needs to be a foreground image (an img or object element).
    Birnam wood is come to Dunsinane

  9. #9
    SitePoint Zealot Luke Morton's Avatar
    Join Date
    Jul 2005
    Location
    Essex, England.
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hang on, say that again, H1 should only be used on a page title? H1 should only be used once per page?? :|
    Luke Morton
    UK Web Explorer| lukemorton.co.uk

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by blain View Post
    OK, the site title doesn't HAVE to be an image, but in practice is nearly always is.

    @cooper - I used to use text replacement for the page logo, but having thought about it, a logo should be considered part of the content of your site, rather than part of the presentation, therefore it should go in the HTML as an image, rather than a background image in your CSS.
    That is exactly what I do, blain, especially considering that Web pages are their own independent entities while sitll being interconnected to each other. I use the logo to signify the connection to the other documents within the site, leaving the H1 to handle the page title (or top-most heading).

    And yes, I have seen significant improvements in the accessibility, SEO and usability of those pages by doing it this way.

  11. #11
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    A logotype isn't just text, even if it looks like text. Even a text logotype is very specificially defined: the font face, colours, kerning, style, weight,

    Therefore a logotype should be an image, since that's the only way to accurately represent it. And thus it needs to be a foreground image (an img or object element).
    I totally agree. I myself use an image + usually a tag-line for the 'branding' section.

  12. #12
    SitePoint Zealot Luke Morton's Avatar
    Join Date
    Jul 2005
    Location
    Essex, England.
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luke Morton View Post
    Hang on, say that again, H1 should only be used on a page title? H1 should only be used once per page?? :|
    To expand on my rather short post, what are the reasons for limiting the use of H1 tag to just the page title??
    Luke Morton
    UK Web Explorer| lukemorton.co.uk

  13. #13
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For starters, the HTML specification recommends that there be one H1 heading per page and that it be used as the top-most heading for the document.

  14. #14
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A good practice to test your solutions:

    1. Disable stylesheets
    2. Disable images
    3. Print preview

    I used to mark up my #branding-logo as an 'h1' and realized that 'semantically' it was not describing each 'page' to the fullest.

    Once I realized this, my page formats came into 'round-a-bouts'.

    This topic has been 'argued' redundantly in various threads throughout the net.

  15. #15
    SitePoint Zealot Luke Morton's Avatar
    Join Date
    Jul 2005
    Location
    Essex, England.
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    For starters, the HTML specification recommends that there be one H1 heading per page and that it be used as the top-most heading for the document.
    Hmmm well that is a pretty good reason. Is there a limit on h2, h3, h4, h5 and h6?? And should they always appear in order or is it okay to have something like this?

    Code HTML4Strict:
    <div class="main-content">
    <h2>Main content title</h2>
    <p>A paragraph blah blah</p>
    <h3>Sub title</h3>
    <p>Another paragraph</p>
    <h2>Another major title of main content</h2>
    <p>More stuff</p>
    </div>
    Luke Morton
    UK Web Explorer| lukemorton.co.uk

  16. #16
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No maximum limit, just a consecutive minimum limit (at least two consecutive instances per parent heading level). For example, you can have a H1 followed by two H2s with one of the H2s having three H3s and the other having two H3s, but they couldn't contain a single H4 as children of the H3s (or H2s for that matter).

    In other words, it's like an outline structure.

  17. #17
    SitePoint Zealot Luke Morton's Avatar
    Join Date
    Jul 2005
    Location
    Essex, England.
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is that even validated by the w3c validator? 8|
    Luke Morton
    UK Web Explorer| lukemorton.co.uk

  18. #18
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The HTML validator only checks for errors against the DOCTYPE the document is being validated, not semantic errors or how well-formed the document is.

  19. #19
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Download the wave toolbar:
    http://wave.webaim.org/

    This will help you out

  20. #20
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luke Morton View Post
    To expand on my rather short post, what are the reasons for limiting the use of H1 tag to just the page title??
    If you need more than one H1 it means you have multiple, separate topics in the same document. That isn't necessarily wrong, but most of the time it's better to split it up into multiple documents covering one topic each.
    Birnam wood is come to Dunsinane

  21. #21
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks for all of you chipping in here.

    Quote Originally Posted by Dan Schulz View Post
    No maximum limit, just a consecutive minimum limit (at least two consecutive instances per parent heading level).
    Out of curiosity, what is wrong with only one h4 in your example? I can perfectly well imagine a document with something like h1, h2, h3, h3, h4, h3, h2, etc. I don't understand what is wrong with only one child element. Could you elaborate?

  22. #22
    You Bet Your Life...Really lerxtjr's Avatar
    Join Date
    Oct 2003
    Location
    Denver, CO
    Posts
    599
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Site title/logo should be an img.
    Main page title (or keyword for SEO) should be h1.
    Wow, completely lost me there!!

    A page "title" is simple text between the tags <title>Page Title Text Here</title>.

    A "headline" is displayed by using the <h1> tag. A headline is something like "Denver Colorado Zoo Hires John Doe" and is never an image.

    A logo is always an image but never part of the "headline" or h1 tag.

    Simple stuff guys, let's give the right info, 'ay?

  23. #23
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by curiousn View Post
    Many thanks for all of you chipping in here.



    Out of curiosity, what is wrong with only one h4 in your example? I can perfectly well imagine a document with something like h1, h2, h3, h3, h4, h3, h2, etc. I don't understand what is wrong with only one child element. Could you elaborate?
    That lone sub-heading would basicaly be an orphan, and if that's the case then why distinguish it from the text that surrounds it?

    Quote Originally Posted by lerxtjr View Post
    Wow, completely lost me there!!

    A page "title" is simple text between the tags <title>Page Title Text Here</title>.

    A "headline" is displayed by using the <h1> tag. A headline is something like "Denver Colorado Zoo Hires John Doe" and is never an image.

    A logo is always an image but never part of the "headline" or h1 tag.

    Simple stuff guys, let's give the right info, 'ay?
    He was probably using the term "page title" loosely. Even I do it from time to time. Especially when talking to those who think using a H1 for the site name is a good idea.

  24. #24
    SitePoint Enthusiast archanapatel's Avatar
    Join Date
    Aug 2008
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if your site name has keyword in it then you should use text for it.
    Like,
    if you have site on colleges and your site name is collegesincity then you should give "colleges in city" as text and in h2.
    But if you have name which is not at all related about what site gives then you should use image.

    Like, google, orkut, imph, etc.

    For both cases, you should give page title or post title in h1. so, search engine will take it as important keyword.

  25. #25
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    If you need more than one H1 it means you have multiple, separate topics in the same document. That isn't necessarily wrong, but most of the time it's better to split it up into multiple documents covering one topic each.
    What would you recomend for a blog? (where all posts are listed on front page)
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •