1

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.

2

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.

  • Sorry. That's what I meant when in my closing question when I referred to providing meta-tags? I updated my question with the SCHEMA tags but am wondering is there anything I can do to further better the page? Is one better than the other as far as headings and meta-tags? – Carl Edwards Sep 14 '15 at 16:15
  • Updated my answer. – Simon Hayter Sep 14 '15 at 16:15
  • Thanks! What does the content attribute and value represent inside of your meta tags? So far I couldn't find anything online that explains it. – Carl Edwards Sep 14 '15 at 16:18
  • Updated yet again... – Simon Hayter Sep 14 '15 at 16:22
  • Marking this as correct as it's exactly what I'm looking for. Also +1 for providing such a detailed answer. Thanks again! – Carl Edwards Sep 14 '15 at 16:25
0

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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.