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

html file Многие теги в HTML имеют атрибуты. Часто эти атрибуты являются опциональными, а некоторые и универсальны. Сегодня поговорим о таких универсальных атрибутах, которые применяются практически ко всем тегам в HTML.

Ниже перечень универсальных атрибутов тегов и примеры их применения.

accesskey

Позволяет получить доступ к элементу с помощью заданного сочетания клавиш.

<a href="images/primer.jpg" accesskey="x">Клавиша X для открытия ссылки</a>

Разные браузеры используют различные комбинации клавиш. Допустим, мы используем клавишу X, тогда команды будут иметь следующий вид:

Google Chrome: Alt+X
Mozilla Firefox: Shift+Alt+X
Internet Explorer: Alt+X
Safari: Alt+X

Если мы указываем другую клавишу, тогда и комбинация будет другой.

Атрибут accesskey применим к тегам <a>, <area>, <button>, <input>, <label>, <legend> и <textarea>.

class

Задаёт стилевой класс, который позволяет связать определённый тег со стилевым оформлением (CSS). Допускается указывать сразу несколько классов, разделяя их пробелами. Имена классов могут содержать в себе латинские буквы, цифры, символы дефиса (-) и подчеркивания (_). Использовать кириллицу в именах классов нельзя.

<!DOCTYPE html>
<html>
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Атрибут class</title>
    <style>
        p.red {
            font-family: arial, helvetica, sans-serif;
            color: red; 
        }
    </style>
   </head>
   <body>
       <p class="red">Это текст красного цвета</p>
   </body>
</html>

contenteditable

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>contenteditable</title>
 </head>
 <body>
  <h1 contenteditable="true">Пример</h1>
  <p contenteditable="true">Пример доступного для редактирования текста.</p>
 </body>
</html>

Атрибут contenteditable может принимать лишь два значения: true и false. Первое значение означает, что режим редактирования включен, второе значение означает, что режим редактирования выключен. Вместо true можно указать и просто пустое значение (contenteditable=»») или вообще его не писать (contenteditable).

contextmenu

Устанавливает контекстное меню для элемента. В качестве значения нужно указывать идентификатор меню, созданного при помощи тега <menu>.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>contextmenu</title>
 </head>
 <body>
  <p><img src="images/figure.jpg" alt="" contextmenu="edit"></p>
  <menu type="context" id="edit">
   <li>Вырезать</li>
   <li>Копировать</li>
   <li>Вставить</li>
   <li>Редактировать</li>
   <li>Выравнивание</li>
  </menu>
 </body>
</html>

dir

Задаёт направление и отображение текста — слева направо или справа налево. Использовать данный атрибут каждый раз не представляет нужды по той причине, что современные веб-браузеры способны самостоятельно «понимать» нужное направление текста, если используется кодировка Unicode, но его можно изменить вручную. Исключением являются арабские и еврейские символы, для которых приоритетным является направление, заложенное в Unicode. По этой причине атрибут dir на них не действует.

Атрибут dir может принимать одно из двух значений: ltr (текст отображается слева направо) или rtl (текст отображается справа налево).

<p dir="rtl">текст для отображения справа налево</p>

hidden

Скрывает содержимое элемента от просмотра. Этот элемент не будет отображаться на странице, но будет доступен через скрипты. В качестве значения можно указать hidden (hidden=»hidden») или оставить атрибут пустым (hidden=»» или hidden).

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>hidden</title>
  <style>
   #link {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
   }
  </style>
  <script>
   function showForm() {
    document.getElementById("auth").hidden = false;
    document.getElementById("link").hidden = true;
   }
  </script>
 </head>
 <body>
  <p id="link" onclick="showForm()">Авторизация на сайте</p>
  <form id="auth" hidden>
   <p><label>Логин: <input name="user" required></label></p>
   <p><label>Пароль: <input name="pass" type="password" required></label></p>
   <p><input type="submit" value="Войти"></p>
  </form> 
 </body>
</html>

id

Задаёт стилевой идентификатор, который представляет из себя уникальное имя элемента. Указанное имя используется для изменения стиля элемента и обращения к нему через скрипты. Идентификатор должен встречаться в коде документа только один раз.

Идентификатор обязательно должен начинаться с латинского символа, может содержать в себе латинские буквы, цифры, символы дефиса (-) и подчеркивания (_). Использовать кириллицу в именах идентификаторов нельзя.

<div id="help">Нужна помощь?</div>

lang

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут lang</title>
  <style>
   p {
    font-size: 110%; /* Размер текста */ 
   }
   q:lang(de) {
    quotes: "\201E" "\201C"; /* Вид кавычек для немецкого языка */ 
   }
   q:lang(en) {
    quotes: "\201C" "\201D"; /* Вид кавычек для английского языка */ 
   }
   q:lang(fr), q:lang(ru) { /* Вид кавычек для русского и французского языков */ 
    quotes: "\00AB" "\00BB"; 
   }
  </style>
 </head>
 <body>
  <p>Цитата на французском: <q lang="fr">Ce que femme veut, Dieu le veut</q>.</p>
  <p>Цитата на немецком: <q lang="de">Der Mensch, versuche die Gotter nicht</q>.</p>
  <p>Цитата на английском: <q lang="en">То be or not to be</q>.</p>
 </body>
</html>

spellcheck

Указывает веб-браузеру, нужно ли проверять правописание и грамматику в тексте. Атрибут может применяться практически ко всем тегам, но результат будет заметен только для полей форм (теги <input> и <textarea>) и у редактируемых элементов (у которых установлен атрибут contenteditable). Также нужно понимать, что браузер должен поддерживать проверку орфографии и она должна быть включена.

Атрибут spellcheck может принимать одно из двух значение: true (проверка орфографии включена) и false (проверка орфографии выключена). Вместо true допустимо указывать пустое значение (spellcheck=»») или вообще его не указывать (spellcheck).

<p contenteditable="true" spellcheck="true">Проверка правописания этого текста включена.</p>

style

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

<p style="color: red; font-size: 2em">Пример применения стиля.</p>

tabindex

Устанавливает порядок получения фокуса при переходе между элементами при помощи клавиши Tab. Переход происходит от меньшего значения к большему. Строгая последовательность не важна: можно пропускать цифры при нумерации или начинать нумерацию не с единицы. Значением атрибута могут быть только целые положительные числа или ноль. Переход к элементам, которые не были пронумерованы или с tabindex=»0″ происходит после всех пронумерованных элементов в том порядке, в котором они указаны в коде.

tabindex применяется к тегам <a>, <area>, <button>, <input>, <object>, <select> и <textarea>.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут tabindex</title>
 </head>
 <body>
  <p>Для перехода между элементами используйте Tab.</p>
  <p><button>Шестой элемент</button></p>
  <p><button>Седьмой элемент</button></p>
  <p><button tabindex="5">Пятый элемент</button></p>
  <p><button tabindex="1">Первый элемент</button></p>
  <p><button tabindex="3">Третий элемент</button></p>
  <p><button tabindex="2">Второй элемент</button></p>
  <p><button tabindex="4">Четвертый элемент</button></p>
 </body>
</html>

title

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

<p title="Это всплывающий текст.">Наведите мышью на этот текст.</p>

xml:lang

Атрибут применяется в XHTML-документах и указывает язык всего текста или его фрагмента.

Для всего документа:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">

Для фрагмента:

<p xml:lang="ru">Текст на русском языке.</p>

Как и в атрибуте lang, в качестве значения используются общеупотребительные коды языков.