Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по HTML и на странице первого урока.
- Напишите якорь с именем
go(вместо<!-- якорь -->) - Сделайте ссылку на якорь с этим именем (вместо
<!-- ссылка на якорь -->)
В предыдущем уроке познакомились с ссылками в HTML. В этом уроке речь пойдет о якорях - ссылка на определенную часть страницы.
Сначала покажу устаревший способ создания якоря.
Использование атрибута name
Якорь, это некая закладка на странице. Чтобы быстро перейти к какой-либо части на странице, используют якорь. Он делается просто: в нужном месте пишут ссылку <a>, дают ей имя при помощи атрибута name, далее пишут еще одну ссылку, уже из того места, откуда нам нужно перейти к якорю, но пишут ее с атрибутом href, в значении указывается символ решетка (#), а далее пишется имя закладки (якоря). Далее пример:
<a name = "top"></a>
<p height = "2000px"></p>
<a href = "#top">Наверх</a>Между тегами <a> ... </a> в закладке текст необязателен, так как мы просто указываем место перехода. Ссылка на закладку может быть с любой страницы. Далее пример:
<a href = "https://codebra.ru#bottom">Перейти к нижней части текста</a>Использование атрибута id
Атрибут name использовать неактуально. Вместо него используйте уникальный идентификатор id, с которым вы познакомились в этом уроке.
Далее пример:
<div id = "top"></div>
<p height = "2000px"></p>
<a href = "#top">Наверх</a>То есть якорем может быть любой HTML элемент. В дополнении хочется сказать об особенности работы браузеров с якорями. При нажатии на кнопку назад в браузере, возврат происходит не к предыдущей странице, а предыдущему месту, из которого был переход к якорю (закладке).
В этом уроке научились создавать якоря с помощью двух атрибутов: name и id. Про атрибут name можете забыть. Всегда используйте уникальный идентификатор id, когда нужно добавить якорь на страницу. В следующем уроке будем знакомиться с атрибутами ссылок в HTML.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу HTML.
