web-dev-qa-db-fra.com

Étiqueter sémantiquement l'auteur / créateur d'un objet

J'ai une page où l'objet ( album de musique ) est le focus principal. Directement sous le titre de l'album se trouve l'artiste de l'album. Sémantiquement, je discute de ce qui serait la balise la plus appropriée à donner à l'artiste.

Mon premier souhait était de faire en sorte que les deux soient placés dans un <hgroup/> et de fournir un titre de second niveau à l’artiste, mais en ce qui concerne la notoriété générale, il place en dessous des autres blocs de la page.

La deuxième partie la plus importante de la page serait quelque chose comme la tracklist, où son titre serait plus digne d'un </h2>. Y a-t-il quelque chose qui cloche dans le sens d'une inversion de l'ordre des balises d'en-tête si je dois envelopper l'artiste dans un </h3>? Ou éventuellement en plaçant l'auteur dans le <h1/>. Existe-t-il un tag plus adapté à cela auquel je ne pense pas?

Globalement, dans des situations comme celle-ci où un auteur ou un créateur a suivi un objet, quelle serait la meilleure approche sémantique (hormis la fourniture de méta-tags bien sûr)?

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

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

Mise à jour:

En ce qui concerne l'ordre inverse, ceci post donne une réponse détaillée à la situation. Même si ce n'est peut-être pas la fin du monde, cela indique que cela nuirait à l'utilisateur en termes d'accessibilité. Je suppose que cela répond à la première partie de ma question.

seohtmlheadingsemantic-webauthor
1
Carl Edwards

Si vous souhaitez baliser de la musique, il est préférable d’utiliser des microdonnées telles que SCHEMA MusicAlbum . En outre, vous ne savez pas ce qui guide votre suivi, mais hgroup est obsolète il y a bien longtemps!

Un bon exemple typique ressemblerait à ceci:

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

Si vous vouliez un titre unique, vous pouvez utiliser les balises span à votre avantage, je peux utiliser le code ci-dessus comme suit:

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

Méta contenu expliqué

À l'aide de méta-contenu, vous pouvez informer les moteurs de recherche de votre contenu sans l'afficher de manière visible à vos visiteurs. Par exemple: <meta content="8" itemprop="numTracks" /> Utilise itemprop = "numTracks", ce qui signifie qu'il s'agit du nombre de pistes et que le contenu est de 8; l'album contient donc 8 pistes ... Cela devrait être explicite pour toutes les méta.

2
Simon Hayter

L’élément hgroup a été supprimé de HTML5 avant de devenir une recommandation du W3C. Et sans hgroup, vous ne devriez pas utiliser d'élément d'en-tête pour un sous-titre.

En utilisant

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

tout ce qui suit sera dans la portée de la rubrique "Artiste", pas dans la rubrique "Nom de l'album". Mais ce serait faux, bien sûr.

En supposant que vous publiez ceci sur une page Web faisant partie d’un site Web (c’est-à-dire qu’elle contient une navigation sur l’ensemble du site, etc.), vous voudrez utiliser l’élément article pour un album. Le premier en-tête sera l'en-tête de cette section, qui devrait être le nom de l'album. Les métadonnées de cette section peuvent être données dans les éléments header et footer.

Donc, un album pourrait ressembler à:

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

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

</article>
</main>

(Si vous ne fournissez aucun autre contenu pour un album musical, vous pouvez omettre la section/rubrique explicite "Tracklist" et fournir directement le ol comme contenu principal de cet article.)

Si vous avez plus de métadonnées (année de publication, pays, etc.), vous pouvez utiliser un dl:

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

Note latérale: Vous pouvez utiliser l'élément cite pour les noms d'album/artiste/plage ( exemple ).

0
unor