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

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

Атрибут accesskey

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

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

Атрибут class

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

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

Атрибут contenteditable

Очень интересный атрибут, но contenteditable потребуется, если вы знаете JavaScript. Например, он применяется при быстром редактировании текста и его сохранении, в общем, применений для него много. Атрибут contenteditable имеет два значения true и false. True – включить редактирование, false – выключить редактирование. False редко используют, если вы не пишите этот атрибут, значит он по умолчанию со значением false. Чтобы включить редактирование, чаще всего пишут contenteditable или contenteditable = "", параметр true указывать не обязательно. Далее пример:

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

Атрибут dir

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

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

Атрибут hidden

Владелец (тег) этого атрибута скрыт от просмотра и страницы отображается, словно его нет. Но при этом, он доступен через скрипты JavaScript. Далее пример:

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

Атрибут id

Уникальный идентификатор. Он может быть всего один на страницу, на то он и уникальный. Чаще всего, уникальные идентификаторы используют для дальнейшего обращения к ним через скрипты JavaScript. ID может состоять из латинских букв, обоих регистров, цифр, дефиса и знака подчеркивания. Русские буквы в имени уникального идентификатора использовать запрещено. Кстати, его еще называют «стилевой идентификатор», «уникальное имя элемента». Далее пример:

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

Атрибут style

Это третий способ задания стилей для элемента. Его значением являются стили, которые вы хотите применить. Далее пример:

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

Атрибут title

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

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

Атрибут 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>

Похожие уроки и записи блога

1. Напишите абзац и укажите два атрибута: title и class с любым содержанием (атрибутов у тега может быть сколько угодно и они должны быть разделены пробелом: атрибут1 = "значение1" атрибут2 = "значение2")
2. Напишите заголовок третьего уровня и укажите, что его можно редактировать(атрибут contenteditable)
3. Напишите любой текст в абзаце и скройте его при помощи атрибута hidden
4. Напишите курсивный текст (тег <i>) и добавьте всплывающею подсказку (атрибут title)

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.