Краткий курс 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" />