Как правильно писать тег A?

Есть ссылка, которая должна быть иконочкой. Есть несколько вариантов писать:


1. В первом случае, генерируется картинка, которая не несет смысловой нагрузки. Если кто-то будет печатать страницу, или не доступен CSS, картинка — не самое лучшее. И, если у пользователя отключены картинки, он не увидит ничего (даже если alt прописать, из картинки 16x16 он ничего не поймет).
<a href="URL"><img src="/path/to/icon.png"></a>



2. Второй вариант: пустой тег. Через CSS устанавливаются размеры картинки, и через background сама картинка. По семантике, ИМХО, еще хуже, чем предыдущий вариант. Если отключены картинки — ничего не увидит, если отключен CSS — ничего не увидит.
<a href="URL"></a>


3. Похожий на второй, но используется fallback: текст, который скрывается CSS'ом. Решает проблему недоступности CSS, но если у пользователя не отображаются изображения, так же ничего не увидит.
<a href="URL">Icon text</a>


Как же лучше делать?
  • Вопрос задан
  • 5962 просмотра
Пригласить эксперта
Ответы на вопрос 5
spmbt
@spmbt
<a href="#"><img alt="[img]" title="текстовое описание на случай откл.изобр."
	style="width: 16px; height:16px; background-color: по_вкусу"/></a>

Если писать в бекграунде, он по умолчанию не печатается из браузера. (Отключение CSS — действительно такие читатели (не роботы) есть?)
Ответ написан
Stdit
@Stdit
Это неоднозначно, объясню подробнее:
Когда-то для порядка взял себе за правило: все изображения делятся на изображения дизайна и изображения контента. К первой категории относятся всевозможные уголки, рамки, бекграунды ссылок и кнопок и т.д. Ко второй категории относятся аватарки, скриншоты, фотки и прочий загруженный и/или модифицируемый контент. Так вот, первые должны быть заданы через CSS, а вторые — через IMG (как следствие, их можно сохранить кликом, задать им alt и т.д.). Ссылка может относиться к обоим категориям. Если это просто ссылка (например, share on twitter с птичкой), то вариант №2. Если же это ссылка (к примеру) на просмотр полного размера фотки, или на профиль пользователя, тогда только вариант №1. Вариант №3 полностью отпадает, потому что хаки и магия — это зло.
Ответ написан
antoo
@antoo
Смотрите как на хабрахабре:
image

Второй вариант ИМХО самый нормальный, вы видели хоть одного человека с отключенным CSS? Ладно еще Javascript, но без CSS — это вообще без верстки, ему и не нужна ваша иконка.
Ответ написан
2-ой вариант, т.к. не будет производиться загрузка иконки, если она не видна.
Ответ написан
MTonly
@MTonly
Веб-разработчик с 2002 года
<a href="#" title="Текст ссылки">Текст ссылки</a>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы