According to HTML5 Doctor, here are some rules of thumb for choosing between <article> and <section>:
Would the content would make sense on its own in a feed reader? If so use <article>
Is the content related? If so use <section>
Finally if there’s no semantic relationship use <div>
With that understanding, it seems to me that with your example, I wouldn’t use article at all, and instead use a bunch of sections. The reason why is that the content in the articles wouldn’t make sense in a feed reader, being that they are only snippets of the complete content. However, they are all related (as far as I can tell, I can’t read german), making section quite appropriate.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Thomas, I am sorry to come so late to this. This is what I consider the fun stuff.
I think the best advice would be to keep your semantics as simple and straight-forward as possible… the HTML5 Doctor rules are good guidelines, and asking yourself how the content groups naturally is a good way to work it out… without being too obsessive-compulsive about drawing the lines.
Like you, I consider <section> as a large (and generic) sectioning element while <article> is more focused. Article elements need to be self-contained enough to appear as completely separate content-- as in Caleb’s feed reader example.
That doesn’t mean Article has to have a lot of content, just a complete “story”. The Read More buttons in your example kill the idea those cards are self-contained, but leaves open the idea that they are different stories gathered in this section/group. So, I might support them as articles but I also might think of them as items in a list.
There is a side of Semantics I think is messy and subjective, and so I think exploring how to use these new sectioning elements is a good thing and should be encouraged. The web may no longer be a fire and forget medium-- what seems okay today may tomorrow be so yesterday.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
I’m currently working on a (not new) core principle, which kills “bloated - mega-flyout - schischi and lala” menus. I try to substitute this by guiding a visitor through each page, focusing her on the main aspects.
If you think the index as a one-page project, I think I do good declaring those as “articles”. There won’t be more - it is self-contained. But if it is a multiple-pages project, each “article” will naturally be just an excerpt - with the call-to-action to read a following full article - and then, if I got you correctly, it would be more a “section”.
But on the other hand, the excerpt contains enough food for feed (gosh - sometimes I’m not sure creating a new language) - so I even can keep it as an “article”.
Don’t mistake me here - I’m not going to be too obsessive in this. But semantic is an important and exciting task. And I know that HTML5 semantics are mainly created for “blog-posts”.
But if you want so, I’m perhaps missing another semantic level which clever combines excerpt with article.
####theExcerpt
“Use this if there’s more to be expected, such as an excerpt on an index with the full article on another page.” (Thomas’ doctor said this).
I perhaps have to have another look into CSS-tricks, cause this is pretty similar to what I’m after - just looking how it is handled there:
And by doing so, he wraps the excerpt as “article”.
So guys - I think we are on the right path. And it’s always a pleasure having a talk with you gentlemen.
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
This is my understanding as well. Each Article creates a new “document root” context within which you can have a semantic H1, and they don’t step on each other. The big winner here is Wordpress and its kin, which can use the same template for the “latest post” portion of the index page and the individual /archive/datestamp/post-slug-here post pages.
Walter
On Sep 22, 2015, at 12:04 PM, Thomas Kimmich email@hidden wrote:
No - I can’t, honestly. I think I got it from the corner A Book Apart and Jeremy Keith.
I may have dreamed this, but am under the impression, that he mentioned Blogs and its posts having had a permanent h1 Tag.
Assumed you create a blog called
####My Kitten Blog
which is the H1 of each single post, you can’t have another. So each Blog-Post Title is automatically a h2.
With introducing the semantic level section and article the problem has been solved - more than one h1 Tag allowed.
Perhaps it’s wrong to say HTML5 in general - but regarding the semantic level - I think it’s true.