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

Назначение якорей HTML

Приветствую Вас на страницах моего сайта inetmkt.ru. Итак, что же это такое?  HTML якоря это элементы навигации по странице сайта. Их используют для перемещения в пределах одной страницы. Если страница слишком большого объема, тогда, для удобства пользователей, у вебдизайнера есть возможность обеспечить навигацию по странице путем простановки специальных меток – HTML якорей.

Вы такие страницы часто встречаете. Обычная структура таких документов содержит в начале содержание страницы. а в теле страницы – описание элементов содержания.

Содержание
    Раздел1
    Раздел2
    Раздел3

А в теле страницы – описание элементов содержания.

Раздел1
  текст
…………
Раздел2
  текст
…………

Будет логично для создания меток использовать заголовки и подзаголовки на странице, хотя это и не обязательно.

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

Создать метку можно двумя способами. В первом случай для создания метки используют тег <a> с атрибутом name. Запись в HTML-коде будет выглядеть следующим образом

<a name=”Razdel1”> Раздел1</a>

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

Во втором случае поступают еще проще. Любому html-тегу добавляют атрибут ID, например:

<h3 id=”Razdel2”> Раздел2 </h3>

Можно использовать любой из описанных выше способов.

Как сослаться на HTML якоря?

Для того, чтобы перейти в нужное место, помеченное якорем, организовывается ссылка. Она является частным случаем обычной гиперссылки, но имеет некоторые нюансы. Например:

<a href=”#Razdel4”> Раздел4 </a>

Как Вы уже поняли к имени метки, заданной в атрибутах name или ID, добавляется знак решетки — #.

Переход на метку якоря HTML на другой странице

<a href=”page1#Razdel4> Якоря. Раздел4 </a>

Если Вы задаете ссылку в таком виде

<a href=”#”> В начало </a>

то переход произойдет к началу вебстраницы.

Использование HTML якорей в WordPress

Процесс простановки якорей в CMS WordPress не автоматизирован. Но, при желании, их легко можно проставить, воспользовавшись HTML редактором. Синтаксис написания ничем не отличается от описанных выше способов.

<a name=”Yakor1”> Якорь1 </a>

А вот организовать ссылку можно средствами WordPress традиционным способом. И будет она выглядеть тоже традиционно.

<a href=»#Yakor1″> Якорь1 </a>

Вот собственно и все, что я хотел Вам донести об HTML якорях. Всем желаю всего хорошего и побольше.

  

22 комментария на “Якоря HTML”

  • Ольга says:
    http://wideopenroad.ru/

    Очень интересная и полезная информация, как раз недавно что-то делала подобное

  • Зульфия says:
    http://samorazvitie-uspeh.ru/

    Спасибо за рекомендации, обязательно воспользуюсь. все поставила.жду в гости.Удачи вам!

  • Владимир says:
    http://muzdrav.ru

    Большое спасибо за такую ценную статью об якорях. Никогда их не применял, потому как не было таких длинных статей, чтобы делить их на разделы. Якоря — это такая же гиперссылка, только внутренняя так?

    • Юрий says:
      http://inetmkt.ru

      Да, это ссылка на определенное место на странице.

  • samsimon21 says:
    http://progfromdelphi.com/

    Поставте себе плагин который раставит якаря самостоятельно и не партесь.

  • Alicia says:

    У меня глупый вопрос по поводу использования якоря на другую страницу. Получается, что эта страница доступна по обычному адресу, например, site.html и по адресу с якорем site.html#abc. ПС не воспримут их как две разные страницы с одинаковым текстом?
    Буду рада услышать умный ответ.

  • Юрий says:
    http://inetmkt.ru

    Вопрос не глупый, а по существу. Такая вероятность конечно есть. Я эти вопросы освещал в этой публикации — https://inetmkt.ru/seo-optimizacia/dubli-stranits-reshenie-problemyi

  • Василий says:
    http://kublyakov.ru/category/hernja/

    Сейчас ПС умные и ссылки хорошо распознают, лучше делать контент для людей и никакого СЕО не нужно будет.

  • Сергей says:

    Спасибо! Понятно объяснил
    Сейчас реализую на своем сайте

  • николай says:
    http://hit-tv.ucoz.ru/

    очень интересная и полезная статья мне понравилось кое какие полезные моменты я узнал для себя спасибо за статью

  • Ольга says:

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

    • Юрий Силин says:
      http://inetmkt.ru

      Да. конечно можно.
      Вы попробуйте. протестируйте.
      Успехов.

  • Вячеслав says:

    Добрый день!
    Все понятно, что и как! Спасибо! Вопрос: а как сделать выделенным ту часть на которую ссылается якорь в хтмл??? Т.е. есть несколько коротких статей, 2-3 строки, соответственно несколько якорей, нужно что бы место куда ссылается якорь было выделено каким-нибудь фоном, что бы не путались в статьях… Это реально???

    • Юрий Силин says:
      http://inetmkt.ru

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

      • Вячеслав says:

        Не совсем так хочется, нужно что бы изначально текст был на белом фоне, пока на якорь перехода не будет, вот тогда он и нужен выделенный!

        • Юрий says:
          https://inetmkt.ru/

          Я понял. думаю, что и это можно реализовать.

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

          Если Вам не хочется весь абзац делать ссылкой. то тогда следует проконсультироваться с программистами, как это красиво сделать.

          • Вячеслав says:

            Т.е. я не по адресу обратился???

          • Юрий Силин says:
            http://inetmkt.ru

            В общем-то Вы правы. Я не оказываю услуги по программированию.
            По продвижению — да.

  • Виктор says:
    http://svictor.ru

    Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи атрибута

  • Роман says:

    Прикольно тема для развивается клас

  • Сергей says:
    https://крым.вояже.рф

    Здравствуйте, подскажите как настроить точку прокрутки страницы при клике по якорной ссылке. Сейчас при клике место с установленным якорем оказывается несколько выше верхней границы экрана. Так клик по якорной ссылке переносит пользователя ниже самой сноски. Это можно исправить?

  • сеошник says:
    https://seoshnik.pro

    Работает же !!!
    Проверено.

Оставить комментарий

Популярные записи