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

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

Универсальные атрибуты применяют, чтобы расширить ограниченные возможности тегов. Например, добавить всплывающую подсказку, прикрепить class или id и т.д. Атрибутов много, но мы рассмотрим только основные, которые применяются ко всем тегам.

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

Атрибут accesskey

Благодаря этому атрибуту, появилась возможность обращаться к тегу при помощи сочетания клавиш. Но, для каждого браузера свое сочетание клавиш: accesskey = "a", в Internet Explorer будет вызываться так: alt + s + a.

Далее пример:

<a accesskey = "c">ссылка</a>

Атрибут class

Задает стилевой class для связывания определенного тега и стиля CSS. В языке HTML можно указывать множество классов и разделять их пробелом. Классы могут состоять из латинских букв, обоих регистров, цифр, дефиса и знака подчеркивания. Русские буквы использовать запрещено.

Далее пример использования атрибута class:

<p class = "class1 class2">Абзац</p>

Атрибут contenteditable

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

Атрибут contenteditable имеет два значения: true и false. True – включить редактирование, false – выключить редактирование. False редко используют, потому что если не пишите этот атрибут, значит он по умолчанию со значением false.

Для включения редактирования пишите contenteditable или contenteditable = "", параметр true указывать необязательно.

Далее пример использования атрибута contenteditable:

<p contenteditable>Привет!</p>

Атрибут dir

Редко используемый, но полезный атрибут. Он задает направление текста: слева направо и справа налево. Атрибут dir принимает два значения: ltr – слева направо и rtl – справа налево.

Далее пример:

<p dir = "rtl">שבת — суббота</p>

Атрибут hidden

Владелец (тег) этого атрибута будет скрыт от просмотра. HTML-страница будет отображаться, словно, этого тега не существует. При этом, он доступен через скрипты JavaScript.

Далее пример:

<p hidden>Ты меня не видишь!</p>

Атрибут id

Атрибут id содержит уникальный идентификатор. Он может быть всего один на страницу, на то он и уникальный. Чаще всего, уникальные идентификаторы используют для дальнейшего обращения к ним через скрипты JavaScript.

Значение атрибута id может состоять из латинских букв обоих регистров, цифр, дефиса и знака подчеркивания. Русские буквы в имени уникального идентификатора использовать запрещено.

Кстати, его еще называют «стилевой идентификатор», «уникальное имя элемента». С ним мы ещё встретимся, когда будем изучать CSS.

Далее пример:

<div id = "help">div блок</div>

Атрибут style

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

Далее пример:

<span style = "color: blue; font-size: 20px">П</span>ривет

Атрибут title

Атрибут title задает всплывающую подсказку. При наведении курсором, на какой либо элемент, если у него установлен title, показывается содержимое этого атрибута в виде всплывающей подсказки.

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

Стиль этой подсказки зависит от браузера и операционной системы. Его невозможно изменить при помощи HTML и CSS кода, но атрибут title поддается изменению при помощи скриптов JavaScript.

Далее пример использования атрибута title:

<a href = "#" title = "link">ссылка</a>

Атрибут tabindex

Атрибут tabindex устанавливает последовательность получения фокуса, после нажатия на клавишу Tab.

Переход к элементам, у которых не задан атрибут tabindex, осуществляется в конце. Если значение отрицательное, то фокус этот элемент не получит.

Далее пример:

<p><button tabindex = "-1">Никакой</button></p>
<p><button tabindex = "1">Первый</button></p>
<p><button tabindex = "3">Третий</button></p>
<p><button tabindex = "2">Второй</button></p>

В этом уроке познакомились с основными универсальными атрибутами: accesskey, class, contenteditable, dir, hidden, id, style, title и tabindex. На этом раздел закончен. Переходите к следующему разделу.

Урок 25. Что такое и как создать ссылки в HTML