Що таке href = "#" і для чого він використовується?

На багатьох веб-сайтах я бачу посилання, які є href="#". Що це означає? Для чого він використовується?

Про гіперпосилання:

Основне використання анкерних тегів - <a></a>- як гіперпосилання . Це в основному означає, що вони вас кудись відвозять. Гіперпосилання вимагає hrefвластивості, оскільки воно вказує місцеположення.

Хеш:

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

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

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

Перейдіть до початку:

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

Дивіться цю демонстрацію.

Така очікувана поведінка згідно з документацією на w3.

Заповнювачі гіперпосилання:

Приклад, коли заповнювач місця гіперпосилання має сенс, є в попередньому перегляді шаблонів. На демонстраціях для шаблонів однієї сторінки я часто бачив <a href="#">так, що тег прив’язки є гіперпосиланням, але нікуди не йде. Чому б не залишити hrefмайно порожнім? Пусте hrefвластивість - це фактично гіперпосилання на поточну сторінку. Іншими словами, це призведе до оновлення сторінки. Як я обговорював, href="#"це також гіперпосилання і викликає прокрутку. Тому найкращим рішенням для заповнювачів гіперпосилань є насправді href="#!". Ідея тут полягає в тому, що на сторінці, сподіваємось, немає елемента з id="!"(хто це робить !?), і тому гіперпосилання не стосується нічого, тому нічого не відбувається.

Про теги прив’язки:

Ще одне питання, яке вам може бути цікаво, - "Чому б просто не залишити власність href вимкнено?". Поширена відповідь, яку я чув, - це те, що hrefвластивість потрібна, тому воно повинно бути присутнім на якорях. Це ЛЮДИНА! hrefВластивість потрібно тільки для якоря насправді бути гіперпосиланням! Прочитайте це з w3. Отже, чому б просто не залишити це для заповнювачів? Браузери відображають стилі за замовчуванням для елементів і змінять стиль за замовчуванням тега прив’язки, який не має властивості href. Натомість це буде вважатися звичайним текстом. Це навіть змінює поведінку браузера щодо елемента. Рядок стану (внизу екрана) не відображатиметься при наведенні на якір без властивості href. Найкраще використовувати значення 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-якорям із назвою "ім'я" чи "id"?

Це посилання, яке посилається нікуди по суті (воно просто додає "#" до URL-адреси). Він використовується з кількох різних причин. Наприклад, якщо ви використовуєте якийсь JavaScript / jQuery і не хочете, щоб фактичний HTML-файл десь посилався.

Він також використовується для якорів на сторінці, який використовується для переадресації на іншу частину сторінки.

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

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

Якщо елемент якоря є використаний в якість не коріння вона повинна мати свій hrefнабір , щоб javascript:void(0);заради красного деградації.

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

Перше, що я роблю в понеділок, - це очищення проекту всіх примірників <a href="#">.

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

Ви можете використовувати безліч кнопок, розташованих один на одного для списку меню, але цей список здається кращим. І це, мабуть, тому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 - це ім'я, якому передує хеш-позначка (#), яка вказує внутрішнє цільове розташування (ідентифікатор) у поточному документі.

Також за специфікацією HTML5 :

Якщо в елементі немає атрибута 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>