Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 article or section for list of favorite books?

A fictive website about books. Each book has its own page. Now I want to add a page listing my all time favorite books. Which HTML5 sectioning elements would you use for the "container" and which for each book? Should the MARQUEE placeholder and the BLINK placeholder be section or article?

The page could look like this:

<body>
  <h1>Books!</h1>

  <nav>
    <h1>Navigation</h1>
  </nav>

  <MARQUEE> <!-- section or article? -->
    <h1>My all time favorite books</h1>

      <BLINK> <!-- section or article? -->
        <h1><cite>The Hobbit, or There and Back Again</cite></h1>
        <p>…</p>
        <nav><a href="books/hobbit">see the page about "The Hobbit"</a></nav>
      </BLINK>

      <BLINK> <!-- section or article? -->
        <h1><cite>Alice's Adventures in Wonderland</cite></h1>
        <p>…</p>
        <nav><a href="books/alice">see the page about "Alice in Wonderland"</a></nav>
      </BLINK>

  </MARQUEE>

  <footer>☺ 2012 books.example.net</footer>
</body>

My thoughts

I think each listed book should be an article element. The spec says "a self-contained composition in a document", "in principle, independently distributable or reusable", "a blog entry, […] independent item of content". I think all these match here.

But what about the container? Should one use section or article? An article with nested article elements is the way blog comments should be marked up:

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.

The general definition reads:

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article.

"in principle related" seems to match my example, too, right?

The way I see it: This page about my favorite books is a "a self-contained composition". It's an article that I could print out and give someone to read and he would have all information he needs, it makes sense on its own, nothing is missing. Also, each favorite book is a "a self-contained composition", because I could print out only one of those favorite books and the reader would still have all relevant information (about that book), it makes sense on its own etc.

I'm interested if someone objects here?

For those who agree, my next question would be: does a listing of favorite books differ semantically from a listing of latest blog posts in terms of markup choice? So, would you say "okay, article for a list of favorite books is fine, but not for a list of latest blog posts?" The only difference I can see would be that most people would not be that interested in reading a list of snippets of latest blog posts, so it's not a "a self-contained composition" in a colloquial sense.

like image 246
unor Avatar asked Sep 17 '12 00:09

unor


2 Answers

Ideally you'd be using a list with articles inside it. Because it is, well, a list of your favorite books, is it not?

But personally, I use a section that contains articles. I wouldn't really consider a list to be comparable to an article, which is essentially what you have. If you were to expand it to include information about how you came up with the list, making it more into a blog post type of thing, then it would make more sense to be an article containing articles (and again, ideally, an article containing a list of articles).

In any event, using sections for each separate book you're linking makes no sense whatsoever.

like image 93
animuson Avatar answered Oct 07 '22 11:10

animuson


I'd have the entire content in an article, with each book in a section.

This would make it extremely consistent with the third section example given by the W3C

like image 25
millhouse Avatar answered Oct 07 '22 10:10

millhouse