Значение и работа символа # в URL: подробный разбор

Быстрый ответ

Ссылки, включающие в себя символ #, именуются якорными и ссылкаются на определённый раздел страницы через соответствующий id. Это обеспечивает пользователям возможность мгновенно переместиться к нужному им разделу просто с помощью одного клика по ссылке.

Пример:

<a href="#tips">Перейдите к советам</a> <!-- Готовимся к старту, назначаем пункт назначения: раздел #tips -->
...
<div id="tips">Ценные советы</div> <!-- Мы прибыли! Раздел #tips, ваши советы у нас на виду -->

В HTML атрибут href располагающий знак # и идентификатор, указывает браузеру на необходимость прокрутки страницы до заданного элемента, что создаёт комфортные условия для перемещения по странице.

Книга якорей

Роль якоря "<a>"

Тег <a>, который включает в себя символ #, играет повелительную роль в структурировании навигации на веб-сайте. Если в атрибуте href="#" отсутствует указание идентификатора, присутствующий в нем знак "решётка" обеспечивает возврат к началу текущей страницы. Данный подход активно используется на страницах, управляемых JavaScript, при этом крайне важно стараться избегать ситуаций, когда такой скачок к верху страницы может вызвать у пользователя недоумение.

Подробнее об этом расскажет наш спикер на видео

Якоря с применением ID

Атрибут id, которым обладает элемент HTML, становится мишенью для якорных ссылок. Это улучшает пользовательский опыт путем обеспечения более комфортной навигации по контенту.

Якоря, вызывающие определённые действия

Иногда знак # выступает в качестве временной заглушки в теге <a> для осуществления действий по JavaScript. Применяя именно такой подход, предпочтительнее отдача предпочтения <button> для обозначения действий пользователя, тогда как тег <a> лучше использовать для целей навигации.

Доступность – приоритетная цель

Следует обеспечить достоверность при использовании решётки # в ссылках, поскольку экранные читалки затрудняются без ясных якорей. Все ссылки должны следовать установленным стандартам.

Плавная навигация и пользовательский опыт

Плавное преобразование при переходе по якорным ссылкам заметно улучшает впечатление пользователя. Этот эффект можно реализовать при помощи CSS или JavaScript, поддерживая последовательность навигации.

Визуализация

Возьмите книгу быстро в руки – "#" в ссылке, это аналог закладки:

Книга (📖): [Введение, Глава 1, Глава 2, #Глава 3, Глава 4]

После клика:

Вы сейчас здесь 👉 📖#Глава 3

Таким образом, символ "#" функционирует как магический мост, который мгновенно переносит вас к интересующей вас части страницы, исключая необходимость лишнего пролистывания.

Распутываем JavaScript и '#'

Управление через document.location.hash

document.location.hash в JavaScript представляет собой универсальный инструмент для управления или изменения части URL после символа #. Это важно для динамического изменения интерфейса в одностраничных приложениях (SPA) без необходимости перезагрузки страницы.

Предотвращение привычного поведения

Это позволяет оставаться на той же позиции страницы и активировать предусмотренный скрипт JavaScript. Чтобы избежать стандартных перемещений по странице, связанных с символом #, возможно использование javascript:void(0) вместо него в href.

Изменения хэша и история браузера

Всякое изменение хэша приводит к формированию новой записи в истории браузера, предоставляя пользователю направление назад к предыдущему состоянию через кнопку "Вернуться назад". Это можно настроить при помощи HTML5 History API.

Навигация по идентификационным якорям

Путь к элементам через идентификаторы ID

Исторически для реализации навигации по документу использовались именованные якоря типа <a name="tips"></a>. В соответствии с современными стандартами HTML предпочительнее использовать идентификаторы ID элементов для организации якорных ссылок.

Изменения в хэшах как стимулы

В динамических веб-приложениях отслеживание изменений в хэшах позволяет представить пользователю соответствующее содержимое, определённое в фрагменте URL. Событие hashchange активирует JavaScript и улучшает взаимодействие пользователя с приложением.

Якоря и дизайн

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

Полезные материалы

1. <a>: Якорный элемент – HTML: HyperText Markup Language | MDN — исчерпывающая документация MDN о якорях в HTML и их особенностях.
2. HTML Links Hyperlinks – W3Schools — учебное пособие, описывающее связи HTML и их отношение к атрибуту id, а также использование знака решётки.
3. Smooth Scrolling | CSS-Tricks — советы о реализации плавного скроллинга для якорных ссылок.
4. CSS :target Selector – W3Schools — описание CSS-селектора :target и его роли в интеракции с внутренними ссылками страницы.
5. java – How does the enhanced for statement work for arrays, and how to get an iterator for an array? – Stack Overflow — подробное обсуждение на Stack Overflow о функционале и поведении хэшей в URL.
6. History API – Web APIs | MDN — информация о том, как управлять историей браузера с использованием HTML5 History API для управления навигацией по хэшам.