Главная Новости

Нововведенные атрибуты в HTML и их назначениеи применение

Опубликовано: 01.09.2018

Продолжая изучать язык HTML версии №5, содержание этой статьи будет посвящено понятию "ссылочные отношения". Обозначается система ссылочных отношений так: link relations . Что это такое? Это расширенное понимание ссылки. Так, если обыкновенная ссылка указывает путь к адресу ресурса, картинки или почты, то применение атрибута rel расширяет понимание ссылки, объясняя, почему именно эта конкретная ссылка отсылает нас к определенному адресу. Система отношений довольно обширна, и сегодня будут рассмотрены все возможные ее варианты. Реконструкция новой версии HTML затронула как систему link relations, так и атрибут rel.

Для более упрощенного понимания отношений link relations можно обрисовать ситуацию следующим образом: ссылка ведет нас к ресурсу, а атрибут rel объясняет нам, почему ссылка ведет к этому адресу. Ссылаться можно потому, что на данном ресурсе находится, например, файл стилей, который нужно задействовать с документом. Следующая причина – сайт, на который ведет ссылка, является лентой новостей RSS (это объединение нескольких XML-форматов, которые необходимы для отображения новостных лент, статей и их анонсов), которая наполнена тем же содержанием, что и документ (страница), но отображается в стандартном формате для подписки на RSS-новости. Также адрес может представлять языковый перевод этой страницы или быть её версией PDF. Ссылочные отношения применяются также, если ссылка ведет на последующие страницы электронной книги.

Помимо этого, разработаны еще несколько направлений в ссылочных отношениях. Гиперразметка HTML рассматривает отношения link relations в двух направлениях. Создание двух этих категорий происходит при помощи атрибута link . Первое направление содержит ссылки, ведущие на внешние веб-ресурсы, по определению включающиеся в документ. Второе направление – это гиперссылки на другие страницы. То есть, каждая ссылка ведет себя так, как указывает ей заданный атрибут rel . Ниже приведены несколько наглядных примеров:

Стандартный способ обращения к каскадным таблицам стилей CSS — <link rel="stylesheet" href="adress.css"/>, указывающий, что данная таблица стилей должна подключаться к документу для правильного его отображения.

Гиперссылка – внутренняя ссылка страницы. Переход по таким ссылкам необязателен, потому что к адресующимся страницам можно добраться и другим путем, а данная страница со ссылками будет правильно отображаться в браузере и без таких ссылок. Значение атрибута rel выглядит так:

1 2 <link rel=stylesheet/> или <link rel=alternate type=application/atom+xml/>

<link rel=stylesheet/> или <link rel=alternate type=application/atom+xml/>

Первый вариант выполняет подключение файлов стилей, второй же – обнаруживает новостную ленту RSS, представленную в Atom формате. Некоторая часть таких ссылочных отношений создавалась еще в стандарте HTML4, а некоторые – в microformats community. Задача пятой версии HTML в том, чтобы объединить в одно понимание все созданные ранее значения атрибута rel и стандартизировать их для более простого понимания всеми существующими браузерами. Также возможны варианты новых определений ссылочных отношений.

Как применяется rel-атрибут на практике? Зачастую этот атрибут работает вместе с тегом в боксе head. Некоторая часть атрибутов отношений может быть применена к обыкновенным гиперссылкам с употреблением тега <а>. Возможности языка HTML5 расширили возможности атрибута до использования его в элементе <area>.

Такое определение в языке HTML5 также претерпело некоторые изменения. К примеру, если применять определение rel=alternate вместе с атрибутом type, то это будет будет обозначать другой формат того же содержания документа.

rel=alternate плюс type=application/rss+xml или rel=alternate плюс type=application/atom+xml обозначает новостную ленту формата Atom или RSS. Перевод страницы на другой язык также указывается при помощи rel=alternate. В HTML5 для осуществления этого варианта применяется пара hreflang плюс rel=alternate .

При помощи атрибута rel=archives документ определяется, как представляющий архивный, или временной интерес. То есть, такая ссылка ведет к, например, архивным статьям с атрибутом rel=archives или каким-либо старым записям на сайте, которые в силу объективных причин визуально уже не отображаются на странице, но имеются в архивных документах. Этот атрибут также был разработан специально для HTML5.

Для того, чтобы обозначить авторство конкретной статьи, применяется атрибут rel=author . Направленное применение имеет в адресации на форму контактов на сайте или форму обратной связи. В HTML3 вместо этого атрибута использовался rev=made , который был более ограничен в возможностях.

Применение атрибута rel=external указывает на то, что документ, на который адресует нас ссылка, является частью другого ресурса. В WordPress данный атрибут весьма широко применяется в комментариях. Также разработан специально для HTML5.

Такие атрибуты, как rel=first, next, up, last, prev , появились только в языке версии 4. Предназначение этих атрибутов – связывать в одно целое части документов – несколько страниц или разбитую на несколько частей одну страницу. Для пятой версии HTML добавили атрибут rel=first , указывающий на начальную страницу документа, а также по-прежнему поддерживаются атрибуты rel=prev и rel=next , и добавлен rel=previous . На последнюю страницу документа указывает атрибут rel=last .

Для ассоциации иконки сайта с его содержимым используется атрибут rel=icon. Вы замечали, что рядом с адресной строкой высвечивается иконка сайта? Это работа следующей строчки:

1 <link rel="shortcut icon" href="/favicon.ico"/>

<link rel="shortcut icon" href="/favicon.ico"/>

Почти все браузеры не конфликтуют с этим атрибутом, привязывая иконку сайта к его страницам. В гиперразметке HTML5 появилась возможность определять размер изображения иконки при помощи size. Эта строка выглядит следующим образом:

1 <link rel="icon" href="favicon.png" sizes="16x16" type="image/png"/>

<link rel="icon" href="favicon.png" sizes="16x16" type="image/png"/>

Данная ссылка – коммерческого характера – говорит атрибут rel=nofollow . Также он применяется для того, чтобы показать игнорирование данной ссылки автором документа. Это нововведение было применено компанией Google и приведено к стандартам microformats community. Разработан этот атрибут был для того, чтобы противостоять ссылкам спамеров в комментариях. То есть, данный атрибут не передавал PR страницы, и пользоваться такими ссылками было бессмысленно. В настоящее время многие блоггеры используют атрибут rel=nofollow для проставления комментаторских ссылок.

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

Понравилась запись? Подпишитесь на обновления по почте:

Facebook

Читайте похожие статьи

rss