: Semantically labelling the author/creator of an object 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.

@Ann8826881

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

Vote Up Vote Down

@Turnbaugh106

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.

Vote Up Vote Down