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

Question

[Kukunin]

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


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>


Как же лучше делать?

Answer 1

[spmbt]

<a href="#"><img alt="[img]" title="текстовое описание на случай откл.изобр."
	style="width: 16px; height:16px; background-color: по_вкусу"/></a>

Если писать в бекграунде, он по умолчанию не печатается из браузера. (Отключение CSS — действительно такие читатели (не роботы) есть?)

Answer 2

[Stdit]

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

Comments

[Владимир Чернышев]

Запутался:
«К первой категории относятся всевозможные уголки, рамки, бекграунды ссылок и кнопок и т.д.», «первые должны быть заданы через CSS», «Если же это ссылка (к примеру) на просмотр полного размера фотки, или на профиль пользователя, тогда только вариант №1»

«Ко второй категории относятся аватарки, скриншоты, фотки и прочий загруженный и/или модифицируемый контент.», «а вторые — через IMG (как следствие, их можно сохранить кликом, задать им alt и т.д.)», «Если это просто ссылка (например, share on twitter с птичкой), то вариант №2.»

Зачем предпросмотр фотки оформлять через CSS, а «птичку» через IMG? Кто-то будет скачивать птичку?

[Stdit]

Вы не поняли смысл, я наверное слишком запутал предолжения. Варианты с номером (№1, №2, №3) — это варианты, которые предоставил автор вопроса. А категории (первая — дизайн, вторая — ресурсы) — это те, о которых говорю я. Так вот, к первой категории — вариант №2, ко второй категории — вариант №1, а вариант №3 — в корзину.

[Kukunin]

Если посмотреть глобальнее, то вся задача HTML/CSS — разделить контент от оформления. HTML ничего не должен знать об оформленни. Один и тот же HTML должен хорошо показываться без CSS, с одним CSS или другим. Чтобы сделать тотальный редизайн, верстальщику нужно только изменить CSS. HTML должен быть самодостаточным.
Конечно, сейчас это утопия, не все можно сделать через один только CSS, некоторые вещи требуют правок в HTML, но развитие показывает, что этот момент наступит скоро.
Так вот, с точки зрения контента, пустотелая ссылка — фигня, поскольку она уже подразумевает под собой оформление (в виде иконки). HTML зависим от конкретного набора правил. А если в другом дизайне будет не иконка, а текст? Придется затачивать HTML под другой дизайн? А это уже нарушение первостепенной цели HTML/CSS — разделить контент от логики.
P.S. Все это семантика, которая на практике не очень важна, но мне приятно все делать по уму, вот и спросил, как лучше.

[Stdit]

Насчёт самодостаточности html — слишком идеализованный случай. Вы представляете себе, что используете хабр без CSS и из-за этого не видите ссылку «share on twitter»? Мешает ли хабру эта невозможность? Стоит ли жертвовать гибкостью CSS, запиливая эти ссылки в виде IMG?

[Kukunin]

Запиливать ссылки через IMG тоже никто не собирается. Но приятно, если вместо пустого места был бы текст «Share on Twitter». С точки зрения семантики — так правильно. Но, увы, я не вижу способов этого достичь сейчас. Элементарный пример: все данные примеры рушатся, если у пользователя отключены картинки. Просто либо прозрачные квадраты, либо обрезок Alt или Fallback текста

Answer 3

[antoo]

Смотрите как на хабрахабре:


Второй вариант ИМХО самый нормальный, вы видели хоть одного человека с отключенным CSS? Ладно еще Javascript, но без CSS — это вообще без верстки, ему и не нужна ваша иконка.

Comments

[antoo]

Если у пользователя отключены изображения, то не надо их показывать. Вообще не надо. Это логично.

[Kukunin]

Но тогда он вобще ничего не увидит. прозрачный квадратик, на который «случайно» наведет мышкой

[Stdit]

Только если иконочка не является контентом, как например аватарка:

Answer 4

[Виталий Желтяков]

2-ой вариант, т.к. не будет производиться загрузка иконки, если она не видна.

Answer 5

[MT]

<a href="#" title="Текст ссылки">Текст ссылки</a>