Правильно ли использовать тег alt для якорной ссылки?


124

Правильно ли использовать тег alt для якорной ссылки, например

<a href="#" class="test" alt="Something" src="sfasfs" ></a>

Ответы:


130

На такие вопросы лучше всего ответить, посмотрев официальную спецификацию:

  1. перейти к спецификации: https://www.w3.org/TR/html5/

  2. поиск по запросу « aэлемент»: https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element

  3. отметьте «Атрибуты содержимого», в котором перечислены все разрешенные атрибуты для aэлемента:

    • Глобальные атрибуты
    • href
    • target
    • download
    • rel
    • hreflang
    • type
  4. проверьте связанные «Глобальные атрибуты»: https://www.w3.org/TR/html5/dom.html#global-attributes

Как вы увидите, altатрибут не разрешен для aэлемента.
Также вы заметите, что srcатрибут тоже не разрешен.

При проверке вашего HTML вам сообщается о подобных ошибках.


Обратите внимание, что приведенное выше относится к HTML5 , который является стандартом HTML W3C с 2014 года . В 2016 году HTML 5.1 стал следующим стандартом HTML . Поиск разрешенных атрибутов работает аналогичным образом. Вы увидите , что aэлемент может иметь другой атрибут в HTML 5.1: rev.

Вы можете найти все спецификации HTML (включая последний стандарт) на странице W3C's HTML Current Status .


2
Я не вижу titleатрибута в aглобальных атрибутах, правильно ли использовать такой titleатрибут в a?
Юсеф Альтаф

1
@YousefAltaf: На какой странице вы смотрите? Связанный, Глобальные атрибуты , перечисляет title.
unor

Я получил его, поэтому он указан в глобальных атрибутах, но влияет ли он на качество страницы, если я его использую или нет?
Юсеф Альтаф

@YousefAltaf: Это другой вопрос, который лучше не обсуждать здесь. См. Его определение . Если у вас все еще есть вопросы по этому поводу, не стесняйтесь создавать отдельный вопрос (но лучше поищите раньше, если он еще не был задан).
unor

4
Ответ помечен как «Как искать атрибуты HTML». Спасибо.
Codebling

59

Для якорей вы должны использовать заголовок. alt не является допустимым атрибутом. См. Http://w3schools.com/tags/tag_a.asp


@FabioPoloni Спасибо, я ожидал, что каждый сможет найти ссылку ниже на странице :-)
Tomis

Я подумал, что если кто-то мало что знает об этой теме, он не найдет ее ;-)
Фабио Полони

8
Эта информация в w3schools верна, но w3schools не является официальной и ненадежной, см. W3fools.com
Юкка К. Корпела

Спасибо, ребята ... кроме этого, мои потребности были основаны исключительно на стандартах доступности, а также на отрицании накладных расходов на производительность. Я использовал изображение spirte, в то же время хотел задать атрибут alt, чего нельзя было сделать с использованием фоновых изображений. Вместо этого у меня есть обходной путь, который помог ...
user2067736

1
"title", кстати, больше нет в w3schools. Но вы можете использовать заголовок, поскольку это глобальный атрибут: w3.org/TR/html5/dom.html#global-attributes
rosell.dk

28

"title" широко используется в браузерах. Пытаться:

<a href="#" title="hello">asf</a>

3
Вот как должен выглядеть ответ вместо 10-минутного ответа выше. Но в этом ответе также должна быть ссылка: w3schools.com/tags/att_global_title.asp
mikael1000

Я согласен с тем, что приведенное выше не отвечает на вопрос, однако в соответствии со titleспецификацией HTML5 неверно (хотя большинство браузеров реализуют это).
felwithe 01

6

Нет, altатрибут (это был бы атрибут, а не тег) не разрешен для aэлемента ни в какой спецификации или черновике HTML. И, похоже, ни один браузер не распознает это как имеющее значение.

