[WordPress] HTML5 theme structure

[cmegown]

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!

[joshuanhibbert]

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

[cmegown]

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?

[joshuanhibbert]

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.

[cmegown]

That does make some sense, so thank you!

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

article content

[joshuanhibbert]

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>

[cmegown]

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

I really appreciate it :)

[joshuanhibbert]

No worries mate!

[Author]

Posts