Автор: Даниэль Скокко
Перевод: Всеволод Козлов

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

Якорь – имя, которое Вы присваиваете какому-либо элементу веб-страницы. Например, Вы можете заголовку присвоить имя «heading 1».

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

Реализацию данного приёма можно увидеть, наверное, в каждом оглавлении (например, длинные статьи всегда имеют подобным образом построенное оглавление), в ссылках (например, «На верх страницы», «В начало статьи» и т.д.)

Очень ярким примером использования данного приёма является статья ссылки в HTML документах, размещённая на сайте W3C. Чтобы убедиться, наведите курсор мыши на ссылки из оглавления данной статьи, расположенного в самом начале страницы. А затем просмотрите код страницы.

Чтобы создать якорь, надо к необходимому элементу веб-страницы добавить атрибут id=”якорный-текст”. Элемент веб-страницы может быть любой, например, заголовок, абзац и т.д. Допустим, что Вы хотите создать якорь для определённого абзаца текста. Вот так будет выглядеть код в данном случае:

<p id="якорный-текст">Текст абзаца…</p>

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

<a href="http://www.site.com/page.php#якорный-текст">текст ссылки</a>

Т.е. это обычная ссылка на страницу с якорем + на конец ссылки добавляется #якорный-текст.

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

Оригинал статьи: Linking Inside a Page





Смотрите также:

Понравилась статья? Поделитесь ей в социальных сетях: