Атрибуты тегов

Как Вы, возможно, помните, тэги это метки, указывающие браузеру, как нужно представлять ваш web-сайт. (Например, <br> информирует браузер, что нужно сделать перевод строки). В некоторых тэгах вы можете вводить дополнительную информацию. Такая дополнительная информация называется "атрибут".

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

Некоторые теги есть смысл использовать только с атрибутами. Наиболее яркий пример — тег <img>, обозначающий изображение. Для него обязательно нужно указывать атрибут src, который задаёт адрес картинки (иначе браузер не сможет загрузить её).

Форма записи

В общем случае тег записывается следующим образом:

<имя-тега атрибут1="значение1" атрибут2="значение2" ...>

Атрибутов может быть несколько, вот примеры:

<p class="important">...</p>
<a class="external" href="https://htmlacademy.ru">...</a>
<img class="avatar" src="keks.png">

Любые атрибуты нечувствительны к регистру, пишутся внутри открывающего тега и содержат имя и значение. В именах атрибутов нельзя использовать пробелы, кавычки, знак больше (>), слэш (/) и равно (=), а также любые символы не определенные в Юникоде. В значениях атрибутов допустимо писать текст и спецсимволы за исключением амперсанда (&), который должен заменяться на &.

Каждый атрибут тега относится к определенному типу (например: текст, число, путь к файлу и др.), который обязательно должен учитываться при написании атрибута. Так, упоминаемый ранее тег <img>, добавляет на веб-страницу рисунок, а его атрибут width задает ширину изображения в пикселах. Если поставить не число, а нечто другое, то значение будет проигнорировано и возникнет ошибка при валидации документа.

Различают несколько способов написания атрибутов и их значений.

Значение по умолчанию

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

Порядок атрибутов в тегах

Порядок атрибутов в любом теге не имеет значения и на результат отображения элемента не влияет. Поэтому теги вида <img src="/images/title.gif" width="438" height="118"> и <img height="118" width="438" src="/images/title.gif"> по своему действию равны.

Атрибуты без значений

Допустимо использовать некоторые атрибуты у тегов, не присваивая им никакого значения. Например

<input disabled>
<input disabled="" >
<input disabled="disabled">

Этот атрибут(disabled) не имеет значения, поведение тега определяет лишь наличие этого атрибута. Если такой атрибут указан, подразумевается, что установлено значение «истина», а отсутствие атрибута означает «ложь». Само значение можно не указывать, достаточно написать один лишь атрибут. Также разрешается в качестве значения писать пустую строку или имя атрибута.

Браузеры включают атрибут даже при наличии недопустимых значений вроде true или 1. Но лучше избегать таких решений, поскольку они противоречат спецификации HTML5 и не гарантируют правильную работу.

Значение без кавычек

Значение пишется непосредственно после знака равно идущим вслед за именем атрибута. До и после знака равно можно вставлять любое количество пробелов или обойтись без них.

<img src=link.html alt=Картинка>

Здесь атрибутами являются src и alt, а после знака = идёт их значение без кавычек. Поскольку атрибуты разделяются между собой одним или несколькими пробелами, то при отсутствии кавычек легко допустить ошибку, когда браузер воспримет предлагаемое нами значение как атрибут.

<img src=link.html alt=Картинка в тексте>

Здесь значением атрибута alt будет слово «Картинка», остальные слова воспринимаются как неверные атрибуты.

Использование двойных кавычек

Значение берётся в двойные кавычки, обычно такая форма указывается для текста.

<input type="checkbox" >

Использование одинарных кавычек

Вместо двойных кавычек также допустимо писать одинарные.

<input type='checkbox' >

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

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

Кавычки внутри значений

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

<img src="r.jpg" alt="Город Р'льех" >

Соответственно, текст содержащий внутри двойные кавычки надо взять в одинарные.

<img src='c.jpg' alt='Такой вид кладки называется "циклопическим"' >

Также вместо двойной кавычки в тексте можно использовать спецсимвол ", а вместо апострофа — '.

Атрибуты data-*

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

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

<ul>
    <li data-damage-resistance="40" data-weight="45" 
        data-effect="+10 Сопротивляемость радиации">
        Силовая броня Клёна</li>
    <li data-damage-resistance="40" data-weight="45" 
        data-effect="+15 Сопротивляемость радиации">
        Силовая броня Анклава</li>
    <li data-damage-resistance="50" data-weight="40" 
        data-effect="+25 Сопротивляемость радиации">
        Силовая броня T-51b</li>
</ul>

Сами атрибуты никак не выводятся в браузере, поэтому мы увидим обычный список.

Глобальные(универсальные) атрибуты

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

Список глобальных атрибутов тегов HTML

accesskey: Атрибут accesskey позволяет активировать ссылку с помощью некоторого сочетания клавиш с заданной в коде ссылки буквой или цифрой. Браузеры при этом используют различные комбинации клавиш.
class: Задаёт стилевой класс, который позволяет связать определенный тег со стилевым оформлением. В значении допускается указывать сразу несколько классов, разделяя их между собой пробелом.
contenteditable: Сообщает, что элемент доступен для редактирования пользователем — допускается удалять текст, и вводить новый. Также работают стандартные команды вроде отмены, вставки текста из буфера и др.
contextmenu: Устанавливает контекстное меню для элемента. В качестве значения указывается идентификатор меню созданного с помощью тега <menu>.
dir: Задает направление и отображение текста — слева направо или справа налево. Браузеры обычно самостоятельно различают направление текста, если он задан в кодировке Юникод, но с помощью атрибута dir можно указать, в каком направлении отображать текст. Для арабских и еврейских символов приоритетным является направление, заложенное в Юникод, поэтому на них атрибут dir действовать не будет.
draggable: Позволяет перетаскивать элемент для дальнейшего манипулирования с ним.
dropzone: Указывает, что делать с перетаскиваемым элементом.
hidden: Скрывает содержимое элемента от просмотра. Такой элемент не отображается на странице, но доступен через скрипты.
id: Задаёт идентификатор — уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.
lang: Текст документа может быть набран как на одном языке, так и содержать вставки на других языках, которые могут различаться по своим правилам оформления текста. Например, для русского, немецкого и английского языка характерны разные кавычки, в которые берется цитата. Чтобы указать язык, на котором написан текст внутри текущего элемента и применяется атрибут lang. Браузер использует его значение для правильного отображения некоторых символов.
spellcheck: Указывает браузеру проверять или нет данный элемент на правописание и грамматику в тексте. Хотя атрибут можно устанавливать практически для всех элементов, результат будет заметен только для полей форм, а также редактируемых элементов (у них установлен атрибут contenteditable).
style: Применяется для определения стиля элемента с помощью правил CSS.
tabindex: Атрибут tabindex устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab. Переход происходит от меньшего значения к большему, например от 1 к 2, затем к 3 и так далее. При этом строгая последовательность не важна, допускается пропускать какие-то числа и начинать с любой цифры. Если значения tabindex у элементов совпадают, тогда учитывается их порядок появления в коде.
title: Создаёт всплывающую текстовую подсказку, которая появляется при наведении курсора на элемент. Вид такой подсказки зависит от браузера, настроек операционной системы и не может быть изменен с помощью HTML-кода или стилей.