Menautkan dengan gambar: Latar belakang vs. <img>

8

Apa yang dianggap praktik terbaik (secara semantik) saat menggunakan teks dengan gambar untuk menautkan ke halaman atau kategori internal?

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

pilihan 2

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

tempat CSS didefinisikan:

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

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

Haruskah saya menggunakan latar belakang gaya untuk tautan, atau bagian <img>dalam elemen jangkar?

links images html5

— Petrus Theron
sumber

2

Jika Anda memiliki teks di dalam tautan dan gambar hanya mendukung tautan, secara semantik opsi dua akan lebih baik.

Jika Anda tidak memiliki teks, opsi satu - dengan altatribut yang sesuai pada gambar - akan secara semantik lebih baik.

* sunting *

Untuk peningkatan aksesibilitas (yang serupa, tetapi berbeda dengan mark-up semantik) Anda juga ingin menyertakan titleatribut pada <a>elemen jangkar di kedua opsi.

— ajcw
sumber

1

Opsi dua tidak memiliki tag gambar untuk mendukung atribut alt?

— Petrus Theron

@FreshCode Whoops, ada pilihan yang salah - terima kasih!

— ajcw

Jangan lupa tag judul pada kedua opsi.

— Digital Essence

1

Saya hampir selalu menggunakan pendekatan "Opsi 2" dalam jenis skenario ini, dalam upaya untuk memisahkan presentasi dan konten saya .

Ini praktik yang baik untuk menjaga embel-embel atau aspek dekoratif situs web Anda dalam CSS jika memungkinkan. HTML harus digunakan untuk menandai konten, dan bukan untuk menambahkan sudut bulat atau aspek visual lainnya dari halaman web Anda. Jika gambar anak kucing dan anak anjing Anda hanya menambahkan estetika ke halaman Anda, menjaga gambar dalam CSS Anda adalah cara untuk pergi .

Setidaknya ada satu skenario di mana saya tidak percaya ini yang terjadi; galeri gambar. Galeri gambar akan sangat baik digunakan "Opsi 1", karena dalam hal itu gambar mini adalah konten.

— Jacob Hume
sumber