HTML5 - Laying with the "new" semantic tags... confusing?

Get Started
1

So we’re a few years in but I’ve shied away from fully embracing it because I’ve found a lot of what I’ve read to be quite confusing, but I also realise I can’t keep resisting.

For example, the <article> tag…

“The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.”

How would a “forum post” or a “user-submitted comment” make sense syndicated? Okay, maybe the former would and in some instances a comment might, but I would argue if you removed blog comments, news comments, even some forum posts out of the context of the surrounding content, well, they’re not going to make sense.

I’ve also seen numerous examples of the <footer> tag being used when I’ve Googled HTML5 layouts, and from what I’ve read, it seems the <section> tag would be more appropriate and the <footer> should be included within it… The same goes for the <header> too.

I understand the theory in creating more semantic tags will improve screen reader / search engine legibility, and there are good examples of this especially with form elements, but as far as I can see laying out pages by HTML5 seems to me to be pretty convoluted. It seems to be there is no definitive right and wrong, an author could argue the case for an <article> instead of <section> and vice versa. The example of syndicated comments when stacked up against the <article> definition makes no sense to me.

Thoughts?

What websites would you recommend for guidance on layout best practices using HTML5.

Thanks in advance.

2

There are lots of discussions around here where HTML5 has been bagged. Yes, it’s a bit of a mess, and that’s going to lead to a lot of bad coding. Hopefully it will be refined a bit before it is actually ready for use in the real world. (Currently, browsers are not ready for it … without a life support system of JS etc., which isn’t viable IMHO).

3

IMO from everything I’ve read, I think it has quite a ways to go. I can definitely see the potential, but equally I think even at this early stage it’s filled with ambiguity, which is really quite bizarre because those ambiguities are so obvious?

Also, I can’t think of any argument as to why HTML5 wasn’t designed for website commentry at its core - news, blogs, forums etc. What about ecommerce? - Yes these websites could “fit” the mold but it doesn’t seem progressive to me.

What about <item> vs <article> for example?

4

I don’t think it matters what word is used, as long as the role is clear. I read “article” in its more general sense of “item” anyway, as in “an article of clothing”, for example.

5

I agree with that, but I still think <item> makes more sense as it’s more semantic and more encompassing. I would argue the etymology of article lends itself more to commentry - blog articles, news articles, forum articles etc. And if we’re trying to streamline and improve semantics I would have thought <item> would be a more logical choice. An <item> can be a blog post, a photo with a caption, a review or a product. Would <article> lend itself in the same way semantically? After all, that’s what HTML5 is proposing to improve upon, right?

Anyway, I’m getting sidetracked. The real issue and what bothers me most are the crossover of examples offered between <article> and <section> by seasoned commentators. I think it will lead to a lot confusion, and I admit it, I’m confused. In a number of cases I’ve seen the <secton> tag peddled as the “right” tag, but based on the definition of <article>, I could make an argument for it?

Already there’s a lot of misinformation out there already because it’s convoluted, and as you say, it’s already leading to a lot of bad practices now.

6

Well maybe not bad practices, I’m still not sure what is necessarily good or bad. Different practices is probably a better way of putting it.

7

Perhaps post an example of your proposed layout and people can suggest the best use of the markup. It might be an interesting debate. :slight_smile:

8

I’m not there yet unfortunately, Ralph, but I agree, it would make for an interesting debate.

I’m reading various books / websites and I’m finding fine nuances of opinions on <section> and <article>, especially when you get further into nested content.

I’ve just been on Bruce Lawson’s fine website. He co-authored “Introducing HTML5”, one of the first books to tackle the subject. Discussing the differences between how a <section> and an <article> should be used, he proposes this is a valid use for <section> (over <article>).

<section>

<h1>Articles about llamas</h1>

<article>
<h2>The daily llama: buddhism and South American camelids</h2>
<p>blah blah</p>
</article>

<article>
<h2>Shh! Do not alarm a llama</h2>
<p>blah blah</p>
</article>

</section>

As I’ve argued on his comments section, it could be an <article> as well, in fact it would probably be better suited to an <article>. This section is specific (to llamas), independent in the context of the surrounding text and self contained. It could be syndicated.

