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

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

accesskey – позволяет получить доступ к элементу при помощи специальной комбинации клавиш, которая зависит от используемого браузера.
class – используется для указания имени класса стилевого оформления, который будет применяться к элементу, сформированному данным тегом.
contenteditable – разрешает редактирование текста прямо в браузере.
dir – задает направление и отображение текста.
draggable – разрешает перетаскивание элемента используя Drag and Drop API.
hidden – скрывает содержимое элемента от просмотра.
id – задает уникальное имя элемента, по которому к нему могут обращаться скрипты или задаваться именной (т.е. использующийся только для этого элемента) класс CSS.
lang – указывает браузеру, на каком языке написан текст внутри данного элемента.
spellcheck – указывает браузеру о необходимости проверки орфографии в тексте.
style – предназначен для определения стиля элемента при помощи правил CSS.
tabindex – определяет последовательность получения фокуса при переходе между элементами с помощью клавиши Tab.
title – создает всплывающую подсказку к элементу, которая появляется при наведении курсора на элемент.
translate – сообщает браузеру о том, что содержимое данного элемента переводить не нужно.

Примеры

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>
	
	<textarea tabindex="0" accesskey="s">
         Я &ndash; текстовое поле. Чтобы передать мне фокус,<br>
		нажмите спецкомбинацию клавиш текущего браузера + клавишу s.
    </textarea>
	
	<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