Урок 10 из 70 · 12 мин

Глобальные атрибуты

id, class, title, lang, dir, hidden, data-* и другие атрибуты, которые есть у любого элемента.

Ярлыки для всего

Нужно, чтобы цены были оранжевыми. Как мне их отметить?
Ника
Глобальными атрибутами — их можно ставить на ЛЮБОЙ элемент. class для стилей, id для ссылок, ещё пара полезных.

Атрибут

id

Уникальное имя

Что это: Имя элемента, единственное на странице.
Зачем: Чтобы сделать ссылку прямо на раздел: #menu.
Как: HTML
<section id="menu">…</section>

Атрибут

class

Группа

Что это: Имя группы. Может повторяться и быть несколько через пробел.
Зачем: Отметить все цены одним классом и покрасить разом в CSS.
Как: HTML
<span class="price hot">250 ₽</span>

Атрибут

title

Подсказка

Что это: Текст, который всплывает при наведении мыши.
Зачем: Короткое пояснение. Важное в него не прячь: на телефоне его не увидят.
Как: HTML
<abbr title="Без лактозы">БЛ</abbr>
Так это выглядит

Атрибут

lang · dir

Язык и направление

Что это: lang — язык фрагмента, dir="rtl" — текст справа налево.
Зачем: Английская фраза в меню прочитается скринридером по-английски.

Атрибут

hidden

Скрыть

Что это: Элемент не показывается и не читается скринридером.
Зачем: Спрятать то, что пока не нужно.
Как: HTML
<p hidden>Секретное меню</p>

Атрибут

data-*

Свои данные

Что это: Любые атрибуты с приставкой data-.
Зачем: Сохранить данные для скриптов: цену, id товара.
Как: HTML
<li data-price="250">Блокнот</li>

Атрибут

translate

Переводить или нет

Что это: Глобальный: no — не переводить автопереводчиком.
Зачем: Название «Север» не превратится в «Grain».
Как: HTML
<p>Магазин <span translate="no">Север</span></p>
Так это выглядит

Понятие

Ещё глобальные

Разберём по ходу курса

Что это: style, tabindex, accesskey, contenteditable, draggable, spellcheck, autofocus, autocapitalize, autocorrect, inert, nonce, popover, enterkeyhint, inputmode, writingsuggestions, is, itemid, itemprop, itemref, itemscope, itemtype.
Зачем: У каждого будет своя карточка в уроке, где он нужен.

Ваш ход

Задание

Карточка товара

Это карточка в меню. Дай article id raf, класс drink, атрибут data-price="290", а у «БЛ» сделай подсказку «Без лактозы» через title.

id raf — пока нет
Класс drink — пока нет
data-price="290" — пока нет
У «БЛ» есть подсказка title — пока нет

<article>
  <h2>Пенал</h2>
  <p>Можно <span>БЛ</span></p>
</article>

<article>
  <h2>Пенал</h2>
  <p>Можно <span>БЛ</span></p>
</article>

Результат обновляется при вводе

ПрактикаОбязательное задание

Уникальность

Выберите один ответ.

Чем id отличается от class?

Домашнее заданиеДля закрепления