HTML :: Универсальные атрибуты и атрибуты-события

Универсальные атрибуты html-элементов

В HTML 5 присутствует довольно значительное число атрибутов. Все они перечислены в официальной документации здесь. Мы будем знакомиться с ними по пере изучения новых тегов. Сейчас же обратим внимание на то, что если одни атрибуты применимы только к одному тегу, то некоторые из них имеют отношение сразу к нескольким. Например, атрибут charset используется только в теге <meta>, в то время как атрибут loop относится сразу к двум тегам: <audio> и <video>. Но и это не предел. Среди атрибутов встречаются и такие, которые применимы практически ко всем тегам сразу. Их называют универсальными атрибутами. Посмотреть их можно в официальной документации здесь, а также в нашем справочнике здесь (для каждого универсального атрибута отведена отдельная страничка с описанием и примерами).

Всего универсальных атрибутов более 20. Перечислим некоторые из них.

accesskey – в качестве значения принимает клавишу доступа (key), т.е. латинскую букву из диапазона a-z (раскладка клавиатуры должна быть переключена в режим английского языка) или цифру из диапазона 0-9, и позволяет получить доступ к элементу при помощи комбинации клавиш, которая зависит от используемого браузера:
- alt+key для Opera, Google Chrome и Яндекс.Браузер,
- shift+alt+key для Mozilla Firefox.
Несмотря на то, что атрибут является универсальным, свои функции он надежно выполняет только для тегов <a>, <area>, <button>, <input>, <label>, <legend>, <textarea>. В результате нажатия соответствующей браузеру комбинации клавиш совместно с указанной клавишей доступа элемент получает фокус и далее, в зависимости от вида элемента, может выполняться какое-нибудь действие, например, переход по ссылке, если фокус получает элемент «a». При этом в Mozilla Firefox данный универсальный атрибут работает и для других элементов, например, абзацев (см. пример №1).
class – используется для указания имени класса стилевого оформления, который будет применяться к элементу, сформированному данным тегом. Если в качестве значения атрибута указывается сразу несколько классов, то они перечисляются через пробел. Также отметим, что использовать русские буквы в именах классов нельзя. Используются латинские буквы, регистр которых имеет значение, цифры 0-9, символ дефиса - и знак подчеркивания _. Данный атрибут мы будем активно использовать при изучении CSS (от англ. Cascading Style Sheets — каскадные таблицы стилей) – формального языка, предназначенного для описания внешнего вида html-документов.
contenteditable – разрешает редактирование текста прямо в браузере. Может принимать два значения: contenteditable="true" и contenteditable="false". Разрешается вообще не указывать значение. Если атрибут присутствует, то значение подразумевается "true", иначе "false".
dir (от англ. direction) – задает направление и отображение текста. Может принимать два значения: dir="ltr", т.е. как обычно слева направо, и dir="rtl", т.е. справа налево, как принято, например, в арабских языках.
draggable – разрешает перетаскивание элемента используя Drag and Drop API.
hidden – скрывает содержимое элемента от просмотра. При этом сам элемент не отображается на странице, а его место занимают другие, видимые элементы. Этот атрибут не имеет значения. Одно его присутствие уже означает, что элемент будет скрыт.
id (от англ. identifier) – задает уникальное имя элемента, по которому к нему могут обращаться скрипты или задаваться именной (т.е. использующийся только для этого элемента) класс CSS. Как следует из определения, использование двух элементов с одинаковым значением id на странице не допустимо. Использовать русские буквы при определении идентификатора нельзя. Также, как и при определении имени класса, используются только латинские буквы, регистр которых имеет значение, цифры 0-9, символ дефиса - и знак подчеркивания _. Но начинаться идентификатор должен только с латинского символа!
lang (от англ. language) – указывает браузеру, на каком языке написан текст внутри данного элемента. Это позволяет браузеру правильно отображать некоторые символы и языковые особенности.
spellcheck – указывает браузеру о необходимости проверки орфографии в тексте. Понятно, что применение атрибута имеет смысл для редактируемых элементов, для которых атрибут contenteditable="true", или элементов, которые предназначены для ввода текста пользователем. При этом в браузере должна быть включена проверка орфографии. Может принимать два значения: spellcheck="true" и spellcheck="false".
style – предназначен для определения стиля элемента при помощи правил CSS. В качестве значений атрибута style указываются стилевые правила CSS: вначале следует имя стилевого свойства, затем через двоеточие его значение. Если к элементу применяются сразу несколько стилевых свойств, то они разделяются между собой точкой с запятой. Данный атрибут не стоит путать с парным тегом <style>, который мы рассмотрим позже.
tabindex – определяет последовательность получения фокуса при переходе между элементами с помощью клавиши Tab. В качестве значения атрибут принимает любое положительное целое число или нуль. По умолчанию у всех элементов значение принимается равным нулю. Поэтому, когда мы нажимаем клавишу Tab, браузер начинает передавать фокус элементам в порядке их появления в коде. Если же значение атрибута tabindex некоторых элементов отлично от нуля, то браузер начинает передавать фокус от элементов с меньшим значением к элементам, у которых значение атрибута больше. При этом допускается пропускать некоторые цифры. В любом случае браузер будет искать элемент со следующим наименьшим значением tabindex. Когда все элементы со значением атрибута отличным от нуля закончатся, браузер начнет передавать фокус элементам, у которых атрибут tabindex не задан или равен нулю, при чем в той последовательности, в которой они встречаются в коде.
title – создает всплывающую подсказку к элементу, которая появляется при наведени курсора на элемент. В качестве значения принимает обычную строку. Также не стоит путать его с парным тегом <title>.
translate – сообщает браузеру о том, что содержимое данного элемента переводить не нужно. Это требуется в ситуации, когда на странице присутствует сразу несколько языков или, например, при переводе инструкции по использованию бытовой техники с английского языка на русский, когда не требуется перевод названия кнопок, поскольку все они подписаны на английском. В качестве значений данный атрибут принимает translate="yes", которое установлено по умолчанию для всех элементов, и translate="no".

