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
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!
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.
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.