Как правильно использовать якоря html?

Здравствуйте, друзья!

Давайте более детально рассмотрим якоря HTML и особенности их использования.

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

Как поставить якорь в HTML?

  1. 1.Открываем HTML код страницы в любом удобном для вас редакторе кода и находим тот фрагмент текста или блок, к которому должен осуществляться переход.
  2. 2.Если в этом месте страницы уже есть какой то тег, то нам нужно дописать ему атрибут ID и в кавычках указать уникальное имя нашего якоря, в моём примере это block1.

  3. 3.Так же вместо атрибута ID можно использовать атрибут name
    Пример текста
  4. 4.Если в том месте, где вы хотите разместить якорь не стоит никакого HTML тега, то нужно его дописать. Обычно нужный фрагмент страницы оборачивают в тег div или span.

    Или же просто ставят пустой HTML тег без содержимого.

В большинстве случаев в современной вёрстке используют задание якоря в HTML при помощи атрибута ID, однако есть движки или отдельные модули, для работы которых принципиально важно чтобы он был задан через атрибут name.

Как вставит якорную ссылку?

Для этого пишем код обычной ссылки и в атрибуте href ставим сначала символ #, а затем пишем названия якоря, который мы задали ранее.

После этих нехитрых махинаций с HTML кодом при клике на созданной вами ссылке страница должна прокручиваться к тому блоку, которому присвоен атрибут ID или name, указанный в ссылке.

Если вы хотите чтобы прокрутка происходила более плавно и эффектно, то вам поможет вот эта статья:
«Плавная прокрутка страницы до якоря. Пошаговая видео инструкция»

Как вставит якорную ссылку с переходом на другую страницу?

При использовании якорей HTML для создания навигации часто возникает ситуация, когда вам нужно настроить переход к якорю, который находится на другой странице. К счастью, такое тоже возможно!

Для этого нам нужно всего лишь в атрибуте ссылки href указать сначала название страницы, на которую нужно перейти, потом поставить знак # и указать название нужного якоря.

Особенности использования якорей HTML

  1. 1.При клике на якорной ссылке у вас в адресной строке браузера автоматически к адресу страницы припишется знак # и название якоря.
    Якорные ссылки html

    Поэтому если вы решите воспользоваться кнопкой «Назад» для возврата на предыдущую страницу, то вас перекинет сначала на эту же страницу, и только после повторного нажатия «Назад» вы вернётесь на предыдущую страницу.

    Так же этот нюанс нужно учитывать при работе скриптами, которые используют атрибут href.

  2. 2.Якорь в HTML может быть видимым и невидимым. Если вы размещаете внутри HTML тега с якорем какой то текст, то он будет видимым. Если в теге с якорем ничего нет, то он будет невидимым.


Пожалуй, это все основные моменты, касающиеся использования якорей в HTML страницах. Если у вас есть ещё какая то ценная информация по данной теме – не стесняйтесь, пишите свои комментарии!

Успехов вам!

С уважением Юлия Гусарь

Читайте также:

Подписаться на рассылку

4 комментария

  1. Здравствуйте. Если взять <a href=»#yakor»>Текст якорной ссылки HTML</a>
    а сам >Текст якорной ссылки HTML< находится в закрытом раскрывающемся списке типа «аккардеон», то как сделать так, что бы при переходе по ссылке на якорь, этот аккардеон раскрывался показывая нужный текст?

    • Здравствуйте, Виктор! Там нужно писать JS код специально для раскрытия конкретного пункта. Код пишется исходя из селекторов в Вашей вёрстке. В двух словах там не расскажешь, нужно смотреть сайт и вёрстку.

      • Здравствуйте. Что нужно от меня и сколько стоит такая работа?

        Виктор

  2. Здравствуйте! Устанавливаю на OpenCart 2.3 якорь, но при нажатии на ссылку (и на сам якорь тоже) происходит переход на главную страницу. Пробовал использовать и ID и name. Не знаете чем может быть дело? Кстати на OpenCart 1.5 такая же ситуация.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif