Header tags: how do you use h tags in themes?

  • Here’s a question I’ve been asking myself over the last couple of months as I’ve been planning and writing a theme for WordPress: how hierarchical should my header tags be; what header tags should I use in my #header, #content and #sidebar divs? I wondered what other users’/developers’ thoughts are.

    In my searches on Google I discovered a good article on the CollyLogic website entitled “Question Time: Using H Tags” https://www.collylogic.com/index.php?/weblog/commentsfull/question_time_using_h_tags/
    but I wondered what other, specifically WordPress, users’ practices were. Is there a convention about this? (I’ve done a search on the support forums here but didn’t immediately find anything.)

    Having read and been converted to writing validating xhtml by Jeffery Zeldman’s book “Designing with Web Standards” I’ve been revisiting old sites of mine and been appalled by my over-abundant use of class tags to even style the humble <p> tag in my #content divs, and my use of header tags to style text rather than describe it logically within the hierarchy of the document.

    As I (now!) understanding it, the header tags describe the hierarchical importance of a document. So my question is really about what tags do you use where? For example, do you follow the understanding that any document should have only one h1 tag, in the #header div, for example? And what of sidebars, what h tags do you use there; should you return to h2 for sidebars, or follow on from where you left off in the #content div?

    After much thought and a little reading around I’ve decided on the following with my WordPress 1.5 theme:

    h1 #header title
    h2 #content page title
    h3 #content post title
    h4 #content subheader (inserted into the post text by me)
    h5 #sidebar headers
    h6 not currently used

    This way when I write my print.css file I’m not having to worry about how many hn tags I have in different divs (#header, #content, #sidebar, #footer) but know that it logically describes the outline of the page from header through content to sidebar.

    As I said, I wondered what other users’ thoughts and practices were.

    Gareth

Viewing 8 replies - 1 through 8 (of 8 total)

  • I like your h use above.
    It is also why I do not understand the decision to give sidebar headers the h2 tag in the default.

    As for themes, I think the best thing you can do for future users of your work is comment it. If you put that list in the css for them to see, you will help them out – and that’s a very good thing.

    Gareth this is a very sophisticated post. Your thinking puts you well ahead of most of us.:). I would make three observations. Out of the box WP is pretty sound in this respect – at least in Classic, and can act as a good platform. Two – there is a bit of leeway as to what is *best practise* , even the gurus are not completely agreed which is unsurprising because each site is different. Finally anything to do with links deserves much higher than h5. h2 I would think (if you are using them at all).

    Next up is sizing. Although creative differences in sizing seem fine with for example very large post titles, they lead to a wide range from the top (h1) to the bottom (h6). That causes chaos when resizing the text. There is a suggested algorithm set out at W3C CSS. Good luck anyway and welcome to WordPress.

    I struggled with this same issue about three years ago, so good for you for coming to the same terms. I changed the order in my WordPress Theme, but then mine is not for public use.

    I think that WordPress should, like Podz said, embrace this hierarchy, but they haven’t. And I think Theme authors should, but they often echo the developer’s original layout.

    The neat part about a theme is that you can change all that within the templates and styles for that theme. The problem is for the users who tend to “know what they are doing” and who have hard coded headings into their posts. I do, and so do others, so your desire to force an order might screw up the look of their posts. If they know what they are doing, they can easily fix it. If they don’t….?

    I vote totally for releasing completely valid Themes and structure. We just have to look at the whole picture.

    Lorelle what do you mean by *totally vaid themes and structure* ?

    Incidentally the OPs schemata does not include the date which is h2 in the Classic. And for other readers I should point out that altering the heading tags generated out of the db by php is no small undertaking, because it involves *shudder* messing with the mysql. For less experienced guys at php it might be best to build on what we have.

    Thread Starter garethjmsaunders

    (@garethjmsaunders)

    Root, I certainly take your point:

    Finally anything to do with links deserves much higher than h5. h2 I would think (if you are using them at all).

    That was exactly what I was struggling with: do I return to h2 for #sidebar use, or continue on to the next unused header, in this case h5? In the end I opted for h5 … but it’s nothing that a global search-and-replace couldn’t alter at a future date if I change my mind! Maybe in my next site I’ll use h2 for #sidebar. I’m certainly a fan of commenting code — not only for other users, but for me too! I’ve got about 10 sites I work on, and it keeps me right.

    I certainly found the interview article I referenced in my first post useful, and it was refreshing that the experts couldn’t agree either. But then, when html was created I don’t suppose they envisioned what the web would become. In those days it all about was single, hierarchical pages.

    And thanks for the welcome to WordPress. It’s a great community, using a great tool. Keep up the good work.

    Gareth

    You can of course have h2 with 2 or more different clases. We should not confuse semantic markup with styling. h2 class= links would be fine. IMHO.

    Gareth has pretty much got it right with his order I would say. In terms of semantics a header and it’s value are supposed to denote the major divisions of a page viewed unstyled, in essence the major headings H1, H2 should be used once or twice only and they should be towards the top of the page, and subsequent headers should follow the natural order given to them in their #, playing around with the font-sizing of a header is not really correct even if that is only CSS styling and for this reason I have a problem with the way the H2 tag has been used in the sidebar, as H4 or H5 would have been far more appropriate.

    The biggest problem I find is the way the H2 heading has been hardcoded into functions such as the get_links_list seemingly presenting the problem of only being able to change it by editing the core links php file. Why can some some functions like the date that Root mentions use supplied arguments that allow you to chnage things such as the generated html and not others?.

    Hugo.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Header tags: how do you use h tags in themes?’ is closed to new replies.

Tags