Nearly every book I read say comments on blog posts should be wrapped in their own article too? Probably because that’s how it’s described in the spec, but how would a single blog comment make any sense taken out of context from the original blog post? Would you syndicate a comment? I can’t think of an instance where you would want to generalise that?

Also of interest are <header>s and <footer>s, more so the latter. Google “HTML5 layout”, click on images, and there’s loads of similar (blog) layouts offered. Most show the <footer> as a block element that might contain your “typical” footer material, but I’ve just read by one authority, that shouldn’t be the case, you only need things like author, copyright, last updated, maybe a link or two… Really it’s the equivalent of a <p> tag. Based on what I’ve read, it sounds like the <footer> should be child of a larger bottom <section> and it really wouldn’t be longer than a line of text. It’s not the bigger block level footers that are proposed by these images and not the ones that I’m seeing examples of on the www. These usually, and I’m being general here, have some degree of navigation, contact info, a map, a tweet etc.? Hence the misinformation. If I’ve got this wrong, please tell me.

9

I did read this tonight on html5doctor.com…

This possibly best explains the difference to me, semanticaly anyway, between the difference of <article> and <section>. It reinforces my argument on <article> and blog comments for example and goes against how it’s described in the spec.

There’s been a lot of confusion over the difference (or perceived lack of a difference) between the <article> and <section> elements in HTML5. The <article> element is a specialised kind of <section>; it has a more specific semantic meaning than <section> in that it is an independent, self-contained block of related content. We could use <section>, but using <article> gives more semantic meaning to the content.

By contrast <section> is only a block of related content, and <div> is only a block of content. Also as mentioned above the pubdate attribute doesn’t apply to <section>. To decide which of these three elements is appropriate, choose the first suitable option:

  • 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>

To me that sums it up, hence something like a blog comment would fall into the <section> category, not how the spec describes it and not how most commentators write about it.

10

Yes, it’s kind of hopeless when it’s so open to interpretation and opinion. :frowning:

Related to what, though? In some circumstances, won’t the main content of the page be a section?

11

Yes, you’ve touched on another point. I’ve seen loads of examples with outer containers simply being <div>s. Surely everything on the page is related? I’m sure there might be some instances where web pages are divided up into unrelating things, but again, the examples I’ve seen, the outer <div>s in these examples would in my opinion be suited to being <section>s.

All this being said, I still don’t know whether to start adopting HTML5 yet or not.

12

There’s no need to. It can’t do much that HTML4 can’t (at least for now) so why take on the extra headache? If HTML5 truly offers some feature that I need and can’t do without, I will give tit a shot, but otherwise, it seems foolhardy to use it now, give the lack of browser support.

13

Yeah, I’m inclined to agree with you. It’s just frustrating when you want to stay on top of advancing technology.

14

It’s about the improved semantic granularity of a web page. I, for one, appreciate this, and, as such, I use HTML5.

<hr>

Semantics are simple.

section is the first depart from the old meaningless div abuse. After that, you have specialized sections: body, header, footer, nav, aside, article. These sections can be sectioned as well. By way of distinction in content (section) or by way of specialized sections (header, …).

One way to ruin this simplicity is to try to interpret the content meaning too. Limit yourself to content structure and purpose.

15

[QUOTE=itmitică;5143135]It’s about the improved semantic granularity of a web page. I, for one, appreciate this, and, as such, I use HTML5.[/QUOTE]

I don’t think anyone’s aruging the benefit of an improvement of semantics - I definitely think it’s a step up from a <div>. What frustrates me is the varying opinions by what content should be branded <section> and what should be an <article>, or even what should be an <aside>.

I’ve been reading varying opinions for days and it feels like I’m taking 2 steps forward, 1 step back. People who have written best selling books on HTML5 offer opposing examples, yet they all quote from the spec.

Yes HTML5 will improve semantics and the push to open standards, but equally I think it’s going to create a lot of different interpretations as to how content should be marked up. Bad habbits are hard to break - why the confusion at such an early stage… and it’s not so early now either, the confusion has dragged on. So yes, it will create a standard, but I forsee most designers won’t follow it strictly, which then poses the question as to how is it an improvement over HTML4 even if browsers had full HTML5 support?

