Якорь в HTML — закладка на определённом месте страницы

Якорь в 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>

Такую ссылку называют «заглушкой».