Якоря — что это такое, зачем они нужны и как их создавать?
Якоря — это ссылки, действующие обычно в пределах одной страницы. Они позволяют посетителям не искать визуально соответствующий фрагмент текста, а переходить к нему по одному клику.
Особо полезны якоря на длинных страницах, где имеет смысл создавать Содержание страницы, располагаемое в начале или конце страницы, с включением в него заголовков фрагментов текстов.
Способ создания якорей хорошо описан на сайте http://www.webadvisor.ru
Вот цитата с этого сайта:
Как создать ссылку-якорь в HTML
1. Вначале нужно сделать метку (вставить якорь) в соответствующем месте страницы сайта и дать ей имя.
В примере ниже якорю дано имя «link», но вы можете присвоить якорю своё имя. Обычно это слово обобщает смысл текста, на который вы даёте ссылку и пишется на латинице, может содержать и латинские буквы, и цифры.
Количество якорей на странице может быть сколько угодно, но обязательное условие — имя якоря должно быть уникальным и не должно повторяться.
Для создания ссылки в HTML используется тег <a>. Атрибут <name> данного тега — задает имя якоря внутри документа.
Пример: <a name=»link»></a>
Примечание: В XHTML и HTML5 вместо name для определения якоря нужно указывать атрибут id. Между <a> и </a> текст писать не обязательно, так как задача якоря указать место закладки на странице.
Пример: <a id=»link»></a>
2. К якорю надо создать ссылку, кликнув по которой посетитель попадёт в то место, где находится якорь.
Для создания ссылки в HTML используется тег <a>. Атрибут <href> данного тега — задает адрес документа, куда следует перейти. Тег <a> с атрибутом <href> — обычная ссылка, к которой, для создания ссылки на якорь в конце URL адреса нужно добавить символ решетки # и имя якоря.
Пример: <a href=»http://webadvisor.ru/#link»>Текст для перехода </a>
Примечание: Если якорь и ссылка на него находятся на одной странице, адрес страницы в ссылке указывать не нужно.
Пример: <a href=»#link»>Текст для перехода </a>
Наметил несколько страниц, на которых собираюсь использовать якоря. Список таких страниц, возможно, опубликую чуть позже.
Вот пример действующих в пределах одной страницы трёх якорей:
1. Секция 1
Текст секции 1
2. Секция 2
Текст секции 2
3. Секция 3
Текст секции 3
А вот соответствующие коды:
<a href=»#section1″>Переход к Секции 1</a>
<a href=»#section2″>Переход к Секции 2</a>
<a href=»#section3″>Переход к Секции 3</a>
<h3><a id=»section1″></a>1. Секция 1</h3>
Текст секции 1
<h3><a id=»section2″></a>2. Секция 2</h3>
Текст секции 2
<h3><a id=»section3″></a>3. Секция 3</h3>
Текст секции 3
Используя эти коды в качестве заготовки, легко при необходимости расставить якоря на любой странице сайта. Нумерация якорей необязательна, но желательна, так как облегает их создание и модификацию.
…!
Приглашаю всех высказываться в Комментариях. Критику и обмен опытом одобряю и приветствую. В хороших комментариях сохраняю ссылку на сайт автора!
И не забывайте, пожалуйста, нажимать на кнопки социальных сетей, которые расположены под текстом каждой страницы сайта.
Продолжение тут…
