Атрибуты



Влад Мержевич

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

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

Пустой атрибут (логический, булев)

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

<input disabled>
<input disabled="">
<input 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='Такой вид кладки называется "циклопическим"'>
Также вместо двойной кавычки в тексте можно использовать спецсимвол &quot;, а вместо апострофа — &apos;.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.