Код с использованием наиболее важных для нас тегов показан в примере №1.

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<!-- Это элемент «title», а не атрибут -->
	<title>Используем универсальные атрибуты</title>
</head>
<body>
	<p contenteditable="true" tabindex="5" spellcheck="false">
		Я &ndash; абзац, который можно редактировать.<br>
		Проверка орфографии отключена.
	</p>
	
	<p tabindex="0" accesskey="s">
		Я &ndash; абзaц, который нельзя редактировать, т.к. не указан<br>
		атрибут <span style="color: red">contenteditable</span>.<br>
		Зато в firefox я получаю фокус при нажатии<br>
		спецкомбинации клавиш текущего браузера (см. выше) +  
		<span style="color: green">s</span>.
	</p>
	
	<p tabindex="1" title="Мой tabindex равен единице!">
		<span hidden>А я показан не буду.</span>
		Наведите на меня курсор и подождите)))<br>
		Кстати, при нажатии <span style="color: green">Tab</span><br>
		я первым получаю фокус, т.к. у меня наименьшее значение<br>
		<span style="color: red">tabindex</span> из тех, что больше нуля.
	</p>
</body>
</html>

Пример №1. Использование универсальных атрибутов

Одиночный тег <br> в нашем примере формирует пустой элемент разметки «br», который вставляет в данное место кода принудительный разрыв строки, заставляя браузер продолжить выводить данные на новой строке. А парный тег <span> формирует элемент «span», который предназначен в основном для выделения небольших текстовых фрагментов строк или изображений. Это универсальный элемент, который никак не изменяет свое содержимое (в качестве примера посмотрите на второе предложение второго абзаца), зато легко приобретает дополнительные свойства объединяясь со стилями CSS через атрибуты class или id.

Что касается атрибута style, то мы в качестве значения атрибута использовали CSS-свойство color (т.е. цвет) и значения цвета "red" и "blue". Если бы мы указывали еще какие-нибудь свойства CSS в одном атрибуте style, то пришлось бы разделять их точкой с запятой.

Атрибуты-события

Кроме универсальных атрибутов выделяется еще одна обширная группа так называемых атрибутов-событий, которые используются для вызова специальных скриптов – обработчиков событий. Обработчик события запускается в тот момент, когда происходит событие, которое представляет данный атрибут. Так, например, если в открывающем теге <p> указать атрибут-событие onclick="hidden()", то при клике левой кнопкой мыши по абзацу выполнится некоторая гипотетическая функция hidden(), в результате чего абзац станет невидимым на странице.

Подробно рассматривать атрибуты-события мы будем при изучении JavaScript. Сейчас же только отметим, что ознакомиться с событиями можно на страничке, совершив переход по ссылке здесь. Посетите указанную страницу и обратите внимание, что в таблице события указываются с приставкой on, т.к. при использовании их в качестве атрибутов, ее присутствие обязательно.

Быстрый переход к другим страницам

Виды элементов html-разметки
Универсальные атрибуты и атрибуты-события
Форматирование исходного кода html-документа
Вернуться к оглавлению учебника