web-dev-qa-db-ja.com

画像とのリンク：背景と<img>

テキストを画像とともに使用して内部ページまたはカテゴリにリンクする場合のベストプラクティス（意味的に）とは何ですか？

オプション1

<nav>
    <a href="/kittens">
        <img src="kittens.png" />
        <span>Kittens</span>
    </a>
    <a href="/puppies">
        <img src="puppies.png" />
        <span>Puppies</span>
    </a>
</nav>

オプション2

<nav>
    <a href="/kittens" class="kittens">Kittens</a>
    <a href="/puppies" class="puppies"><span>Puppies</a>
</nav>

cSSが定義されている場所：

a.kittens {
    background-image:url("kittens.png");
    width:40px;
    height:60px;
}

a.puppies {
    background-image:url("puppies.png");
    width:40px;
    height:60px;
}

リンクにスタイル付きの背景を使用する必要がありますか、またはアンカー要素内で<img>を使用する必要がありますか？

linksimageshtml5
8
Petrus Theron

リンク内にテキストがあり、画像が単にリンクをサポートしているだけであれば、意味的にはoption twoの方が良いでしょう。

テキストがない場合は、オプション1-画像に適切なalt属性を指定すると、意味的に改善されます。

*編集*

アクセシビリティを向上させるため（同様ですが、セマンティックマークアップとは異なります）、両方のオプションのアンカー<a>要素にtitle属性を含めることもできます。

2
ajcw

presentationとcontentを別々に保つために、これらのタイプのシナリオではほとんど常に「オプション2」アプローチを使用します。

可能であれば、Webサイトの飾りや装飾をCSS内に保持することをお勧めします。 HTMLは、丸みを帯びた角やWebページの他の視覚的側面を追加するためではなく、コンテンツをマークアップするために使用する必要があります。子猫と子犬の画像がページに美学を追加しているだけの場合、CSSに画像を保持するのが方法です。

ただし、これが事実だとは思わないシナリオが少なくとも1つあります。画像ギャラリー。画像ギャラリーは、「オプション1」の優れた使用方法です。その場合、画像のサムネイルareがコンテンツであるためです。

1
Jacob Hume