Чат Telegram
Группа ВКонтакте
Ссылка с якорем в HTML

Ссылка с якорем

Наверняка вы натыкались в Интернете на страницы, в начале которых имелось краткое содержание. И достаточно было кликнуть на определённый пункт и страница просто проматывалась до нужного места без перезагрузки. Это происходит благодаря ссылкам с якорями.

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

Обязательным элементом ссылки с якорем является символ #. А за этим символом, в свою очередь, следует идентификатор. Для создания идентификатора используется атрибут id. Он может указываться у любого тега.

Однако, можно указать адрес, в котором будет один лишь якорь. Приведем пример.

<a href="#glava1">Глава 1</a>

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

Также допустимо применение якоря в абсолютных адресах. В таких случаях браузер сперва откроет необходимую страницу, а после чего пролистает ее до соответствующего элемента.

Присоединяйтесь к нам в ВКонтакте и в Facebook, чтобы не пропустить новые уроки. А также вступайте в наш чат PHP-разработчиков в Telegram.
Домашнее задание
  • создайте страницу с именем check-anchor.html, которая по высоте будет занимать три экрана;
  • добавьте в середину её содержимого якорь. Например:
    <h2 id="glava1">Глава 1</h2>
  • откройте её в браузере с параметром #glava1. Например:
    /check-anchor.html#glava1
  • убедитесь, что страница автоматически пролисталась до нужного места
Онлайн обучение PHP
Путь с полного нуля до джуниора!
Начать бесплатно
Курс программирования на PHP
Подготовка до уровня устройства на работу!
Начать бесплатно
Самый понятный курс PHP
Онлайн-уроки в удобное время!
Начать бесплатно
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
loader
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
loader
Логические задачи с собеседований