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

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

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

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

Hash:

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

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

href="https://site.com/#some-id"будет идти site.comи прокрутить до идентификатора на этой странице.

Пролистать наверх:

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

Смотрите это демо.

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

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

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

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

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

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

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

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

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

Вот еще один похожий вопрос, который задавали якорям HTML с «name» или «id»?

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

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

К сожалению, чаще всего используются <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="#">.

Неупорядоченные списки часто создаются с целью использования их в качестве меню, но 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="#"В никуда может быть просто ленивый способ установить некоторые стили.

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

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

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

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

Из Сети разработчиков Mozilla :

HREF

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

Кроме того, согласно спецификации HTML5 :

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

Атрибут href определяет URL ресурса ссылки. Если тег привязки не имеет тега href, он не станет гиперссылкой. Атрибут href имеет следующие значения:

1. Absolute path: move to another site like href="http://www.google.com"
2. Relative path: move to another page within the site like herf ="defaultpage.aspx"
3. Move to an element with a specified id within the page like href="#bottom"
4. href="javascript:void(0)", it does not move anywhere.
5. href="#" , it does not move anywhere but scroll on the top of the current page.
6. href= "" , it will load the current page but some browsers causes forbidden errors.

Note: When we do not need to specified any url inside a anchor tag then use 
<a href="javascript:void(0)">Test1</a>