Seeking recomendations on proper use of h1, h2, h3 etc tags

Discussion in 'HTML & Website Design' started by Josh Inno, Feb 1, 2007.

  1. #1
    Well, I've taken some time to think things over, and I definitely want to use the heading tags and the title for my site correctly. However I'm not 100% I know what 'correct' is in this case, and what the best way of doing this is.

    Should I have the title of my site it's self in the title bar? The section? The title of the page?

    Should I have an H1, H2, H3 structure of the site corresponding to "Website name", "Section name", "Page topic", or start off with H1 being the main topic of the page it's self, and h2, h3 being for sub-topics on the same page?
     
    Josh Inno, Feb 1, 2007 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You're "supposed" to use one H1 for the page title (though I often use it for the site title), and at least 2 of each other heading.

    I use one H2 for the menu section, and the second for the main content. If I have a sidebar, I'll use one for that as well. After that, I break the various sub-sections of the main content area (and if need be, the sidebar) down using H3-H6, as needed.
     
    Dan Schulz, Feb 1, 2007 IP
  3. Codythebest

    Codythebest Notable Member

    Messages:
    5,764
    Likes Received:
    253
    Best Answers:
    0
    Trophy Points:
    275
    #3
    Well, the <Hx> is really nice for search engine wise stuff. However, sometimes, it is not that nice and tend to look unprofessional.
    So what not something like this:
    <span class="smallerthanH1"><H1> my title</H1></span>
     
    Codythebest, Feb 1, 2007 IP
  4. Anduril66

    Anduril66 Well-Known Member

    Messages:
    390
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    108
    #4
    I think a better solution would be to style your headings in an external style sheet, like <h1>my title</h1> and put "h1 {font-size:12px;}" in your stylesheet - much cleaner code and easier to modify appearance.
     
    Anduril66, Feb 1, 2007 IP
    Josh Inno likes this.
  5. Lukas

    Lukas Well-Known Member

    Messages:
    1,299
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    130
    #5
    I agree with Anduril66,

    this is the way to use it along with h2 in sub-section of content.
     
    Lukas, Feb 2, 2007 IP
  6. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Cody, that example markup is invalid HTML. You cannot stick block-level elements inside inline ones.

    And while headings may not "look" professional, they (when used properly) help define the structure of a Web page, which is exactly the job that HTML is designed to do. Let CSS handle the presentation.
     
    Dan Schulz, Feb 2, 2007 IP
  7. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I've got 3 site's I'm working on at the moment.

    2 of them are for work. My boss is a big fan of pages that have framed cells that break up the content. One for the menu, then 2-3 others for the remainder of the content, and I have been instructed to make them this way. I'm not supposed to have any text outside of these boxes, and each box is supposed to have it's own content.

    Would using the page title instead of an actual <h1> tag, and then having an <h2> at the top of each of the cells be at least somewhat acceptable according to web standards? The other problem is that there's no real place to put an h2 of 'menu' in the menu frame, at least as it is currently designed.

    If I need the various headers to look differently, I can always give them different classes or IDs for the CSS, right?

    Thanks for all of the info so far guys.
     
    Josh Inno, Feb 2, 2007 IP
  8. Anduril66

    Anduril66 Well-Known Member

    Messages:
    390
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    108
    #8
    I am not sure exactly what you mean by "using the page title instead of an actual <h1> tag,"

    Yes, you can give the header tags class and id tags and style them differently,
     
    Anduril66, Feb 2, 2007 IP
  9. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #9
    *Sighs* sorry. What I meant was, would it make some sense to leave out the <h1> tag, and instead use the page title in the header?
     
    Josh Inno, Feb 2, 2007 IP
  10. Anduril66

    Anduril66 Well-Known Member

    Messages:
    390
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    108
    #10
    Yes, you can definitely do that.

    I often make pages with Site Name|Page Title or Site Name-Page Title or just Page Title in the title bar, and just use H2 tags for subheadings.
     
    Anduril66, Feb 2, 2007 IP
  11. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Why not just put the page title IN the H1 element? Remember, all HTML does is define the document structure. You can then use CSS to define how that structure is presented.
     
    Dan Schulz, Feb 2, 2007 IP
  12. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #12
    For my personal page I'm allowed to do anything on, I'll definitely do that.

    For the pages with the image frames around the 4 content cells... You're probably going to hate me for the answer, but I'm just following orders. I'm supposed to have a heading for each cell except the menu cell, and am trying to bring this page as close to standards as I can within my specific orders. Once I get it there, and my bosses accept more input from me (I'm off of probation) I will try to make suggestions to get the page SEO'd better by putting the page title in, and closer to standard by getting the target tag out of our business wide include.

    I'm still working on figuring out how to detable it, which is something my boss endorses as long as I don't "waste to much time on it".
     
    Josh Inno, Feb 5, 2007 IP
  13. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #13
    I'm not going to hate you. Some people are just old-fashioned and need to be educated in proper Web site design (and its benefits). It'll just take time, is all. Good luck with your sites :).
     
    Dan Schulz, Feb 5, 2007 IP
  14. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #14
    Josh,

    Go to the site in my sig. Compare the use of header tags and title tag text from page to page. Notice, too, the markup in the top banner, comparing the site index page to the content pages. These should help clarify points made by Anduril66 and Dan Shulz (Dan, you spell your name wrong&#8212;everyone knows Shultz has a t. :))

    There are a few pages that are spartan demos, without concern for the page structure, so ignore those.

    cheers,

    gary
     
    kk5st, Feb 5, 2007 IP
  15. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Thanks for the help and advice guys.
     
    Josh Inno, Feb 6, 2007 IP
  16. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Tell that to paternal grandfather's second cousin, Charles M. Schulz (the guy who created Charlie Brown, Snoopy, Woodstock and the rest of the Peanuts gang).

    Btw, you not only added a "T" but also left out the "C" - two strikes :p
     
    Dan Schulz, Feb 6, 2007 IP