<h> proper use

Discussion in 'CSS' started by klingerrr, Nov 17, 2006.

  1. #1
    what is the proper use for <h> tags? Do they have to be in ascending order or does it really matter? sometimes my site starts with <h1> goes to <h4> then goes to <h2>. is this really a big deal?

    it's very difficult to make the tags fall in exact order, especially when you are dealing with dynamic pages.. thanks.
     
    klingerrr, Nov 17, 2006 IP
  2. toby

    toby Notable Member

    Messages:
    6,923
    Likes Received:
    269
    Best Answers:
    0
    Trophy Points:
    285
    #2
    hey friend, I dont think it matters when it comes to using < h > tags. Don't worry about it.
     
    toby, Nov 17, 2006 IP
  3. BrianR2

    BrianR2 Guest

    Messages:
    734
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #3
    no, it doesn't matter at all.
     
    BrianR2, Nov 17, 2006 IP
  4. frankcow

    frankcow Well-Known Member

    Messages:
    4,859
    Likes Received:
    265
    Best Answers:
    0
    Trophy Points:
    180
    #4
    I use it when creating websites for easy markup. I redefine their presentation with CSS, but it's just easier to use them than creating all custom classes
     
    frankcow, Nov 17, 2006 IP
  5. sabian1982

    sabian1982 Notable Member

    Messages:
    2,028
    Likes Received:
    161
    Best Answers:
    0
    Trophy Points:
    210
    #5
    I dont think it matters that much, although its a good idea to use an H1 tag above all other Hx tags - dont over load your page with H tags though - the idea is to use H tags to indentify importance - hence a less importance heading would be in an H2 or H3 tag, where as the most important header for that specific page or section would be in H1 tags. Dont over use the H1 tag though otherwise you H1 text wont stand out from the rest of text on the page. The bulk of your text should always be contained within p tags.
     
    sabian1982, Nov 17, 2006 IP
  6. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Actually, it matters a great deal, since they help define the structure of a document.

    H1 is for the document (or site) title.
    H2 through h6 are for section titles (if the H1 is used for a site title, then H2 would be the page title). H1 elements are usually the only header elements alllowed (semantically speaking) to be "widowed" or without a companion.

    Here's an example:
    <h1>Document Title</h1>
    <h2>Section Title</h2>
    ... some content ...
    <h3>Sub-Section Title</h3>
    ... some specific sub-section content ...
    <h3>Sub-Section Title</h3>
    ... some specific sub-section content ...
    <h2>Section Title</h2>
    ... some content ...

    Also, you cannot jump from an H2 directly to an H4. The H2 and H4 must have a H3 between them (again, while not HTML rule syntax, it is the proper, semantic use of the tags - since headers help define the structure of a page, and you need a proper structure if you're going to properly define the page in the first place, and not serve tag soup to your visitors).
     
    Dan Schulz, Nov 18, 2006 IP
  7. AdamSee

    AdamSee Well-Known Member

    Messages:
    422
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    135
    #7
    Why, realistically, does that matter a great deal Dan?

    Semantic is an ideal to aim for, that I aim for, but sometimes being practical is the reality. There's no way I'll redefine a header, adding more code, for a particular page. If I've got one styled the way I want it. Unless there's actually a good reason for doing so?
     
    AdamSee, Nov 18, 2006 IP
  8. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Because not everyone is going to be using a user agent (not just traditional browsers anymore) that understands CSS, and will NEED to follow along using basic HTML. People who use cell phones (for example, my Sony Ericsson understands XHTML perfectly, but doesn't know a lick of CSS or JavaScript), so having a proper document structure helps me tell what is what ("is this a header, or just some strongly emphasized text?" for example). Also, people who use screen readers (remember, even blind people use the Web too), will benefit from a clear, logical document structure.

    Just because a person (I would say you, but I'm afraid it might be construed as a personal attack, despite the fact that I would use it in a generic, non-personal manner) has a working pair of eyeballs doesn't mean that everyone does. Granted, I can see, but my eyesight SUCKS. -550 in each eye (near-sightedness) plus I have astigmatism. I also have a POS Web-enabled cell phone too (that I plan to replace next year with something much better) that I browse the Web on from time to time.

    Remember, HTML for structure, CSS for presentation, JavaScript for client-side behavior, and (optimally, but may not always be the case, in which case the first three are golden) a server-side programming language for server-side behavior, plus a relational database management system for content. But mainly HTML for structure, CSS for presentation and JavaScript for behavior. Separate them, and use each tool properly, and your Web sites will be a LOT better for it. Your visitors will also thank you (not to mention saving money should they access your site on a non-traditional UA, like a PDA or a Web-enabled cell phone). And if they use an assistive technolgoy to access your site, they'll thank you even more.
     
    Dan Schulz, Nov 18, 2006 IP
  9. sabian1982

    sabian1982 Notable Member

    Messages:
    2,028
    Likes Received:
    161
    Best Answers:
    0
    Trophy Points:
    210
    #9
    Dan is pretty much spot on and thats ideal how you should use the tags. Unfortunately everyone isnt quite as picky or aware of the proper use. At the end of the day H tags should be used for your headings and never used for text that should be enclosed as paragraphs. If you have a page that consists of just h tags when p tags should be used, this will have an adverse effect on your site - quite simply h tags should be used for what they were designed - headings!
     
    sabian1982, Nov 19, 2006 IP
  10. BrianR2

    BrianR2 Guest

    Messages:
    734
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I guess I was thinking of it from an SEO point of view but now that I think of it, there is a hierarchy of importance that you give to your page with the use of H tags as headers. I think you could start a page with an H2 tag and then go to an H3 tag as it will convey the hierarchical structure of importance to the search engines the same way as having an H1 tag to an H2 tag because it would relative to the other tags on the page.

    Sometimes you want to use H2 first because of the way you've customized it using CSS so I think they should be kept in the proper order. About not skipping tags, that shouldn't matter from an SEO point of view but it may in the way that Dan was talking about it, I'm not sure why it would but I'm not familiar with those mediums of communicating the semantics of a page.
     
    BrianR2, Nov 19, 2006 IP