Semantically labelling the author/creator of an object

Question

I have a page where the object (music album) is the main focus. Directly underneath the title of the album is the artist of the album. Semantically I'm debating what would be the most appropriate tag to give the artist.

My first inclination was to wrap the two in an <hgroup/> and provide a second level heading for the artist but in regards to overall prominence it places below other blocks on the page.

The second most important part of the page would be something like the tracklist, where its' title I believe would be more deserving of an </h2>. Is there anything against reversing the order of header tag if I were to wrap the artist inside an </h3>? Or possibly putting the author inside the <h1/>. Is there a tag better suited for this that I'm not thinking of?

Overall, in situations like this where there's an object followed by an author or creator what would be the best semantic approach (aside from providing meta-tags of course)?

<main>
  <hgroup>
    <h1>Album Name</h1>
    <h2>Artist</h3>
  </hgroup>

  <div>
    <h2>Tracklist</h2>
    ...
  </div>
</main>

Update:

In regards to reverse ordering, this post gives an in-depth answer to the situation. While it may not be the end of the world it does point out that it would work against the user in regards to accessibility. I guess that answers the first part of my question.

Answer 1

If you want marking up of music then its best to use microdata such as SCHEMA MusicAlbum. Also, not sure what guides your following but hgroup was deprecated eons ago!

A typical good example would look something like this:

<main itemscope itemtype="http://schema.org/MusicAlbum">
    <h1 itemprop="name">Album Name</h1>
    <meta content="album-cover.jpg" itemprop="url" />
    <img alt="album cover" src="album-cover.jpg" itemprop="image" />
    <meta content="8" itemprop="numTracks" />
    <meta content="Alt/Punk" itemprop="genre" />
    <h2 itemprop="byArtist" itemscope itemtype="http://schema.org/MusicGroup">
        <span itemprop="name">Artist/Band</span>
    </h2>
    <h3>List of Tracks</h3>
    <div itemprop="track" itemscope itemtype="http://schema.org/MusicRecording">
        <span itemprop="name">Track Name 1</span>
        <meta content="/track-name-1/" itemprop="url" />
        <meta content="PT5M14S" itemprop="duration" />5:14
    </div>
    <div itemprop="track" itemscope itemtype="http://schema.org/MusicRecording">
        <span itemprop="name">Track Name 2</span>
        <meta content="/track-name-2/" itemprop="url" />
        <meta content="PT4M40S" itemprop="duration" />4:40
    </div>

If you wanted a singular title then you can use span tags to your benefit, I can crunch the above code into something like this:

<main itemscope itemtype="http://schema.org/MusicAlbum">
    <h1>
        <span itemprop="byArtist" itemscope itemtype="http://schema.org/MusicGroup">
            <span itemprop="name">Artist</span>
        </span>
        <span itemprop="name">Album Name</span>
    </h1>
    <img alt="album cover" src="album-cover.jpg" itemprop="image" />
    <meta content="album-cover.jpg" itemprop="url" />
    <meta content="8" itemprop="numTracks" />
    <meta content="Alt/Punk" itemprop="genre" />
    <div itemprop="track" itemscope itemtype="http://schema.org/MusicRecording">
        <span itemprop="name">Track Name 1</span>
        <meta content="/track-name-1/" itemprop="url" />
        <meta content="PT5M14S" itemprop="duration" />5:14
    </div>
    <div itemprop="track" itemscope itemtype="http://schema.org/MusicRecording">
        <span itemprop="name">Track Name 2</span>
        <meta content="/track-name-2/" itemprop="url" />
        <meta content="PT4M40S" itemprop="duration" />4:40
    </div>
</main>

Meta content explained

Using meta content you can inform search engines about your content without visibly displaying it to your visitors. For example: <meta content="8" itemprop="numTracks" /> Uses itemprop="numTracks" which means this is the number of tracks, and the content is 8 therefore the album has 8 tracks... This should be self explanatory across all metas.

Answer 2

The hgroup element was removed from HTML5 before it became a W3C Recommendation. And without hgroup, you should not use a heading element for a subheading.

By using

<h1>Album Name</h1>
<h2>Artist</h2>

everything that follows would be in scope of the "Artist" heading, not the "Album Name" heading. But this would be wrong, of course.

Assuming that you publish this on a webpage that is part of a website (i.e., it contains a site-wide navigation etc.), you’ll want to use the article element for an album. The first heading will be the heading for that section, which should be the album name. Metadata for this section can be given in the header and footer elements.

So an album could look like:

<main>
<article>
  <header>
    <h2><!-- album --></h2>
    <p><!-- artist --></p>
  </header>

  <section>
    <h3>Tracklist</h3>
    <ol></ol>
  </section>

</article>
</main>

(If you don’t provide any other content for a music album, you could omit the explicit "Tracklist" section/heading and directly provide the ol as main content of that article.)

If you’d have more metadata (like release year, country, etc.), you could use a dl:

  <header>
    <h2><!-- album --></h2>
    <dl>
      <dt>Artist</dt> <dd><!-- artist --></dd>
      <dt>Release year</dt> <dd><!-- year --></dd>
    </dl>
  </header>

Side note: You could use the cite element for the album/artist/track names (example).