Якоря 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 якорях. Всем желаю всего хорошего и побольше.

  

Комментарии (19) на “Якоря HTML”

  • Ольга пишет:

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

  • Зульфия пишет:

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

  • Владимир пишет:

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

  • samsimon21 пишет:

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

  • Alicia пишет:

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

  • Юрий пишет:

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

  • Василий пишет:

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

  • Сергей пишет:

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

  • николай пишет:

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

  • Ольга пишет:

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

  • Вячеслав пишет:

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

    • Юрий Силин пишет:

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

      • Вячеслав пишет:

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

        • Юрий пишет:

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

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

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

          • Вячеслав пишет:

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

          • Юрий Силин пишет:

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

  • Виктор пишет:

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

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

Популярные записи
Получать новые статьи
Свежие статьи на сайте Ваш e-mail: