• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • SEO продвижение
  • Вопросы и ответы
  • Термины оптимизатора
  • HTML-уроки
  • Интернет
  • Мои услуги
  • Реклама на сайте
  • Обратная связь
Главная → HTML уроки и советы → Как сделать якорь ссылки

Как сделать якорь ссылки

Что такое якорь ссылки? Это те же ссылки, но с переходом на конкретное место на странице сайта.

Чаще всего ссылки якори применяются в больших статьях, чтобы сразу сослаться на конкретное место. Также они всегда применяются при создании блока "содержание статьи" (если, конечно, такой блок вообще используется).

Синтаксис якоря ссылки:

<a href="#yakor_1">Ссылка-якорь 1</a> <a href="#yakor_2">Ссылка-якорь 2</a> ... ... <h2 id="yakor_1">Какой-то заголовок для якоря 1</h2> <p> ... </p> <h2 id="yakor_2">Какой-то заголовок для якоря 2</h2> <p> ... </p>

Ссылка для якоря обладает следующими особенностями:

1. Если ссылка должна вести на эту же страницу, то просто указываем через решетку # название якоря. В нашем примере #yakor_1.



2. Если ссылка ведет на другую страницу, то нужно прописать ее адрес, а потом через решетку уже якорь:

<a href="/categ/adres_stranicy.html#yakor_1">Ссылка-якорь 1</a>

Место в которое ведет якорь должно быть помечено через id. Например, в нашем случае это id="yakor_1". Обратите внимание, что решетка отсутствует.

В выше рассмотренным примере мы применили якорь к тегу <h2>, но это лишь пример. Якорь можно вставлять в любом теге, который позволяет применить атрибут id.


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

В больших статьях применения подобных конструкций более чем обосновано и нужно. Ведь так удобно в любом месте статьи сослаться на какой-то заголовок или раздел другой статьи.



Читайте также:
• HTML тег <a> - подробное описание с примерами
• Названия html цветов (таблица кодов цветов)
• Специальные коды символов для HTML
• Как убрать/сделать подчеркивание ссылки
• Как создать favicon.ico для сайта
• Как сделать форму обратной связи на php с каптчей

← Перейти в каталог html уроков и советов

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2019 - Zarabotat-Na-Sajte.ru