Как использовать якорь HTML и что это такое?
Три основных вопроса:
1. Что это?
2. Зачем мне это нужно?
3. Как это работает?
Что это?
Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу. Ссылка с якорем содержит символ #
, после которого идёт идентификатор.
Переход пользователя по ссылке на якорь приводит его (пользователя) к месту установки якоря, к «заякоренной» намеченной точке на веб-странице. Иными словами, при переходе пользователя по ссылке на якорь – веб-страница откроется в браузере не со своего сначала, а сразу в том месте, где этот якорь установлен.
С якорями связана одна особенность работы браузера. После перехода к указанному якорю нажатие на кнопку «Назад» возвращает не на предыдущую просмотренную страницу, а к ссылке, с которой был сделан переход к якорю. Получается, что для перехода к предыдущему документу надо нажать кнопку «Назад» два раза.
Итого:
– устанавливаем на странице несколько якорей в разных местах
– указываем адрес с якорем в необходимых ссылках
– получаем навигацию на одной странице
Зачем мне это нужно?
Действительно, зачем? Средняя страница занимает порядка 2000 слов (этот объем “любят” роботы поисковых систем), это примерно 4 экрана браузера.
Зачем нужна внутренняя навигация на странице, пользователь и так всё пролистает при чтении.
Да, внутри на отдельной странице не особо нужно. А вот использовать для организации глубины просмотра – даже очень надо. Необходимо организовать переход пользователя со страницы на страницу максимально удобным способом. А если необходимая информация находится в середине другой страницы – мы с помощью якоря может организовать переход прямо туда.
Пример 1. Только перелинковка, браузер будет открывать все страницы с самого начала.
Вы действительно думаете, что пользователь в поиске нужной ему информации будет ТАК гулять по Вашему сайту? Листать 2-ю и 3-ю страницу? Нет, не будет – уйдет с сайта.
Пример 2. Перелинковка с якорями – использование якоря позволяет доставить пользователя сразу к нужному месту другой страницы.
Совсем другое дело :)
Как это работает?
Чтобы создать и установить якорь на веб-странице, нужно вставить код якоря в код html-документа и присвоить якорю уникальное имя в пределах его страницы. Имя якоря – это его условный идентификатор, по которому браузер находит якорь на странице. Имя якоря может быть любым. Желательно, оно должно соответствовать тематике страницы и содержать, минимум три символа. Имя якоря может содержать цифры и латинские буквы в любой комбинации. Выбор имени для якоря ничем не ограничивается, кроме одного – оно должно быть уникальным в пределах страницы своего месторасположения. На одной странице (по одному веб-адресу) не может быть двух якорей с одинаковым именем. Якоря с одинаковым именем, расположенные на разных веб-страницах (по разным веб-адресам) – будут прекрасно работать.
Изначально, для создания пользовательских якорей, в HTML был задуман тег <a> и его атрибут name. Параллельно атрибуту name, у тега <a> существовал атрибут id, который тоже расценивался как якорь на веб-странице. Так они и стали родоначальниками классических якорей – тег <a> и его атрибуты – name и (или) id
Код классического якоря создаётся при помощи тега <a>
При этом – имя якоря (его идентификатор) задаётся через атрибуты тега <a> – name или id
Таким образом, код классического якоря,вставляемый в документ HTML будет иметь вид
<a name="info1"></a> или <a id="info1"></a>
где, слово “info1” – это произвольное уникальное имя якоря в пределах страницы его местонахождения.
Правильные якоря бывают видимыми и невидимыми. «Видимым» называется тот якорь, который имеет анкор – видимую часть элемента. Как правило, это текстовая часть.
Код невидимого якоря:
<a name="info1"></a> или <a id="info1"></a>
Код видимого якоря:
<a name="info1">Читать здесь</a>
или
<a id="info1">Читать здесь</a>
где текст «Читать здесь» – видимая часть текста якоря (анкор).
Относительно выбора атрибута name или id, то по отношению тега <a> – прекрасно работают оба варианта, поскольку тег <a> отлично поддерживает оба из них.
Но атрибут (идентификатор) «id» стал более предпочтительным, поскольку он более универсален. Атрибут (идентификатор) «id» легко обрабатывается браузером и поддерживается большинством тегов XHTML и HTML. В то время, когда атрибут name – это очень специфичный атрибут, который поддерживается только тегом <a>.
Если при помощи идентификатора id можно вставить якорь, практически в любой элемент веб-разметки, то при помощи атрибута name можно использовать якорь только с тегом <a>.
С точки зрения классики веб-языков и истории создания кода якорей более правильным будет атрибут name.
С точки зрения удобства, универсальности и прогресса, то, естественно – код правильного якоря должен быть написан через атрибут id и иметь вид:
<a id="razdel"></a>
ВАЖНО: для Турбостраниц Яндекса вариант выше не работает. Валидатор Яндекса выдает ошибку. “…отсутствует или указан у неподдерживаемого элемента. В качестве якоря можно использовать контент в виде аккордеона или заголовок h1–h6”. Яндекс.Турбо понимает только два вида якоря.
для заголовка (h1, h2, h3, h4, h5, h6)
<h1 id="info1">Текст заголовка...
для списка (ul, ol, dl) и его элементов (li, dt, dd)
<ul id="info1">тело списка...
<li id="info1">тело элемента списка...
для элементов таблицы (table, caption, col, colgroup, tbody, td, tfoot, th, thead, tr)
<table id="info1">тело таблицы или её элемента...
Ссылка на якорь создаётся при помощи тега <a> и его атрибута href. Ссылка на якорь ничем не отличается от обычной ссылки, с той только разницей, что к адресу веб-документа добавляется решётка (#) и имя якоря.
Вот пример ссылки с якорем на страницу “Глубина просмотра” к отметке “Конец страницы”, сама ссылка выглядит вот так:
"<a href="/yuzabiliti/glubina-prosmotra.html#end">Глубина просмотра</a>"
а на самой странице сделан якорь end.
Существует еще якорь “без якоря”
Это вариант ссылки https://seotable.ru/yuzabiliti/yakor-html.html#, т.е. с указанием # в конце URL. Сам якорь предварительно не задается – при нажатии на такую ссылку, браузер прокручивает страницу к началу.
Именно так работает кнопка “Наверх” на всех сайтах.
В чем отличие обычной ссылки и ссылки с пустым якорем (отличие в один символ на конце URL)?
https://seotable.ru/yuzabiliti/yakor-html.html – перезагружает страницу с сервера
https://seotable.ru/yuzabiliti/yakor-html.html# – не перезагружает страницу, браузер перелистывает текущую страницу к началу
Хотя визуально результат выглядит одинаково.
Подпишитесь в VKontakte - нажмите кнопку | ||
Подпишитесь в Telegram - нажмите кнопку | ||
Наша группа ODNOKLASSNIKI |
Вы можете сохранить ссылку на эту страницу себе на компьютер в виде htm файла
Запрос на размещение Вашего рекламного поста (тема и email будут добавлены автоматически в письмо)
В Вашем браузере должна быть настроена обработка ссылок mailto
site_post@bk.ru
или просто скопируйте адрес e-mail
Почитать в разделе
ЮЗАБИЛИТИ

(Читать полностью...)
- Всего статей в разделе: 5
- Показано статей в списке: 3
- Сортировка: название по алфавиту
Глубина просмотра

(Читать полностью...)
Заголовки и шрифты

(Читать полностью...)
Раздел “контакты”
Мы хотим получить от пользователя обратную связь. Можно использовать: 1. Форму обратной связи на сайте 2. Номер телефона для связи 3. Адрес электронной почты Надо исходить из того, что бы пользователю было как можно проще. В этом отношении идеальный вариант - форма обратной связи. Нужно только написать и нажать кнопку "Отправить". Для варианта телефон - это расход денег, для варианта электронной почты - нужно или запускать почтовую программу или переходить на сайт с услугой...(Читать полностью...)