Теория урока

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

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

Кратко

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

- Применяются для расширения возможностей тегов

- Примеры: accesskey, class, contenteditable, dir, hidden, id, style, title, tabindex

Атрибут accesskey

- Атрибут accesskey позволяет обращаться к тегу через сочетание клавиш

- Пример: accesskey = "a" в Internet Explorer вызывает alt + s + a

Атрибут class

- Атрибут class задает стилевой класс для связи тега и стиля CSS

- Примеры: классы могут состоять из латинских букв, цифр, дефиса и знака подчеркивания

Атрибут contenteditable

- Атрибут contenteditable включает или выключает редактирование текста

- Значения: true (включить) и false (выключить)

- Пример: contenteditable или contenteditable = ""

Атрибут dir

- Атрибут dir задает направление текста: ltr (слева направо) и rtl (справа налево)

- Пример: dir = "ltr"

Атрибут hidden

- Атрибут hidden скрывает тег от просмотра, но доступен через JavaScript

- Пример: hidden

Атрибут id

- Уникальный идентификатор для элемента

- Примеры: id может состоять из латинских букв, цифр, дефиса и знака подчеркивания

- Пример: id = "unique_id"

Атрибут style

- Атрибут style задает стили для элемента

- Пример: style = "background-color: red"

Атрибут title

- Всплывающая подсказка при наведении курсора

- Полезен для ссылок и картинок, помогает в SEO-оптимизации

- Стиль подсказки зависит от браузера и ОС, но можно изменить через JavaScript

Атрибут tabindex

- Атрибут tabindex устанавливает последовательность получения фокуса

- Пример: tabindex = "10"

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

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

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

Атрибут accesskey

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

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

Пример (html)

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

Атрибут class

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

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

Пример (html)

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

Атрибут contenteditable

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

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

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

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

Пример (html)

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

Атрибут dir

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

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

Пример (html)

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

Атрибут hidden

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

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

Пример (html)

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

Атрибут id

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

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

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

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

Пример (html)

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

Атрибут style

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

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

Пример (html)

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

Атрибут title

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

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

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

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

Пример (html)

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

Атрибут tabindex

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

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

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

Пример (html)

<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. На этом раздел закончен. Проходите тест и переходите к следующему разделу.

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

Атрибут accesskey

Атрибут class

Атрибут contenteditable

Атрибут dir

Атрибут hidden

Атрибут id

Атрибут style

Атрибут title

Атрибут tabindex

Похожие уроки Codebra