Якорь в HTML

Якорь в HTML

Якорь в HTML

str0Якорь в HTML применяется, если необходимо направить пользователя в требуемое место страницы сайта без утомительного листания всего текста.

Якорь в HTML – это такой элемент, который является точкой привязки, и который имеет название anchor.

Освоив эту частицу языка HTML, можно начинать собирать страницы сайта в отдельные папки и преобразовывать непритязательную коллекцию разрозненных документов в полноценный сайт.


Представление о якоре или точке привязки

В языке HTML для создания ссылки применяется элемент <a>, якорь или точка привязки. Когда посетитель щелкает кнопкой мыши эту ссылку, браузер загружает другую страницу.

Якорь — понятный и простой элемент-контейнер. Выглядит он следующим образом.

<a>…</a>

Текст, который пользователь щелкает кнопкой мыши, помещается внутрь элемента-якоря.

<a>Кликни на меня </a>

Проблема в том, что приведенная ссылка не указывает никуда. Для превращения ее в полнофункциональную ссылку необходимо с помощью атрибута href (сокращение от hypertext reference (гипертекстовая ссылка)) задать URL страницы назначения. Например, если нужна ссылка, переносящая читателя на страницу Page.htm, создайте следующую ссылку.

<a href=»Page.htm» > Кликни на меня </a>

Для того чтобы ссылка сработала, файл Page.htm следует поместить в ту же папку, что и страницу, содержащую ссылку Кликни на меня.

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

<p>Жизнь прожить – не поле перейти. <br /> Русская пословица<a href=» Page1.htm» >переходи </a></p>

На рисунке показана эта ссылка в действии.

Якорь в HTML
Страница в браузере

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

Глядя на ссылку, нельзя сказать, действующая она или нет — если ссылка указывает на несуществующую страницу, сообщение об ошибке появится на экране только после того, как вы щелкните ссылку кнопкой мыши

Стоит отметить, что текст ссылки — текст внутри элемента <a> — важен, поскольку поисковые машины обращают на него особое внимание.

Правильный выбор текста увеличит вероятность попадания вашего сайта в результаты поиска и привлечения новых посетителей.

Далее приведено несколько примеров хорошего информативного текста ссылки: «Products» (Товары), «Register» (Регистрация), «Our Policies» (Наша политика) и «Contact Me» (Контакты).

Бесполезный же текст ссылки обычно состоит из одного-двух малозначащих слов в предложении, например, «click» (щелкни), «here» (здесь), «more» (еще) или «this link» (эта ссылка).

Якорь в HTML и ссылки на них можно условно разделить на три группы:

Локальные ссылки на якорь, расположенный в пределах одной страницы

Код ссылки на якорь, расположенный в пределах одной и той же страницы, будет выглядеть так: <a href=» #razdel» >ТЕКСТ ССЫЛКИ</a> где, razdel – это уникальное имя якоря в пределах документа html, а ТЕКСТ ССЫЛКИ – это видимая текстовая часть (анкор) ссылки.

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

Локальные ссылки на якорь, расположенный в пределах одного домена (сайта, блога)

Код ссылки на якорь, расположенный на другой странице в том же домене имеет вид: <a href=»/adress-stranici.html#razdel»>ТЕКСТ ССЫЛКИ</a> где, /adress-stranici.html – адрес веб-страницы без указания домена, razdel – уникальное имя якоря, в пределах именно той страницы, где он расположен.

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

Абсолютные ссылки на якорь, расположенный на другом домене (блоге, сайте)
Если якорь и ссылка на него находятся на страницах разных сайтов с разными доменными именами, то в такой ссылке нужно прописать полный (абсолютный) путь к веб-документу и якорю на нём.

Делается это, с указанием протокола (обычно http), домена (доменного имени сайта), полного адреса страницы и уникального имени самого якоря. Код такой ссылки будет выглядеть так:

<a href=» http://intercominfo.ru/adress-stranici.html#razdel» >ТЕКСТ ССЫЛКИ</a> где, http://intercominfo.ru/adress-stranici.html – полный адрес страницы в Сети, с указанием домена, razdel – уникальное имя якоря, в пределах страницы его местонахождения.

Абсолютная ссылка на якорь

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

Абсолютные ссылки наиболее предпочтительны для SEO-оптимизации страницы и сайта, ибо, зачастую – якоря, на которые сделаны абсолютные ссылки – могут быть засчитаны поисковиком за абсолютно разные веб-адреса и тексты. И, даже – якоря, на которые сделаны абсолютные ссылки – могут предлагаться отдельными позициями при выдаче в СЕРП (страницу поисковой выдачи).

Недостаток работы абсолютной ссылки на якорь – полная перезагрузка страницы из сервера. Т.е. переход на якорь происходит с полной перезагрузкой страницы в браузер, даже если якорь и ссылка на него находятся на одной странице.

Полная перезагрузка страницы занимает дополнительное время, создаёт дополнительную нагрузку на сетевое подключение, дополнительно кушает трафик пользователя и самое главное – не работает без подключённого Интернета (в локальном или автономном режиме).

Посмотрите видео о применении якоря на странице сайта в html:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *