Связывание с изображением: Background vs <img>

8

Что считается лучшей практикой (семантически) при использовании текста с изображением для ссылки на внутреннюю страницу или категорию?

Опция 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>внутри элемента привязки?

links images html5

— Петрус Терон
источник

2

Если у вас есть текст в ссылке, а изображение просто поддерживает ссылку, семантически второй вариант будет лучше.

Если у вас нет текста, altсемантически лучший вариант - с соответствующим атрибутом на изображениях.

*редактировать*

Для улучшенной доступности (которая похожа, но отличается от семантической разметки), вы также хотели бы включить titleатрибуты в <a>элементах привязки в обе опции.

— ajcw
источник

1

Вариант два не имеет тега изображения для поддержки атрибута alt?

— Петрус Терон

@FreshCode Ой, неправильно опробовал варианты - спасибо!

— Ajcw

Не забывайте тег заголовка в обоих вариантах.

— Digital Essence,

1

Я почти всегда использую подход «Варианта 2» в этих типах сценариев, чтобы разделить презентацию и контент .

Хорошей практикой является сохранение любых излишеств или декоративных аспектов вашего веб-сайта в CSS, если это возможно. HTML должен использоваться для разметки контента, а не для добавления закругленных углов или других визуальных аспектов вашей веб-страницы. Если ваши изображения котят и щенков просто добавляют эстетику вашей странице, лучше всего сохранить изображения в CSS .

Есть, по крайней мере, один сценарий, в котором я не верю, что это так; галереи изображений. Галерея изображений будет отличным вариантом использования «Варианта 1», потому что в этом случае миниатюры изображений являются содержимым.

— Джейкоб Хьюм
источник