Grow your CSS skills. Land your dream job.

[WordPress] HTML5 theme structure

  • # February 15, 2012 at 8:25 pm

    Evening folks,
    I’ve been doing some research in the interest of making a more semantic, future-friendly HTML5 WordPress theme. Now, I understand that there isn’t one specific way to do this – but I’m struggling with the concept of some of the new HTML5 elements (section in particular).

    Here’s what I understand to be a good blog post layout:




    title and some meta

    content - with a smorgasbord of the usual elements

    more meta and maybe some other stuff


    Now here’s where I get stuck – where does section fit into all this? I’ve heard that section needs to be wrapper around each article. I’ve heard that section needs to be wrapped around the content. I’ve heard that section needs to be wrapped around any code you would normally wrap with a div.

    I would really just appreciate some advice here :) thank you!

    # February 15, 2012 at 8:51 pm

    Have a read through the section and article areas of this site: http://html5doctor.com/

    # February 15, 2012 at 9:25 pm

    Yeah I’ve been there 4,098,234,098,435 times but that doesn’t exactly spell it out all that well in my opinion. What I’m understanding is that the section element shouldn’t be used instead of a div, unless they would serve the same purpose. Also, the section element should be used to wrap sub topic content.

    Is this the general idea?

    # February 15, 2012 at 9:47 pm

    Hmm, here is my opinion: Try to use a section element to group related content. A good way to measure this is if the section would naturally have its own title. If a section doesn’t require a title, then you are probably doing it wrong.

    In regards to the markup you have above, that is perfect. There is no need for a section there; article makes much more sense as it is a blog post. That being said, if you wanted to show your five latest posts then you could wrap those articles in a section element and give it a title (i.e. Latest Posts).

    If you need to wrap stuff just for styling, use a div. A div doesn’t have semantic meaning like a section element.

    I hope that makes sense.

    # February 15, 2012 at 11:31 pm

    That does make some sense, so thank you!

    However, when you say “wrap those articles in a section element”, do you mean:




    article content


    # February 16, 2012 at 12:35 am

    This is what I had in mind:

    <section>
    <h1>Recent Articles</h1>
    <article>
    article content
    </article>
    <article>
    article content
    </article>
    <article>
    article content
    </article>
    <article>
    article content
    </article>
    <article>
    article content
    </article>
    </section>
    # February 16, 2012 at 7:21 pm

    Thank you for your help and advice joshuanhibbert, you’ve cleared things up quite a big for me!

    I really appreciate it :)

    # February 16, 2012 at 7:43 pm

    No worries mate!

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".