HTML5 semantic element of a playlist web app

Question

For a music web app we are creating I would like some help with the semantic structuring of all the elements involved.

A playlist consists of a title, tags and the songs.

I attached an image of how I think it should be divided. Is this correct?

< main >

< header >
< h1 >Playlist title< / h1 >
< section > playlist tags < / section>
< / header >

< section >

< article >
< h2 > song title < / h2>
< time >today< / time >
< menu > add to playlist etc. < / menu >
< / article >

< article >
< h2 > song title 2< / h2>
< time >today< / time >
< menu > add to playlist etc. < / menu >
< / article >

< / section >
< / main >

Should a music playlist be structured like this? Thanks for the help :).

Answer 1

I wouldn’t use a sectioning element for the playlist tags, as I don’t think they "deserve" an own entry in the document outline.

Instead of the list of the tracks only, the whole playlist including the header should be in a sectioning element. If you think the playlist is content that can stand on its own (e.g., a curated playlist), article might be appropriate, otherwise section.

The markup for a single track looks fine, apart from the menu element, which is no longer part of HTML5 (it’s still in HTML 5.1). And you are not using the time element correctly, as "today" is not a valid value.

You might want to use a list, but it’s not really needed, so it can be omitted.

<main>

   <article>

     <header>
       <h1>Playlist title</h1>
       <div>playlist tags</div>
     </header>

     <ul>
       <li><article><!-- track 1 --></article></li>
       <li><article><!-- track 2 --></article></li>
     </ul>

   </article>

</main>

If you want to semantically annotate your content with Microdata and/or RDFa, have a look at Schema.org’s MusicPlaylist type.