Тогда это немного загадка, почему люди пытаются его использовать, но вероятное объяснение состоит в том, что они делают это по аналогии с altатрибутом для imgэлементов, ожидая увидеть «всплывающую подсказку» при наведении курсора мыши. В этом есть две ошибки. Во-первых, каждый элемент имеет свои собственные атрибуты, определенные в спецификациях для каждого элемента. Во-вторых, отображение altатрибутов «всплывающей подсказкой» в некоторых древних браузерах является / было причудой или даже ошибкой, а не чем-то ожидаемым; altатрибут должен быть представлен пользователю , если и только если само изображение не представлено, по какой - либо причине.

Чтобы создать «всплывающую подсказку», используйте titleвместо этого атрибут или, что еще лучше, Google для «всплывающих подсказок CSS» и используйте всплывающие подсказки на основе CSS по вашему выбору (их можно охарактеризовать как скрытые «слои», которые становятся видимыми при наведении курсора мыши).


Как использовать ссылки, созданные программно с помощью подсказок на основе CSS?
Сальвадор Валенсия

6

Вам следует использовать атрибут title для тегов привязки, если вы хотите применить описательную информацию так же, как и для атрибута alt. Атрибут title действителен для тегов привязки и не служит никакой другой цели, кроме предоставления информации о связанной странице.

W3C рекомендует, чтобы значение атрибута title совпадало со значением заголовка связанного документа, но это не обязательно.

http://www.w3.org/MarkUp/1995-archive/Elements/A.html


В качестве альтернативы, что, вероятно, будет более полезно, вы можете использовать атрибут доступности ARIA aria-label(не путать с aria-labeledby). aria-labelвыполняет ту же функцию, что и атрибут alt для изображений, но для элементов, не являющихся изображениями, и включает некоторую оптимизацию с момента вашей оптимизации для программ чтения с экрана.

http://www.w3.org/WAI/GL/wiki/Using_aria-label_to_provide_labels_for_objects


Если вы хотите описать тег привязки, обычно уместно использовать тег rel или rev, но вы ограничены конкретными значениями, их не следует использовать для удобочитаемых описаний.

Rel служит для описания отношения связанной страницы к текущей странице. (например, если связанная страница следующая в логическом ряду, это будет rel = next)

Атрибут rev по существу является обратной связью атрибута rel. Rev описывает отношение текущей страницы к связанной странице.

Вы можете найти список допустимых значений здесь: http://microformats.org/wiki/existing-rel-values


5

Я использовал название, и это сработало!

Атрибут title дает название ссылки. За одним исключением, это чисто рекомендательный характер. Значение - текст. Исключение составляют ссылки на таблицы стилей, где атрибут title определяет альтернативные наборы таблиц стилей.

<a class="navbar-brand" href="http://www.alberghierocastelnuovocilento.gov.it/sito/index.php" title="sito dell'Istituto Ancel Keys">A.K.</a>

1

Я удивлен, увидев все ответы, в которых указано, что использование altатрибута в aтеге недопустимо . Это абсолютно неверно.

Html не блокирует использование каких-либо атрибутов:

<a your-custom-attribute="value">Any attribute can be used</a>

Если вы спросите, правильно ли использовать altатрибут в семантически, aя отвечу:

NO. Используется для задания описания изображения <img alt="image description" />.

Вопрос в том, что вы будете делать с атрибутами. Вот пример:

a::after {
  content: attr(color); /* attr can be used as content */
  display: block;
  color: white;
  background-color: blue;
  background-color: attr(color); /* This won't work */
  display: none;
}
a:hover::after {
  display: block;
}
[hidden] {
  display: none;
}
<a href="#" color="red">Hover me!</a>
<a href="#" color="red" hidden>In some cases, it can be used to hide it!</a>

Опять же, если вы спросите, семантически правильно ли использовать настраиваемый атрибут, я скажу:

Нет. Используйте data-*атрибуты для его семантического использования.


Ой, вопрос был задан в 2013 году.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.