web-dev-qa-db-ja.com

オブジェクトの作成者/作成者に意味的にラベルを付ける

私は、オブジェクト（music album）が主な焦点であるページを持っています。アルバムのタイトルの真下には、アルバムのartistがあります。意味的には、アーティストに与える最も適切なタグは何かを議論しています。

私の最初の傾向は、2つを<hgroup/>でラップし、アーティストに第2レベルの見出しを提供することでした。

ページの2番目に重要な部分はトラックリストのようなもので、そのタイトルは</h2>にふさわしいと思います。アーティストを</h3>でラップする場合、ヘッダータグの順序を逆にすることに対して何かありますか？または、おそらく<h1/>内に作成者を配置します。私が考えていない、これにより適したタグはありますか？

全体として、著者や作成者が後に続くオブジェクトが存在するような状況では、（もちろんメタタグを提供することを除いて）最良の意味論的アプローチは何でしょうか？

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

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

更新：

逆の順序付けに関して、この post は状況に対する詳細な答えを与えます。それは世界の終わりではないかもしれませんが、アクセシビリティに関してユーザーに対して機能することを指摘しています。これが私の質問の最初の部分に答えていると思います。

seohtmlheadingsemantic-webauthor
1
Carl Edwards

音楽のマークアップが必要な場合は、 SCHEMA MusicAlbum などのマイクロデータを使用するのが最善です。また、何があなたのフォローを導くのか分かりませんが、 hgroupは廃止されました 何年も前です！

典型的な良い例は次のようになります。

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

単数形のタイトルが必要な場合は、spanタグを使用して利益を得ることができます。上記のコードを次のように圧縮できます。

<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="8" itemprop="numTracks" />はitemprop = "numTracks"を使用します。これはトラックの数であり、コンテンツが8であるため、アルバムには8トラックがあります...これはすべてのメタにわたって自明です。

2
Simon Hayter

hgroup要素は削除されました HTML5からW3C勧告になりました。また、hgroupがない場合、小見出しに見出し要素を使用しないでください。

を使用して

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

以降のすべては、「アルバム名」という見出しではなく、「アーティスト」という見出しの範囲内にあります。しかし、これはもちろん間違っています。

これをWebサイトの一部であるWebページ（つまり、サイト全体のナビゲーションなどを含む）で公開すると仮定すると、アルバムのarticle要素を使用する必要があります。最初の見出しはそのセクションの見出しになり、アルバム名になります。このセクションのメタデータは、headerおよびfooter要素で指定できます。

したがって、アルバムは次のようになります。

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

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

</article>
</main>

（音楽アルバムに他のコンテンツを提供しない場合は、明示的な「トラックリスト」セクション/見出しを省略し、olをそのarticleのメインコンテンツとして直接提供できます。）

より多くのメタデータ（リリース年、国など）がある場合は、dlを使用できます。

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

サイドノート：アルバム/アーティスト/トラック名に cite要素 を使用できます（ example ）。

0
unor