Чи дійсний порожній href?

179

Один з наших веб-розробників використовує наступний HTML як заповнювач для стилізації списку.

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

Чи вважається цей тег прив’язки дійсним?

Оскільки значення href відсутнє, воно відображається як порушене у деяких звітах наших перевірок посилань.

html href

— matthew
джерело

10

Це не працює в IE, хоча! Добре це працює в IE, але з зовсім іншою поведінкою, проти специфікації. Отже, це дійсно за специфікацією, але не на практиці: (((

— ZhongYu

Розкриваючи те, що сказав bayou.io, IE посилається на каталог над документом: stackoverflow.com/questions/7966791/…

— Nate

1

Так, порожній href у старих версіях IE (7/8 та ін.) Може мати погані наслідки, такі як перелік каталогів. На цю тему багато документально підтверджено, якщо ви її

— гуглите

наприклад: gtmetrix.com/avoid-empty-src-or-href.html . Не забувайте лише про старі браузери, це впливає на поточні IE, Edge, а також на веб-браузери Webkit.

— Рінго

60

Хоча на це питання вже відповіли ( tl; dr: так, порожнє 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 (/).

— unor
джерело

184

Це дійсно.

Однак стандартною практикою є використання 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, що його показує?

— Gui Prá

6

@tosh, ти знаєш, що смішного? Мабуть, оскільки HTML5, опускаючи атрибут повинен працювати таким чином, див. W3.org/TR/html5/text-level-semantics.html#the-a-element (спасибі напівдан за подання цієї відповіді нижче.) Мабуть, це не було впроваджені постачальниками ще, і оскільки це все ще лише рекомендація кандидата, важко сказати, чи буде він зберігатися в остаточному стандарті чи чи будуть до цього постачальники відповідати.

— Gui Prá

115

Як казали інші, це дійсно.

Однак у кожного підходу є деякі недоліки:

href="#" додає додатковий запис до історії веб-переглядача (що дратує, коли, наприклад, застебнення назад).

href="" перезавантажує сторінку

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

— UpTheCreek
джерело

22

Ще один цікавий - href = "//: 0", який не зробить запит на сервер і не залишить історії.

— діахеделік

2

//: 0 робить, що деякі мої зображення не завантажуються в Chrome. Здається, Chrome інтерпретує це як отримання команди скасування.

— Девід Греньє

5

href: "javascript:;" було саме те, що мені потрібно було працювати в обох веб-переглядах Android i iOS

— dumazy

2

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

— Nate

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 для візуалізації зображення, вам слід також включити деякий текстовий вміст, наприклад, атрибут заголовка, щоб надати текстовий опис того, що відбувається.

<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.

Якщо в елементі немає атрибута href, то елемент являє собою заповнювач місця, де інше могло б бути розміщене посилання, якби воно було доречним.

Щоб відповісти на ваше запитання: Так, це дійсно.

— півдан
джерело

6

так, АЛЕ - <a>елемент з no hrefстильно стилізований у деяких браузерах. Наприклад, стилі ": hover" не працюють у Chrome (та інших дивних речах)

— Alex

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

— Кобі

19

Дійсно, ви можете залишити його порожнім (валідатор W3 не скаржиться).

Зробивши ідею ще на крок: залиште = "". Перевагою цього є те, що посилання не розглядається як прив'язка до поточної сторінки.

<a href>sth</a>

— anroots
джерело

Хоча: <a href></a>→ Атрибутувати href без явного значення. Атрибут може бути скинутий IE7.

— c24w

1

Мені також подобається це рішення. Чи знаєте ви якісь інші недоліки, крім поведінки IE7?

— rinat.io

Це незаконний синтаксис. Відповідно до специфікації "[Empty Attribute] синтаксис дозволений лише для булевих атрибутів."

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

9

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

hrefАтрибут aта areaелементів повинен мати значення , яке є допустимим URL потенційно оточений пробілами.

Дійсний URL є URL , який відповідає URL стандарту . Тепер URL Standard трохи заплутаний, щоб обернутися головою, однак ніде не зазначено, що URL-адреса може бути порожньою рядком.

... що означає, що порожній рядок не є дійсною URL-адресою.

Однак робочий проект HTML5 продовжує стверджувати:

Примітка: атрибут і елементів не потрібно ; коли ці елементи не мають атрибутів, вони не створюють гіперпосилання.hrefaareahref

Це означає, що ми можемо просто опустити hrefатрибут:

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

Якщо ваше намір полягає в тому , що ці href-Менше aелементи повинні по- , як і раніше вимагають клавіатури interraction, вам доведеться йти вниз по звичайному маршруту присвоєння roleі tabindexразом з вашими звичайної кнопкою миші / KeyDown оброблювачів:

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

— Джеймс Доннеллі
джерело

Справді. На жаль, як ви цитували, відключення hrefробить це не гіперпосиланням, що робить onclickфункціональні можливості недоступними для користувачів клавіатури.

— аїй

7

Слово обережності:

На мій досвід, пропуск hrefатрибута спричиняє проблеми з доступністю, оскільки навігація на клавіатурі буде ігнорувати його і ніколи не надаватиме йому фокус так, як буде, коли є href. Ручне включення вашого елемента в tabindex - це спосіб подолати це.

— Джейсон
джерело

3

це дійсно, але як сказав UpTheCreek: "У кожного підходу є деякі недоліки"

якщо ви телефонуєте ajax через тег, залиште href = "", так як це призведе до повторного завантаження сторінки, а код ajax ніколи не буде викликаний ...

щойно отримав цю думку, було б добре поділитися

— Рей Цай
джерело

2

Спробуйте зробити <a href="#" class="arrow">замість цього. (Зверніть увагу на різкий #символ).

— ельвенбайт
джерело