Что такое href = "#" и почему оно используется?

Question

На многих сайтах я вижу ссылки, которые имеют href="#".Что это значит?Для чего он используется?

Answer 1

О гиперссылках:

Основное использование тегов привязки - <a></a> - это гиперссылки . Это в основном означает, что они куда-то вас заберут. Для гиперссылок требуется свойство href, поскольку оно указывает местоположение.

Hash:

Хеш - # в гиперссылке указывает идентификатор элемента html, к которому следует прокручивать окно.

href="#some-id" прокручивает до элемента на текущей странице, такого как <div id="some-id">.

href="//site.com/#some-id" перейдет на site.com и выделит идентификатор на этой странице.

Прокрутить вверх:

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

См. Эту демонстрацию.

Это ожидаемое поведение согласно документации w3.

Заполнители гиперссылки:

Пример, где заполнитель гиперссылки имеет смысл, находится в предварительном просмотре шаблона. На одностраничных демонстрационных шаблонах я часто видел <a href="#">, так что тег привязки является гиперссылкой, но никуда не денется. Почему бы не оставить свойство href пустым? Пустое свойство href на самом деле является гиперссылкой на текущую страницу. Другими словами, это приведет к обновлению страницы. Как я уже говорил, href="#" также является гиперссылкой и вызывает прокрутку. Следовательно, лучшим решением для заполнителей гиперссылок на самом деле является href="#!" Идея состоит в том, что, надеюсь, на странице нет элемента с id="!" (кто это делает !?), и поэтому гиперссылка ни на что не ссылается - так что ничего не происходит .

О тегах привязки:

Другой вопрос, который может вас удивить: «Почему бы просто не оставить свойство href выключенным?». Обычно я слышал, что свойство href является обязательным, поэтому оно должно присутствовать на якорях. Это ЛОЖЬ! Свойство href требуется только для того, чтобы якорь действительно был гиперссылкой! Прочитайте это из w3 . Итак, почему бы просто не оставить это для заполнителей? Браузеры отображают стили по умолчанию для элементов и изменяют стиль по умолчанию для тега привязки, который не имеет свойства href. Вместо этого он будет рассматриваться как обычный текст. Это даже меняет поведение браузера относительно элемента. Строка состояния (внизу экрана) не будет отображаться при наведении курсора на якорь без свойства href. Лучше всего использовать значение метки-заполнителя для привязки, чтобы убедиться, что оно рассматривается как гиперссылка.

См. Эту демонстрацию , демонстрирующую различия в стиле и поведении.

Answer 2

Если поставить символ «#» в качестве ссылки на что-то, это означает, что оно указывает не на другой URL-адрес, а на другой идентификатор или тег имени на той же странице. Например:

<a href="#bottomOfPage">Click to go to the bottom of the page</a>
blah blah
blah blah
...
<a id="bottomOfPage"></a>

Однако, если нет идентификатора или имени, тогда оно идет "не где".

Вот еще один похожий вопрос HTML-якоря с именем или идентификатором?

Answer 3

Это ссылка, которая по сути ссылается на никуда (она просто добавляет «#» в URL).Он используется по ряду разных причин.Например, если вы используете какой-то JavaScript / jQuery и не хотите, чтобы фактический HTML-код ссылался где-либо.

Он также используется для привязок страниц, которые используются для перенаправления в другую частьстр.

Answer 4

Неупорядоченные списки часто создаются с целью использования их в качестве меню, но элемент списка li представляет собой текст. Поскольку элемент списка li является текстовым, указатель мыши будет не стрелкой, а «курсором I». Пользователи привыкли видеть указательный палец для указателя мыши, когда что-то нажимается. Использование тега привязки a внутри тега li приводит к изменению указателя мыши на указательный палец. Указательный палец намного удобнее использовать в виде списка.

<ul id="menu">
   <li><a href="#">Menu Item 1</a></li>
   <li><a href="#">Menu Item 2</a></li>
   <li><a href="#">Menu Item 3</a></li>
   <li><a href="#">Menu Item 4</a></li>
</ul>

Если список используется для меню и ему не нужна ссылка, то URL-адрес не нужно указывать. Но проблема в том, что если вы пропустите атрибут href, текст в теге <a> будет виден как текст, и, следовательно, указатель мыши вернется к I-курсору. I-курсор может заставить пользователя думать, что пункт меню не активен. Следовательно, вам все еще нужен href, но вам нигде не нужна ссылка.

Вы можете использовать множество тегов div или p для списка меню, но указатель мыши также будет для них I-курсором.

Вы можете использовать множество кнопок, расположенных друг над другом, для списка меню, но этот список представляется предпочтительным. И, вероятно, именно поэтому href="#", который указывает на нигде, используется в тегах привязки внутри тегов списка.

Вы можете установить стиль указателя в CSS, так что это еще один вариант. href="#" в никуда может быть просто ленивым способом установить стиль.

Answer 5

К сожалению, наиболее распространенное использование <a href="#"> - это ленивые программисты, которым нужны кликабельные не гиперссылочные элементы в кодировке javascript, которые ведут себя как якоря, но их нельзя заставить добавить стили cursor: pointer; или :hoverкласс для их не гиперссылочных элементов, и, кроме того, они слишком ленивы, чтобы установить href в javascript:void(0);.

. Проблема в том, что один <a href="#" onclick="some_function();"> или другой неизбежно заканчиваются ошибкой JavaScript,и якорь с ошибкой javascript onclick всегда заканчивается после его href.Обычно это приводит к раздражающему переходу наверх страницы, но в случае сайтов, использующих <base>, <a href="#"> обрабатывается как <a href="[base href]/#">, что приводит к неожиданной навигации. Если генерируются какие-либо регистрируемые ошибки, вы не увидите их в последнем случае, если не включите постоянные журналы.

Если элемент привязки используется какбез привязки должен иметь href, установленный на javascript:void(0); ради изящного ухудшения.

Я просто потратил два дня на отладку случайной неожиданной страницыперенаправление, которое должно было просто обновить страницу и, наконец, отследить ее до функции, вызывающей событие click <a href="#">.Замена # на javascript:void(0); исправила его.

Первое, что я делаю в понедельник, это очистка проекта от всех экземпляров <a href="#">.

Answer 6

Насколько я знаю, это обычно заполнитель для ссылок, к которым прикреплен JavaScript.Основным пунктом ссылки является выполнение кода JavaScript;браузеры с поддержкой JS игнорируют реальную цель ссылки.Если браузер не поддерживает JS, хеш-метка по существу превращает ссылку в запретную операцию.Смотрите также ненавязчивый JavaScript .

Answer 7

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

<a href="javascript:void(0)">Goes Nowhere</a>

Answer 8

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

От Mozilla Developer Network :

href

Это был единственный обязательный атрибут для якорей, определяющих ссылку на источник гипертекста, но больше не являетсятребуется в HTML5.Пропуск этого атрибута создает ссылку-заполнитель.Атрибут href указывает цель ссылки, либо URL, либо фрагмент URL.Фрагмент URL - это имя, которому предшествует хеш-метка (#), которая указывает внутреннее целевое местоположение (ID) в текущем документе.

Кроме того, согласно HTML5 spec :

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