16

I can see how <aside> is a bit difficult. For <section> vs. <article>, follow K.I.S.S. and specs. I guess the confusion is more about the fact that some would read section and <section> as being the same thing.

<hr>

<section> and <article> are both sections.

<section> is about “one world, yes, but five continents”. Or seven. Or six. Or a dozen. See, even here there is not much of an agreement. :slight_smile:

<article> is about “beam me up Scotty”.

<hr>

Now, you can have several <articles> in a <section> (figures), but you could also have a few <section>s in an <article> (also figures).

The main difference is, that while <section> is generic, it belongs there, in that context, it’s a family member. It’s surrounded by its relatives and it has a rightful inheritance for its spot there. Like you say “this content’s family” while also being able to distinguish among them: “ma’, pa’, bros, cousins”. Generic.

<article>, on the other hand, it’s self contained content, a squatter. Or, extraterritorial, like an embassy, a chancery.

17

[QUOTE=itmitică;5143177]<section> is about “one world, five continents”. Or seven. Or six. Or a dozen. See, even here there is not much agreement. :)[/QUOTE]

But this would be valid…

<article>
<h1>One world, 5, 6, 7 or a 12 continents!</h1>
<p>This is where I can talk and talk and talk about continents… </p>
</article>

This would also be valid…

<article>
<h1>One world, 5, 6, 7 or a 12 continents!</h1>

<section>
<h1>5 Continents</h1>
<p>blah blah blah</p>
</section>

<section>
<h1>6 Continents</h1>
<p>blah blah blah</p>
</section>

…

</article>

I could also see this as being valid.

<secton>
<h1>One world, 5, 6, 7 or a 12 continents!</h1>
<p>This is where I can talk and talk and talk about continents… </p>
</section>

I think the only thing which would logically separate <article> and <section> is the syndication factor. Is the content of a repetitive nature? - i.e. it would lend itself to syndication (blog posts, news items, reviews - PRODUCT LISTINGS) If it does, then the content should be marked up as <article>. If you’re marking up your “About Us” page or your intro on your homepage, you wouldn’t syndicate these things, hence they would fit the <section> or even arguably, a good old <div>.

I remember i used to hate <div>s about 10 years ago… I have a newfound love for them all over again!

18

I’m not sure if you’ve read the specs, but they say exactly this:
http://developers.whatwg.org/sections.html#the-article-element

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.

<hr>

They first fit into the <body> section. If <body> has content that:
http://developers.whatwg.org/sections.html#the-section-element

could be split into sections for an introduction, news items, and contact information

then, yes, a few <section>s it is.

Or a few <div>s. That’s the good thing about HTML5, you can use whatever you decide it’s best.

One thing I’d argue, is that if you choose <section> over <div> where appropriate, or, even better, <nav> over <section>, again, where appropriate, you are serving accessibility, cost free. This specialized granularity in a HTML5 document can help user agents and its users almost effortlessly from the developer’s part.

<hr>

I think it’s going too far, hating or loving, <div>, <section> and the likes. Sure, a learning process can be daunting, but if you rely less on other’s interpretation and more on clear simple answers from the first hand sources, it’s easier to see the light.

19

I’m in a rush now, so can’t reply fully, I will later though. I have read the specs for each of the layout elements.

I’ve seen lots of authors say the blog comments should be wrapped in an <article>. What are your thoughts? Blog POSTS and their ensuing comments I can agree with. I cannot fathom why you would want to syndicate comments independently of a post? A comment taken out of context of the post is likely not to make any sense… Unless the comment compeltely disregards the post and waffles on with some spammy content?..

20

Well, going to the source:

http://developers.whatwg.org/sections.html#the-article-element

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.

They say that a comment on an article it’s the embassy’s ground for the commenter and its “home” content in that article. The comment it’s not “part of the family”, it’s an alien to that content. A comment makes sense to be cited, quoted, and, taking it to the next level, even syndicated.

Again, don’t read <article> and article the same. <article>, as an element in HTML, has a special meaning now, different from the article English word. I guess that for ESLs it’s easier to fathom these differences?