Краткий курс HTML 5
7. Ссылки
Веб-страницы отличаются от своих бумажных аналогов в первую очередь наличием гиперссылок, связывающих документы друг с другом. Для обозначения таких ссылок применяется тег <a>
. Адрес страницы (URI), которую должен загрузить браузер при нажатии на ссылку, указывается в атрибуте href
.
<a href="http://www.exlab.net/">текст ссылки</a>
Если язык страницы, на которую ведет ссылка, отличен от языка ссылающейся страницы, то можно добавить атрибут hreflang
, значением которого должен быть код языка (ISO 639). Также через дефис можно добавить код страны (ISO 3166).
<a href="http://www.example.com/" hreflang="en-US">Example</a>
Атрибут target
указывает браузеру, в какой вкладке открывать страницу. Возможные значения:
_self | — в той же вкладке (по умолчанию) |
_blank | — в новой вкладке |
_parent | — в родительском окне (если ссылка расположена во фрейме) |
_top | — в главном окне (для ссылок во фреймах внутри фрейма и т. д.) |
имя_фрейма | — в указанном фрейме (см. главу «Фреймы») |
Этот же тег можно применять для ссылок на конкретную часть самого же ссылающегося документа. Для этого перед этой частью необходимо вставить элемент <a>
, присвоив ему идентификатор id
с уникальным значением. В предыдущих версиях HTML для этого применялся атрибут name
, но начиная с HTML 5 он считается устаревшим и заменен на id
. Атрибут href
при этом не нужен, поскольку это не гиперссылка, а всего лишь метка (якорь), на которую она будет ссылаться. Ссылку же добавляйте там, где она необходима, указав в атрибуте href
значение id
вашей метки и добавив перед ним символ #. При нажатии на такую ссылку страница не будет перезагружена, а лишь изменится позиция скроллера.
<a id="top"><h1>Заголовок</h1></a>
<p>Многостраничный текст (иначе результат не будет заметен)</p>
<p><a href="#top">Вернуться вверх</a></p>
Тег <a>
может указывать не только на HTML-страницы, но и на файлы самых разных типов. При необходимости MIME-тип ресурса определяется в атрибуте type
.
А в атрибуте rel
можно указать, какое отношение ресурс имеет к ссылающейся странице. Значением может быть любой текст, однако некоторые варианты являются общепринятыми и зафиксированы в стандарте HTML. Можно указать несколько значений, разделяя их пробелом. Этот атрибут активно применяется в так называемых микроформатах. Суть их заключается в использовании определенных наборов значений, с помощью которых человек или программа может получить дополнительную информацию о веб-странице. Такие наборы определяются в соответствующих соглашениях, коих существует великое множество, на любой вкус и цвет. Но сейчас мы не будем на этом задерживаться.
В HTML 5 тегу <a>
добавлен атрибут media
, который можно использовать только вместе с href
. Он позволяет указать тип носителя, для которого предназначен ресурс. Вот основные значения, которые принимает media
:
аll | — для всех устройств (по умолчанию) |
screen | — для экранов компьютеров |
tty | — для носителя с фиксированной сеткой для символов (телетайпы и т. п.) |
tv | — для устройств типа телевизора |
projection | — для проекторов |
handheld | — для карманных устройств |
print | — для страничных документов (предварительный просмотр печати) |
braille | — для тактильных устройств с алфавитом Бройля |
aural | — для синтезаторов речи |
Кстати, об адресах. В гиперссылках вы можете указывать как абсолютный (полный), так и относительный (сокращенный) путь к ресурсам. Например:
Абсолютные URI: | Относительные URI: |
---|---|
http://www.exlab.net/html/ |
relative/file.txt |
Относительные пути по умолчанию расчитываются от полного пути к вашему документу. Это правило можно изменить, с помощью элемента <base />
с атрибутом href
. В нем указывается базовый путь, относительно которого и будут рассчитываться все последующие адреса (поэтому обычно <base />
размещают повыше, внутри <head>
). На ссылках и прочих элементах с указанными абсолютными адресами это никак не отразится.
<head>
...
<base href="http://www.exlab.net/" />
</head>
<a href="http://www.exlab.net/contact.html">абсолютный URI</a>,
<a href="contact.html">относительный URI</a>
В приведенном примере неважно, находитесь ли вы на http://www.exlab.net/ или http://www.exlab.net/html/links.html, вторая ссылка (с относительным URI) все равно указывает на ту же страницу, что и первая (с абсолютным URI). Если же убрать элемент <base />
, то конечный адрес второй ссылки будет зависеть от адреса самой ссылающейся страницы:
Адрес ссылающейся страницы: | Адрес ссылки: | |
---|---|---|
http://www.exlab.net/ | → | http://www.exlab.net/contact.html |
http://www.exlab.net/html/links.html | → | http://www.exlab.net/html/contact.html |
Еще одним атрибутом тега <base />
является target
, с помощью которого можно установить значение по умолчанию аналогичным атрибутам всех ссылок в документе.
Существует еще один тег, отвечающий за связь документа с другими ресурсами. Это непарный тег <link />
, размещаемый внутри <head>
. Его атрибуты в стандарте HTML 5 идентичны атрибутам тега <a>
, за тем лишь исключением, что href
и rel
являются обязательными, а target
отсутствует.
Элемент <link />
не создает гиперссылку, а подключает какой-либо внешний ресурс к документу. Браузеры определяют назначение и тип ресурса по атрибутам rel
и type
. Например, элемент, подключающий к документу таблицы стилей (CSS), выглядит примерно так:
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
А указать иконку документа можно, например, таким образом:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />