Допустим ли пустой href?

179

Один из наших веб-разработчиков использует следующий HTML-код в качестве заполнителя для стилизации выпадающего списка.

<a href="" class="arrow"></a>

Является ли этот тег привязкой действительным?

Поскольку значение href отсутствует, оно отображается как неработающее в некоторых наших отчетах о проверке ссылок.

html href

— Мэтью
источник

10

Это не работает в IE, хотя! Ну, это работает в IE, но с совершенно другим поведением, против спецификации. Так что это действует в соответствии со спецификацией, но не на практике: (((

— ZhongYu

Расширяя сказанное bayou.io, IE ссылается на каталог над документом: stackoverflow.com/questions/7966791/…

— конец

1

Да, пустой href в более старых версиях IE (7/8 и т. Д.) Может иметь плохие последствия, такие как список каталогов. Есть много задокументированных по этому вопросу, если вы гуглите это

— Ринго

например: gtmetrix.com/avoid-empty-src-or-href.html . Не берите в голову только старые браузеры, это затрагивает текущие браузеры IE, Edge, а также Webkit.

— Ринго

60

Хотя на этот вопрос уже дан ответ ( tl; dr: yes, пустое hrefзначение допустимо), ни один из существующих ответов не ссылается на соответствующие спецификации.

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

HTML 4.01

HTML 4.01 использует RFC 2396 , где говорится в разделе 4.2. Ссылки на тот же документ (жирный шрифт):

Ссылка URI, которая не содержит URI, является ссылкой на текущий документ. Другими словами, пустая ссылка URI в документе интерпретируется как ссылка на начало этого документа , а ссылка, содержащая только идентификатор фрагмента, является ссылкой на идентифицированный фрагмент этого документа.

RFC 2396 устарел в RFC 3986 (который в настоящее время является стандартом URI IETF ), что по сути говорит то же самое .

HTML5

HTML5 использует ( действительный URL-адрес, возможно, окруженный пробелами → действительный URL-адрес ) спецификации URL- адреса W3C , которая была прекращена. Вместо этого следует использовать стандарт URL-адреса WHATWG (см. Последний раздел).

HTML 5.1

HTML 5.1 использует ( действительный URL-адрес, возможно, окруженный пробелами → действительный URL-адрес ) стандарта URL WHATWG (см. Следующий раздел).

WHATWG HTML

HTML-код WHATWG использует ( действительный URL-адрес, возможно, окруженный пробелами ) определение допустимой строки URL-адреса из стандарта URL-адреса WHATWG , в котором говорится, что это может быть строка относительного URL-адреса с фрагментом , которая должна по крайней мере быть строкой относительного URL-адреса , которая может быть строкой путь-относительная схема-меньше-URL , которая является строкой путь-относительный-URL , которая не начинается со строки схемы, за которой следует :, и ее определение гласит (выделено жирным шрифтом мое):

Строка относительного-пути-URL-адреса должна содержать ноль или более строк сегмента-пути-URL, отделенных друг от друга U + 002F (/), и не должна начинаться с U + 002F (/).

— ОООНР
источник

185

Это действительно.

Тем не менее, стандартной практикой является использование href="#"или иногда href="javascript:;".

— SLaks
источник

23

Как указано в RFC 2396: ссылка на URI, которая не содержит URI, является ссылкой на текущий документ. Другими словами, пустая ссылка на URI в документе интерпретируется как ссылка на начало этого документа,

— октября

32

когда я нажимаю href="#", фокус перемещается к началу страницы в IE, так что я thkink href="javascript:;"лучше

— Декард

32

href = "#" - это анти-шаблон. Он добавляет дополнительную запись в историю браузера и в некоторых случаях заставляет браузер прокручиваться вверх, вы можете просто пропустить атрибут href, если вы его не используете. по умолчанию он будет "" и, следовательно, перезагрузит страницу, если это не будет предотвращено.

— Тоши

16

@tosh, нет, я уверен, что если вы пропустите атрибут href, элемент <a> не будет стилизован как ссылка, не будет фокусироваться и не создаст ссылку как <a href = "" > или <a href> делает. Если это работает для вас, не могли бы вы поделиться JSFiddle, показывая это?

— Ги Пра

6

@ Тош, ты знаешь, что смешного? Очевидно, начиная с HTML5, пропуск атрибута должен работать таким образом, см. W3.org/TR/html5/text-level-semantics.html#the-a-element (Спасибо halfdan за отправку этого ответа ниже.) Видимо, это не было реализовано вендорами, и поскольку это все еще всего лишь рекомендация кандидата, трудно сказать, будет ли он сохранен в окончательном стандарте или поставщики будут соответствовать этому.

— Gui Prá

115

Как уже говорили другие, это действительно.

Однако у каждого подхода есть свои недостатки:

href="#" добавляет дополнительную запись в историю браузера (что раздражает, например, при нажатии на кнопку).

href="" перезагружает страницу

href="javascript:;" Кажется, нет никаких проблем (кроме как выглядеть беспорядочно и бессмысленно) - кто-нибудь знает что-нибудь?

— UpTheCreek
источник

22

Другим интересным является href = "//: 0", который не будет отправлять запросы на сервер и не оставлять историю.

— diachedelic

2

Символ //: 0 не позволяет загрузить некоторые из моих изображений в Chrome. Кажется, Chrome интерпретирует это как получение команды отмены.

— Дэвид Гренье

5

HREF: "JavaScript :;" было только то , что мне нужно было сделать вещи работать в обоих Android webviews IOS

— dumazy

2

IE ссылается на каталог над документом: stackoverflow.com/questions/7966791/…

— конец

1

Я не проверял это, но подозреваю, что href = "javascript :;" нарушит Политику безопасности контента, которая запрещает встроенный JavaScript. Если вы собираетесь включить эту политику, я бы использовал одну из альтернатив.

— Марк Хороший

60

Хотя HTML может быть полностью допустимым, если он не содержит href, особенно с обработчиком onclick, есть некоторые моменты, на которые следует обратить внимание: он не будет ориентирован на клавиатуру без установленного значения tabindex. Кроме того, это будет недоступно программному обеспечению для чтения с экрана, использующему Internet Explorer, поскольку IE будет сообщать через интерфейсы доступности, что любой элемент привязки без атрибута href не может быть сфокусирован, независимо от того, был ли установлен tabindex.

Так что пока следующее может быть полностью действительным:

<a class="arrow">Link content</a>

Гораздо лучше явно добавить атрибут href с нулевым эффектом

<a href="javascript:void(0);" class="arrow">Link content</a>

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

<a href="javascript:void(0);" class="arrow" title="Go to linked content">Link content</a>

— Ник
источник

1

Спасибо за упоминание о том, что пропуск hrefбудет мешать интерфейсам доступности.

— Даниэль Соколовский

1

Я также добавил бы - с точки зрения доступности - что установка hrefзначения на что-либо кроме относительного / абсолютного пути вызовет проблемы чтения с экрана. Избегайте использования символа хеш / фунт в качестве обходного пути для этой проблемы, поскольку он не предназначен для этого. Программы чтения с экрана могут (в настоящее время VoiceOver делает) объявить, что ваша ссылка является идентификатором фрагмента (ссылка на где-то на текущей странице), а также действительна с точки зрения стандартов. см. w3.org/2001/tag/2011/01/HashInURI-20110115#NakedHash

— Мишель Эбер

27

Текущий проект HTML5 также позволяет полностью пропустить атрибут href.

Если элемент a не имеет атрибута href, то этот элемент представляет собой заполнитель для того места, где в противном случае могла бы быть размещена ссылка, если бы она была релевантной.

Чтобы ответить на ваш вопрос: да, это действительно.

— Хафдан
источник

6

да, НО - <a>элемент без hrefстилизован в некоторых браузерах. Например, стили ": hover" не работают в Chrome (и других странных вещах)

— Алекс,

<a>Тег без hrefпредставляет что - то другое , а не ссылка (традиционно якорь). Кроме того, существует разница между необязательным атрибутом и атрибутом, который может быть пустым.

— Коби

19

В самом деле, вы можете оставить его пустым (валидатор W3 не жалуется).

Идем к идее на шаг впереди: опускаем = "". Преимущество этого состоит в том, что ссылка не рассматривается как привязка к текущей странице.

<a href>sth</a>

— anroots
источник

Хотя: <a href></a>→ Атрибут href без видимого значения. Атрибут может быть удален IE7.

— c24w

1

Мне тоже нравится это решение. Знаете ли вы о каких-либо других недостатках, кроме поведения IE7?

— rinat.io

Это незаконный синтаксис. Согласно спецификации «Синтаксис [Пустой атрибут] разрешен только для логических атрибутов».

— Роберт Симер

9

Хотя валидатор W3 может не жаловаться на пустой hrefатрибут, текущий рабочий документ HTML5 определяет:

hrefАтрибут aи areaэлементов должен иметь значение , которое является допустимым URL потенциально окружен пробелами.

Действительный URL является URL , который соответствует URL стандарта . Теперь стандарт URL немного сбивает с толку, но он нигде не утверждает, что URL может быть пустой строкой.

... что означает, что пустая строка не является допустимым URL.

Однако в рабочем проекте HTML5 говорится:

Примечание . hrefАтрибут on aи areaelements не требуется ; когда эти элементы не имеют hrefатрибутов, они не создают гиперссылки.

Это означает, что мы можем просто полностью пропустить hrefатрибут:

<a class="arrow"></a>

Если вы хотите, чтобы эти элементы hrefбез aэлементов все еще требовали взаимодействия с клавиатурой, вам придется пойти по обычному пути назначения roleи tabindexнаряду с обычными обработчиками нажатия / нажатия клавиш:

<a class="arrow" role="button" tab-index="0"></a>

— Джеймс Доннелли
источник

На самом деле. К сожалению, как вы указали, отключение hrefделает его не гиперссылкой, что делает onclickфункциональность недоступной для пользователей клавиатуры.

— Aij

7

Слово предостережения:

По моему опыту, пропуск hrefатрибута создает проблемы для доступности, так как навигация с помощью клавиатуры будет игнорировать его и никогда не выделять его, как при наличии href. Ручное включение вашего элемента в tabindex - способ обойти это.

— Джейсон
источник

3

это действительно так, но, как сказал UpTheCreek, «у каждого подхода есть свои недостатки»

если вы вызываете ajax с помощью тега, оставьте href = "", так как это сохранит перезагрузку страницы, и код ajax никогда не будет вызываться ...

только что получил эту мысль было бы хорошо поделиться

— Рэй Цай
источник

2

Попробуйте сделать <a href="#" class="arrow">вместо этого. (Обратите внимание на острый #характер).

— elvenbyte
источник