Якорь в HTML — закладка на определённом месте страницы
Якорь в HTML — это закладка на определённом месте страницы, которая создаётся присвоением элементу атрибута id
с любым символьным значением. Чтобы сделать ссылку на такую закладку, нужно дописать в конец ссылки на страницу символ решётки (#) и имя идентификатора, то есть значение указанного атрибута.
В качестве значений атрибута id
допускается использовать любые символы, однако рекомендуется применять только буквы английского алфавита, цифры, дефисы (-) и знаки подчёркивания (_), причём начинать значение — с буквы. Но эти рекомендации относятся именно для тех случаев, когда мы используем идентификатор для добавления стилей элементу (CSS) или обработки его скриптом (JavaScript). Для якорей я рекомендую использовать полные логические названия на вашем языке, учитывая регистр и заменяя пробелы на знаки плюсов (+). Примерно вот так:
http://developer.roman.grinyov.name/blog/2#Фавикон+не+отображается+/+обновляется
Дело в том, что если мы будем использовать только буквы английского языке, дефисы и знаки подчёркивания, то возрастёт вероятность того, что когда-нибудь имя идентификатора якоря совпадёт с именем идентификатора, используемого в CSS или JavaScript (и элемент примет стили или будет обработан скриптом, а этого мы не ожидаем). Пэтому я рекомендую, как уже упомянул выше, называть якоря на вашем языке, учитывая регистр и заменяя пробелы на знаки плюсов.
Примеры
Допустим, у нас имеется элемент с идентификатором Мой+якорь
, в данном случае абзац, который находится в самом низу страницы:
<p id="Мой+якорь">...</p>
Чтобы перенаправить пользователя, нажавшего ссылку, находящуюся на другой странице, к вышеуказанному абзацу, нужно добавить такой же идентификатор (Мой+якорь
) с предшествующим ему символом решётки (#) в конец ссылки, ведущей с другой страницы на страницу с абзацем:
<a href="ссылка+на+страницу+с+абзацем#Мой+якорь">Текст ссылки</a>
Если нужно перенаправить пользователя к определённому месту текущей страницы, то есть страницы, которая открыта в данный момент, то достаточно в атрибуте href
указать идентификатор нужного места:
<a href="#Мой+якорь">Текст ссылки</a>
Чтобы перенаправить пользователя к началу страницы, нужно написать так:
<a href="#">Наверх</a>
Такую ссылку называют «заглушкой».