Назначение HTML-заполнителей ссылок

До того как HTML5 был выпущен, для тега требуется один атрибут: href. Но HTML5 делает даже этот атрибут необязательным. Когда вы пишете тег без каких-либо атрибутов, он называется ссылкой-заполнителем.

Ссылка-заполнитель выглядит так:

Предыдущий

Использование ссылок-заполнителей во время разработки

Почти каждый веб-дизайнер когда-то создавал ссылки-заполнители, пока разработка и создание веб-сайта. До HTML5 программист записывал в качестве заполнителя следующее:

текст ссылки

Проблема с использованием хэштег (#) в качестве ссылки-заполнителя означает, что ссылка активна, и это может вызвать путаницу у ваших клиентов. И, если разработчик забудет обновить их правильными URL-адресами, эти ссылки будут просто отображать ту же страницу, на которой находится пользователь, если щелкнуть.

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

instagram viewer

Использование ссылок-заполнителей на действующих сайтах

Ссылки-заполнители используются в веб-дизайне не только для разработка. Одно место, где может показаться ссылка-заполнитель, - это элементы навигации. Во многих случаях навигационные списки веб-сайтов позволяют каким-либо образом указать, на какой странице вы находитесь. Их часто называют индикаторами «вы здесь».

Большинство сайтов полагаются на атрибуты id на элементе, которому нужен маркер «вы здесь», но некоторые также используют атрибут class. Однако какой бы атрибут вы ни использовали, вам нужно проделать много дополнительной работы с каждой страницей, на которой есть навигация, добавляя и удаляя атрибут из правильных элементов.

С помощью ссылки-заполнителя вы можете написать свою навигацию по своему усмотрению, а затем просто удалить атрибут href из соответствующей ссылки при добавлении навигации на страницу. Для разработчиков быстрый совет, который поможет, - сохранить весь список навигации в виде фрагмента кода в редакторе, чтобы его можно было быстро скопировать и вставить. Затем вы можете просто удалить файл href. Вы также можете заставить свою систему управления контентом (CMS) делать то же самое.

Стилизация ссылок-заполнителей

Ссылки-заполнители легко стилизовать и отличить от других ссылок на вашей веб-странице. Просто убедитесь, что стилизованы как тег a, так и тег a: link. Например:

a {
красный цвет;
font-weight: жирный;
текстовое оформление: нет;
}
ссылка {
цвет синий;
шрифт: нормальный;
текст-оформление: подчеркивание;
}

Этот CSS сделает ссылки-заполнители жирным и красным шрифтом без подчеркивания. Обычные ссылки будут обычного веса, синего цвета и подчеркнуты.

Не забудьте сбросить любые стили вы не хотите, чтобы его переносили из тега. Например, font-weight установлен на полужирный для ссылок-заполнителей, поэтому для стандартных ссылок вам нужно будет установить его на:

шрифт: нормальный;

То же самое и с текст-украшение. Удалив его с помощью селектора a, он был бы удален для селектора a: link, если бы мы не вернули его.