Якоря 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”