HTML5 | Якорь - Закладка на веб-странице
Якорь в HTML – закладка на веб-странице, открывающая сетевой документ в месте установки якоря при переходе по ссылке на него. Переход по ссылке на html-якорь откроет страничку сайта (блога) ИМЕННО в месте установки якорька. Такой прием широко используется для целевого направления юзера (читателя) сайта (блога) в конкретное место веб-страницы, например – посредством создания меню-оглавления статьи со ссылками на расставленные в тексте якоря.
Создать якорь HTML
Создать якорь HTML на веб-странице – установить в html-документ код якоря с уникальным его именем в пределах устанавливаемой страницы. Уникальное имя якоря содержит минимум три латинских символа в любой комбинации, с добавлением (при желании) цифирь, дефиса («знак минус») и нижнего подчеркивания. Пробелы и служебные символы (",/><[]{}) в написании якорного имени не допускаются. Количество якорей на веб-странице не ограничено, якоря с одинаковым именем – не работают. Различают якорь-«name» и «id»-якорь.
Якорь «name»
Якорь «name» создается присутствием устаревшего и безобиднейшего атрибута ссылки «name» в элементе «a». Код якоря устанавливается непосредственно в оформляемый элемент текста статьи-контента веб-страницы:
<a name="уникальное_имя_якоря"> видимая часть текста </a>Якорь «name» прост и безопасен в обращении, используется большинством журналистов-литераторов и поддерживается визуальными текстовыми редакторами, вида TinyMCE. Абсолютная ссылка на якорь прекрасно индексируется поисковыми системами, при наличии уникальности видимой части ссылки и якоря.
Установка якоря «name» делается в один клик текстового редактора TinyMCE (кнопка «Вставить якорь»). Якорь устанавливается курсором в любом месте текстовой части веб-страницы без тяжелых последствий для работы её шаблона.
Размеры name-якоря на экране монитора определяются видимой частью текста. При отсутствии буквей и цифрей наполнения видимой части – высота и ширина установленного якоречка равны нолю (невидимый якорь).
Судьба атрибута «name» в HTML полна противоречий, атрибут считается устаревшим. Долгие попытки отказаться от безопасного якоря-name в пользу распрекрасного универсального, но невероятно стремного якоря-id успехом не увенчались. Якорь «name» остается любимым и безопасным инструментом веб-мастеров и, смотря на древность сюжета – рулит простым юзерам.
Якорь «id»
Якорь «id» создается присутствием универсального идентификатора «id» в коде любого элемента веб-страницы, этот идентификатор естессно поддерживающем:
<div id="имя_якоря"> видимая часть </div>где, элемент <div> взят исключительно для примера. Им может выступить <h> (заголовок), <ol>, <ul> (списки), <table> (таблица), примерно так:
<table id="имя_якоря">Элементы таблицы</table>
<ol id="имя_якоря">Элементы списка</ol>
<h2 id="имя_якоря">Заголовок второй величины</h2>Использование универсального идентификатора id совершенно противопоказано литераторам многопользовательских сайтов. Ибо, нет лучше и проще способа сковырнуть работу шаблона страницы, чем указать в id-имени якоря имя уже существующего идентификатора id из шаблона разметки веб-документа. Отличный результат гарантирован, ибо два идентификатора «id» с одним одинаковым именем не работают! Замечательные сайтовые грабли! За сим, несмотря на старомодность и не совсем валидность, атрибут name все еще рулит и классно индексируется поисковиками:
<h4><a name="yakor">Якорь</a></h4>или
<h4><a name="yakor"></a>Якорь</h4>Якорь «name» не красится в HTML, тогда как открываемый якорь «id» возможно видоизменить, используя псевдокласс CSS «target».
Ссылка на якорь
Ссылка на якорь ничем не отличается от обычной, с той только разницей, что к адресу веб-документа добавляется через решётку # имя якоря, без пробелов. Подобно сородичам, ссылка на якорь бывает абсолютной и относительной. Абсолютная ссылка работает всегда и везде, относительная – в пределах родного сайта или веб-страницы, в зависимости от указанного пути.
<!-- Относительная ссылка (на якорь, в пределах веб-страницы) -->
<a href="#razdel">видимый текст</a>
<!-- Абсолютная ссылка (на якорь, на другой странице, домене) -->
<a href="http://tehnopost.info/adress-stranici.html#razdel">видимый текст</a>
Ссылка на якорь и SEO
Абсолютные ссылки предназначены для якорей, расположенных на других веб-ресурсах – страницах, сайтах, доменах. Переход на якорь по абсолютной ссылке в пределах одной страницы всегда происходит с ее перезагрузкой в браузере. За сим – абсолютная ссылка на якорь в пределах одной страницы уже не приветствуется в условиях массовой экономии трафика. Одно время, абсолютные ссылки в пределах страницы и домена засчитывались поисковиками при наращивании ссылочной массы. Сии веселые времена давно канули в лету. Поисковики не индексируют ссылки на якоря в пределах страницы или домена. Разве что, случайно.
####################################################################################
Якоря на сайте нужны, чтобы направить пользователя СРАЗУ в заданное конкретное место веб-страницы и избавить бедолагу от ненужного листания и просмотра всего материала. При переходе по такой «заякореннной» ссылке – браузер сам автоматически прокрутит веб-страницу ИМЕННО до того места, где этот якорь установлен.
Якорь на сайте – это условная метка на его странице
- Зачем на сайте якоря
- Теория якорного дела
- Якорь в HTML – как это работает
- Якоря и SEO (поисковая оптимизация)
- Ограничения на количество якорей
- Код якоря и ссылки на него,
способы установки якорей ...
(продолжение статьи – Якорь в HTML | Закладка на веб-странице)
Назначение якоря на сайте
Якоря на сайте – это условные метки на его страницах, которые имеют только одно назначение – наметить и обозначить условные места или границы для будущих действий, событий или сценарев. Иными словами, если где-то на поле веб-страницы установлен якорь, то в этом месте – должно что-либо произойти или состояться.
Из самых известных событий и проишествий на сайте, для которых могут понадобиться якоря – это отработка CSS-кода и Java-сценариев, а также автоматическое листание (скроллинг) браузером веб-страницы. О последнем событии и пойдёт речь в этой статье.
Зачем на сайте якоря
Так уж устроены все веб-браузеры во всём мире, что абсолютно любой веб-документ они открывают, как новую книгу – исключительно! и только! со своего начала. Далее, каждый пользователь веб-ресурса должен сам листать и «скроллить» свою интернет-страничку. Происходит такое листание при помощи нехитрых приспособлений – клавиш, колёсика мышки, специальных боковых кнопок или простого и банального ёрзанья пальцем по экрану (при условии конечно, что этот экран сенсорный).
При последовательном чтении материала, простое перемещение по полю веб-страницы редко когда вызывает затруднение. Однако, если пользователю нужно пропустить участок незнакомого или ненужного ему текста то, почти всегда – такое листание и прокручивание страницы отнимает время и ужасно нервирует. Особенно, это заметно при целевом перенаправлении юзера в другую тему, расположенную на другой странице и, тем более – на другом сайте.
Чтобы направить пользователя СРАЗУ в заданное конкретное место веб-страницы и избавить бедолагу от ненужного листания и просмотра всего материала – в HTML используют якорь и ссылку на этот якорь. При переходе по такой «заякореннной» ссылке – браузер сам автоматически прокрутит веб-страницу ИМЕННО до того места, где этот якорь установлен. Пользователь будет спасён. Наступит всеобщий «тип-топ» и обильный «OK!».
Подведём-же теперь итоги и ответим на главный вопрос этой темы – зачем на сайте якоря:
– Якоря на сайте (в HTML) используются для целевого перенаправления пользователя в нужное место веб-страницы. Такое перенаправление может понадобиться в рекламных целях, или просто – по желанию другого пользователя. Например, если нужно сделать интерактивное меню-оглавление для большой статьи, типа как в настоящей статье.
Теория якорного дела
(вернуться к оглавлению)
Если коротко, то якорь в тексте веб-страницы и ссылка на этот якорь – это два различных и независимых элемента веб-разметки HTML, которые создаются при помощи одного и того-же тега – тега «а». Только атрибуты у этого тега используются разные. Атрибут «href» – для ссылки, атрибуты «name» и «id» – для якоря
При этом, атрибут «href» служит для создания параметров ссылки и задаёт путь (url), по которому отправится браузер после клика, сделанного по созданной ссылке. В свою очередь, атрибуты «name» и «id» создают идентификаторы для завершения этого пути в пределах веб-страницы, по которым браузер, собственно и находит «заякоренный текст» и которые, по сути своей и являются якорями – главной темой для этой статьи.
Общий вид конструкции кода ссылки выглядит так:
<a href="URL">текст ссылки</a>
в то время, когда код якоря имеет вид
<a name="имя якоря">текст якоря</a>, или
<a id="идентификатор якоря">текст якоря</a>
Якорь в HTML – как это работает
Якорь – он якорь и есть.
Уже одно только слово «якорь» говорит о фиксации чего-либо.
В разметке HTML, якорь используется для фиксации места после открывания веб-страницы. В этом и проявляется главное назначение якоря в HTML – указать, наметить, «заякорить» точку на поле веб-страницы для последующего перехода к ней браузера пользователя после отрытия веб-страницы. В задачу якоря входит продолжение и дополнение действия обычной ссылки после открывания веб-страницы. При переходе по ссылке с якорем, браузер не просто откроет веб-страницу, а будет прокручивать и листать её до места установки якоря. Если, конечно этот якорь был предварительно установлен.
Технически, такой эффект вертикального прокручивания (скроллинга) при открывании веб-документа обеспечивается браузером после обработки им служебного символа «#» – решетки (без кавычек). Находясь в тексте ссылки, этот символ (#) делит её на две части, которые будут обработаны браузером последовательно и независимо друг от друга.
Это очень важно, что две части ссылки обрабатываются браузером раздельно и независимо. Рассмотрим на примере. Вот текст ссылки на веб-страницу с якорем, установленным на ней:
http://tehnopost.info/10-yakor-ankor-na-veb-stranice.html#zachem_nuzhnyi_yakorya
Как видим, служебный символ #, установленный после окончания .html делит ссылку на две части, которые и будут обработаны отдельно друг от друга. При этом произойдет следующее:
- Сначала браузер обработает первую часть ссылки, до #. При этом, он найдёт веб-страницу в Интернете по указанному пути, скачает её код и отрисует веб-страницу на экране монитора.
- Потом браузер обработает вторую часть ссылки, после #. При этом он будет читать полученный код страницы в поисках кода якоря – «zachem_nuzhnyi_yakorya».
- Дальше будет так: Если браузер найдёт код якоря в полученном коде страницы – он пролистает её и откроет в месте установки кода якоря. Если нет – страница останется открытой, как и была – с самого своего начала.
Это и есть наше замечательное умозаключение:
Если якоря на странице нет, а ссылка на него есть – то такая веб-страница откроется всё равно. Просто она останется открытой с самого своего начала и браузер не будет ее прокручивать и листать. А куда крутить-то, ведь крутить-то некуда. Якорь-то не найден. Но страница – уже открыта в браузере и отрисована.на экране монитора. Там она и останется, пока пользователь не закроет её.
И это важно для SEO – поисковой оптимизации сайта
Якоря и SEO (поисковая оптимизация)
Наличие якорей в тексте – очень актуально для больших статей и повышает общее ранжирование текста страницы у поисковиков, для которых, наличие якорей на странице – это один признаков, отличающих её от "портянки" (текста без форматирования).
Переход по ссылке на якорь фиксируется многими следящими (наблюдающими) системами, как поведенческий фактор. Ведь такой переход – это целевое направление пользователя, облегчающее его Интернет-жизнь. Стало быть, такой подход к разметке html-документа повышает юзабилити (удобство использования) ресурса, ибо скорость навигации по нём возрастает в разы.
- Если якорей на странице много, то их можно просто нумеровать, придумав имя по теме статьи. Например, razdel1, razdel2, razdel3, и т.д.
- Очень часто якорь делают невидимым и «АНКОР ЯКОРЯ» просто не указывают. В этом случае, анкор почти любой ссылки на такой якорь будет «в масть» для поискового продвижения страницы.
- Если якорь видимый и «АНКОР ЯКОРЯ» указан, то с точки зрения SEO-оптимизации, анкоры (видимые части текста) якоря и ссылки на него должны, если не совпадать, то хотя-бы быть близкими по смыслу.
В основном – здесь проблемы с SEO. Однако, замечено, что если якорь на странице установлен, а ссылки на него нет – это не будет ошибкой. Равно как не будет считаться ошибкой ссылка на несуществующий якорь. В этом случае, поисковиком будет засчитываться, просто ссылка на страницу, а браузером – эта страница открываться
Якоря и верстальщики
Верстальщики очень часто используют в своей работе якоря. При чём, верстальщики невероятно любят локальные якоря – якоря в пределах домена. Такими якорями делается верстка простых менюшек. Преимущество – увеличении скорости навигации и возможность работа в не Сети.
Ограничения на количество якорей
Не последним вопросом при установке якорей на странице, обстоит дело с их предельныи количеством. Есть-ли вообще какие-либо ограничения на количество якорей, расположенных на одной веб-странице?
Ответ, более чем прост – ограничения на количество якорей нет и быть не может. Поисковики относят якоря к обычным элементам управления (как кнопки), на количество которых ограничения накладывает только здравый смысл. Поэтому, якорей на веб-странице может быть сколько угодно. Если пользователю это нравится, то он может на каждое слово или букву – установить отдельный якорь.
Код якоря и ссылки на него,
способы установки якорей ...
Примеры кода якорей и ссылок на них, способы их установки и прочие технические подробности якорного вопроса вынесены в отдельную статью в виду их объёмистости и громоздкости. Читать далее:
- Пример использования якоря
- Действие якоря
- Показания к применению якоря
- Как создать и установить якорь на веб-странице
- Имя якоря
- Код якоря
- Ссылка на якорь