Понимание и использование href="#" в веб-разработке

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

Атрибут href="#" в теге <a> выполняет функцию заполнителя при отсутствии конкретного URL адреса или при их динамическом определении с помощью JavaScript. По умолчанию, при клике на такую ссылку происходит прокрутка страницы к ее началу. Однако это можно предотвратить вызвав event.preventDefault() в обработчике события onclick. Вот пример:

<a href="#" onclick="event.preventDefault();">Ссылка без прокрутки</a>

Тег <a>, атрибут href и его повседневное использование

В обычной практике тег <a> с атрибутом href применяется для создания навигационных ссылок на веб-страницах. Если значение href равно "#", то при нажатии на ссылку браузер переместится в начало текущей страницы. Однако, с применением JavaScript, можно изменить это поведение, чтобы создать уникальные пользовательские сценарии, сохраняя URL неизменным.

Волшебство внутренних переходов страницы

С помощью комбинации href и идентификатора, например href="#section2", можно организовать навигацию внутри одной страницы, перенаправляя браузер к элементу с соответствующим идентификатором:

<a href="#section2">Перейти к разделу 2</a>
<div id="section2">Добро пожаловать в раздел 2!</div>

Такие механизмы серьезно упрощают навигацию, особенно на больших веб-страницах.

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

Заполнитель, стиль и предположения пользователя

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

Сочетание href и JavaScript

Атрибут href="#" может стать частью активации JavaScript-скриптов, при применении javascript:void(0); или event.preventDefault(), чтобы предотвратить прокрутку страницы вверх:

<a href="#" onclick="javascript:void(0); performMagic();">Активировать скрипт</a>

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

Представьте страницу как свиток:

📜 Вы находитесь здесь (href="#" вернёт вас сюда)

А при нажатии на:

🖱️ [Кликните здеcь для сегодняшней рекомендации]

Это равнозначно:

🔝 "Возвращаемся к началу! Вам пришло письмо!"

Якорь с href="#" работает как ярлык на странице, экономящий время пользователей:

[📄📄📄🖱️📄📄📄] ➡️ Мгновенно перенесёт вас ↔️🔝

Руление навигацией и пользовательским опытом посредством href="#"

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

Разработка доступных пунктов меню

В навигационных меню href="#" можно применять для добавления стилей hover и active к пунктам меню:

<ul class="menu">
  <li><a href="#" onclick="showMenu(); return false;">Пункт меню</a></li>
</ul>

Сео-оптимизация с помощью href="#"

href="#" может опосредованно влиять на SEO, улучшая структуру сайта и облегчая навигацию.

Повышение производительности

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

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

1. MDN Web Docs – Элемент Anchor — Полное описание элемента <a>.
2. W3Schools – HTML Ссылки Гиперссылки — Руководство по использованию гиперссылок с акцентом на символ '#'.
3. Stack Overflow – Что такое href="#" и зачем это нужно? — Обсуждение использования href="#".
4. URI fragment – Википедия — Энциклопедическое объяснение фрагментов URI.
5. Использование атрибута title элементов frame и iframe — Рекомендации по доступности в контексте использования href="#".
6. Создание стеклянного сайта с помощью HTML и CSS – Учебник на YouTube — Визуальный учебник по использованию href="#".