Ссылка в тексте — Якорь [HTML]

Сегодня прочитал в книжке про ссылки и про якори. Про ссылки любой вебмастер знает, а про якори может и не знать. Я работал с якорями несколько раз за всю свою деятельность когда-то, потому что не умел ими пользоваться. И последний раз, когда они мне понадобились, то я долго мурыжил поиск для моих ответов.

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

На самом деле это очень удобные ссылки, которые ведут пользователя в определенное место текста. Последний раз я их использовал, когда писал длинную статью на моём сайте про фильмы. Статья называется Характеристика фильмов. Качество изображения, звука и перевод. Статья получилась большая, но я ужасно не хотел ее дробить на несколько маленьких, хотя контекст упорно просил меня. Дело в том, что в статье было затронуто 4 подраздела одной темы.

Представляете себе? Если меня интересует только одна часть текста — мне будет сложно листать до определенного момента статью в несколько тысяч слов. Поэтому я вспомнил про якоря. Если я как-то не так выражаюсь, то попробую сформулировать по-другому:

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

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

Место заключается в теги <a name=»miroslavs.com»></a> или <a id=»miroslavs.com»></a>. Тег можно оставить пустым, а можно и взять определенный текст внутрь тега. В данном случае я заключил «Хорошее качество» в тег.

Позже в оглавлении или где вам нужнассылка мы даем обычную ссылку вида <a href=»#miroslavs.com»>ссылка</a>, используя символ # мы указываем, что это не гиперсылка, а якорь в тексте. Нажав на данную ссылку пользователь попадает в определенное место в тексте. Все ссылки в моей статье «про качество фильмов» являются якорями:

Как видите, ссылки имеют обычный вид, как обычные ссылки, но ведут в определенное место. Позже я понял, что мне это недостаточно, так-как ссылки будут отображаться как в самой странице, так и в превью к статье (неполной версии). И у меня возник вопрос «как сделать ссылку на место в тексте на другой странице» и все оказалось проще простого. Ссылка должна иметь вид: <a href=»ссылка_на_страницу#якорь»>

Примеры вы можете посмотреть прямо здесь:

  • внизу справа каждой статьи моего блога есть кнопка при нажатии на которую вы попадете вверх
  • ссылка на место, где я описывал якори выше

Как видите, ничего сложного, но частенько может упростить жизнь

Обсуждение: 22 комментария

  1. Mari:

    Всегда хотела научиться делать якорные ссылки, смотрится намного симпатичнее, чем обычные ссылки.
    Вот только можно ли было бы сделать такие ссылки на чужом сайте???

    Ответить
    1. Если на чужом сайте вам создадут якорь, то ссылку на него вы можете вставить куда угодно.

      Ответить
  2. Совершенно ничего не понятно.Что куда и перед чем ставить!:((Можно по человечески писать,раз уж объясняете.

    Ответить
    1. помоему подробнее невозможно, что конкретно не понятно?

      Ответить
  3. Алексей:

    Спасибо, Miroslav! Пригодилось!

    Ответить
  4. Спасибо большое за статью! Я, конечно, человек очень далёкий от программирования и всяких там html-ов, пришлось немного повозиться, но зато результат меня порадовал — давно не могла разобраться в этой теме.
    Зато теперь знаю, как сделать якорь в тексте на вордпрессе. Очень этого не хватало.
    Ещё раз спасибо!!!

    Ответить
  5. Наталия:

    Спасибо за статью. Очень помогла. Разобралась за 5 минут.

    Ответить
  6. Спасибо за подробное описание! Очень пригодилось!

    Ответить
  7. Очень сложно написано. Нет человеко понятных выделенных примеров. Информации на две строчки, а растянули на А4. В целом интересно, но много.

    Ответить
  8. Анатолий:

    С якорем без примеров не понятно. Куда вписываются теги?

    Ответить
  9. виталий федосеев:

    Поставил ссылку внутри страницы, классно. спасибо.

    Ответить
  10. виталий федосеев:

    Читаю отзывы. Чего непонятно то? href=”# это откуда ссылка начинается, идентификатор <a id= куда приводит. Что непонятного?

    Ответить
  11. Вячеслав:

    Добрый день!
    Все понятно, что и как! Спасибо! Вопрос: а как сделать выделенным ту часть на которую ссылается якорь??? Т.е. есть несколько коротких статей, 2-3 строки, нужно что бы место куда ссылается якорь было выделено каким-нибудь фоном… Это реально???

    Ответить
  12. Olga:

    при всем уважении к автору статьи, написано Не понятно. Ощущение, что те, кто «понял» — заказные комменты.
    Объясните проще с примерами, если цель вашего сайта — помогать людям и быть полезным.

    Ответить
    1. Вообще-то все с примерами автор написал….

      Ответить
  13. Анатолий:

    Без примеров новичку ничего не понять. Можно было сократить объем в 3 раза за счет примеров.

    Ответить
  14. Большое спасибо!) Как раз очень часто сталкиваюсь с тем, что нужно сделать перенаправление на ту или иную часть текста для напоминания различных моментов по тематике своего блога — решил поюзать поиск для решения и нашел Вас.
    Еще раз огромное спасибо! Очень нужная вещь!

    Ответить
  15. Михаил:

    Спасибо, очень помогли.

    Ответить
  16. Здорово. Спасибо за советы!

    Ответить
  17. Ничего не поняла, можно с конкретным примером?

    Ответить
    1. Уж более подробно расписать я бы не смог 🙂

      Ответить
  18. Был на двух сайтах, ни черта не понял, у вас более доступно и понятно для новичка.
    Спасибо.

    Ответить

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

© 2019 Miroslavs.com ·  Дизайн и техподдержка: Goodwinpress.ru