Урок с практикой по HTML (Онлайн курсы)
Выбрать другой урок из курса
Обсуждение
Теория урока

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

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

Атрибут accesskey

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

Код HTML
<a accesskey = "c">ссылка</a>

Атрибут class

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

Код HTML
<p class = "class1 class2">Абзац</p>

Атрибут contenteditable

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

Код HTML
<p contenteditable>Привет!</p>

Атрибут dir

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

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

Атрибут hidden

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

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

Атрибут id

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

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

Атрибут style

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

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

Атрибут title

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

Код HTML
<a href = "#" title = "link">ссылка</a>

Атрибут 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>
<
×
>
Курс «Разметка текста»
Урок 1.1. Заголовки и подзаголовки в HTML
Урок 1.2. Практика: заголовки и подзаголовки в HTML (практика 1)
Урок 2.1. Что такое абзац в HTML (тег P)?
Урок 3.1. Перенос строки и разделительная линия в HTML
Урок 3.2. Практика: Перенос строки в HTML
Урок 4.1. Нумерованный список в HTML
Урок 5.2. Что такое маркированный список в HTML
Урок 6.2. Акцентирование (выделение) текста в HTML
Урок 6.3. Практика: жирно-курсиво-перечеркнутый
Урок 7.2. Цитаты в HTML
Урок 8.2. Верхний и нижний индекс в HTML
Другие курсы
Курс 1. Знакомство с HTML
Курс 3. Ссылки
Курс 4. Изображения
Курс 5. Таблицы
Курс 6. Формы
Курс 7. HTML5
Курс 8. Остальное
Курс 9. Знакомство с CSS
Курс 10. Селекторы в CSS
Курс 11. Структура и каскад
Курс 12. Единицы измерения
Курс 13. Шрифт
Курс 14. Свойства текста
Курс 15. Форматирование
Курс 16. Отступы, рамки, поля
Курс 17. Цвета и фон
Курс 18. Позиционирование
Курс 19. Верстка таблиц
Курс 20. Списки
Курс 21. Анимация
Курс 22. Практика с htmlbook.ru
Курс 23. Элементы сайта
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.