← HTML & CSS/Атрибуты HTML#7 из 383← Предыдущий Следующий →+10 XP

Полезно по теме:Гайд: старт в frontend Практика: DOM и события Термин: DOM Маршрут: старт с нуля

Атрибуты HTML

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

Синтаксис атрибутов

<тег атрибут="значение">Содержимое</тег>

<!-- Примеры -->
<a href="https://vk.com" target="_blank">ВКонтакте</a>
<img src="photo.jpg" alt="Фото" width="300" />
<input type="email" placeholder="Введи email" required />

Значение атрибута берётся в двойные кавычки. Некоторые атрибуты не требуют значения — их присутствие уже означает «включено».

Глобальные атрибуты — работают на любом теге

id — уникальный идентификатор

<section id="contacts">...</section>
<h2 id="main-title">Заголовок</h2>

id должен быть уникальным на всей странице. Используется для:

Якорных ссылок: <a href="#contacts">

CSS-стилей: #contacts { ... }

JavaScript: document.getElementById('contacts')

class — CSS-классы

<div class="card">Карточка товара</div>
<div class="card featured">Рекомендуемый товар</div>
<button class="btn btn-primary">Купить</button>

Один элемент может иметь несколько классов через пробел. Классы — основной способ подключения CSS-стилей.

style — встроенные стили

<p style="color: red; font-size: 18px;">Важный текст</p>

Избегай inline-стилей в реальных проектах — их сложно переопределить и они смешивают структуру со стилями.

title — всплывающая подсказка

<abbr title="Каскадные таблицы стилей">CSS</abbr>
<button title="Удалить товар из корзины">✕</button>

Браузер показывает title при наведении мыши.

hidden — скрыть элемент

<div hidden>Этот блок скрыт от пользователя</div>

Атрибут без значения — его присутствие скрывает элемент. Аналог CSS display: none.

tabindex — порядок фокуса клавишей Tab

<button tabindex="1">Первая кнопка по Tab</button>
<button tabindex="2">Вторая кнопка по Tab</button>
<div tabindex="0">Div стал фокусируемым</div>
<span tabindex="-1">Программно фокусируемый, но не через Tab</span>

data-* атрибуты — пользовательские данные

Атрибуты data-* позволяют хранить любые данные прямо в HTML-элементе:

<div
  class="product-card"
  data-product-id="12345"
  data-price="4990"
  data-category="sneakers"
>
  Nike Air Max — 4 990 ₽
</div>

В JavaScript эти данные читаются через dataset:

const card = document.querySelector('.product-card')
console.log(card.dataset.productId)  // '12345'
console.log(card.dataset.price)      // '4990'
console.log(card.dataset.category)   // 'sneakers'

Обрати внимание: data-product-id становится dataset.productId (kebab-case → camelCase).

Типичные ошибки

Ошибка 1: Дублировать id

<div id="header">Шапка</div>
<div id="header">Ещё одна шапка</div>  <!-- Неверно! id должен быть уникальным -->

Ошибка 2: Пробелы в id

<div id="main header">  <!-- Неверно — id не может содержать пробелы -->
<div id="main-header">  <!-- Верно — дефис вместо пробела -->

Ошибка 3: Злоупотреблять inline style

<!-- Плохо — хаос в поддержке -->
<p style="color:red;font-size:16px;margin:10px;padding:5px">Текст</p>

<!-- Хорошо — класс + CSS-файл -->
<p class="warning-text">Текст</p>

В реальных проектах

Data-атрибуты незаменимы для передачи данных из сервера в HTML — особенно при серверном рендеринге. Фреймворки типа Alpine.js строятся целиком на data-атрибутах. В React data-testid используется для тестирования компонентов без привязки к CSS-классам.

Примеры

Работа с глобальными атрибутами: id, class, title, hidden

// Создаём карточку товара с атрибутами
const card = document.createElement('div')

// id — уникальный идентификатор
card.id = 'product-42'

// class — несколько классов через пробел
card.className = 'product-card featured'

// title — подсказка при наведении
card.title = 'Нажми чтобы посмотреть товар'

// style — встроенные стили (в реальных проектах избегай)
card.style.border = '1px solid #ccc'

card.textContent = 'Nike Air Max 90'

// Читаем атрибуты
console.log('id:', card.id)
console.log('class:', card.className)
console.log('title:', card.title)

// Проверка наличия класса
console.log('Есть класс featured:', card.classList.contains('featured'))
console.log('Все классы:', Array.from(card.classList).join(', '))

// hidden атрибут
const secret = document.createElement('div')
secret.hidden = true
secret.textContent = 'Секретный блок'
console.log('Скрыт:', secret.hidden)

data-* атрибуты — хранение данных в HTML элементе

// Карточка товара с data-атрибутами (как на Wildberries)
const product = document.createElement('div')
product.className = 'product-card'

// Устанавливаем data-атрибуты
product.dataset.productId = '98765'
product.dataset.price = '4990'
product.dataset.category = 'sneakers'
product.dataset.inStock = 'true'
product.dataset.discountPercent = '20'

product.textContent = 'Adidas Superstar'

// Читаем через dataset (kebab → camelCase автоматически)
console.log('ID товара:', product.dataset.productId)
console.log('Цена:', product.dataset.price + ' ₽')
console.log('Категория:', product.dataset.category)
console.log('В наличии:', product.dataset.inStock)
console.log('Скидка:', product.dataset.discountPercent + '%')

// Вычисляем цену со скидкой
const price = parseInt(product.dataset.price)
const discount = parseInt(product.dataset.discountPercent)
const finalPrice = price * (1 - discount / 100)
console.log('Цена со скидкой:', finalPrice + ' ₽')

// getAttribute — альтернативный способ
console.log('Через getAttribute:', product.getAttribute('data-product-id'))

Атрибуты HTML

Синтаксис атрибутов

<тег атрибут="значение">Содержимое</тег>

<!-- Примеры -->
<a href="https://vk.com" target="_blank">ВКонтакте</a>
<img src="photo.jpg" alt="Фото" width="300" />
<input type="email" placeholder="Введи email" required />

Глобальные атрибуты — работают на любом теге

id — уникальный идентификатор

<section id="contacts">...</section>
<h2 id="main-title">Заголовок</h2>

id должен быть уникальным на всей странице. Используется для:

Якорных ссылок: <a href="#contacts">

CSS-стилей: #contacts { ... }

JavaScript: document.getElementById('contacts')

class — CSS-классы

<div class="card">Карточка товара</div>
<div class="card featured">Рекомендуемый товар</div>
<button class="btn btn-primary">Купить</button>

Один элемент может иметь несколько классов через пробел. Классы — основной способ подключения CSS-стилей.

style — встроенные стили

<p style="color: red; font-size: 18px;">Важный текст</p>

Избегай inline-стилей в реальных проектах — их сложно переопределить и они смешивают структуру со стилями.

title — всплывающая подсказка

<abbr title="Каскадные таблицы стилей">CSS</abbr>
<button title="Удалить товар из корзины">✕</button>

Браузер показывает title при наведении мыши.

hidden — скрыть элемент

<div hidden>Этот блок скрыт от пользователя</div>

Атрибут без значения — его присутствие скрывает элемент. Аналог CSS display: none.

tabindex — порядок фокуса клавишей Tab

<button tabindex="1">Первая кнопка по Tab</button>
<button tabindex="2">Вторая кнопка по Tab</button>
<div tabindex="0">Div стал фокусируемым</div>
<span tabindex="-1">Программно фокусируемый, но не через Tab</span>

data-* атрибуты — пользовательские данные

Атрибуты data-* позволяют хранить любые данные прямо в HTML-элементе:

<div
  class="product-card"
  data-product-id="12345"
  data-price="4990"
  data-category="sneakers"
>
  Nike Air Max — 4 990 ₽
</div>

В JavaScript эти данные читаются через dataset:

const card = document.querySelector('.product-card')
console.log(card.dataset.productId)  // '12345'
console.log(card.dataset.price)      // '4990'
console.log(card.dataset.category)   // 'sneakers'

Обрати внимание: data-product-id становится dataset.productId (kebab-case → camelCase).

Типичные ошибки

Ошибка 1: Дублировать id

<div id="header">Шапка</div>
<div id="header">Ещё одна шапка</div>  <!-- Неверно! id должен быть уникальным -->

Ошибка 2: Пробелы в id

<div id="main header">  <!-- Неверно — id не может содержать пробелы -->
<div id="main-header">  <!-- Верно — дефис вместо пробела -->

Ошибка 3: Злоупотреблять inline style

<!-- Плохо — хаос в поддержке -->
<p style="color:red;font-size:16px;margin:10px;padding:5px">Текст</p>

<!-- Хорошо — класс + CSS-файл -->
<p class="warning-text">Текст</p>

В реальных проектах

Примеры

Работа с глобальными атрибутами: id, class, title, hidden

// Создаём карточку товара с атрибутами
const card = document.createElement('div')

// id — уникальный идентификатор
card.id = 'product-42'

// class — несколько классов через пробел
card.className = 'product-card featured'

// title — подсказка при наведении
card.title = 'Нажми чтобы посмотреть товар'

// style — встроенные стили (в реальных проектах избегай)
card.style.border = '1px solid #ccc'

card.textContent = 'Nike Air Max 90'

// Читаем атрибуты
console.log('id:', card.id)
console.log('class:', card.className)
console.log('title:', card.title)

// Проверка наличия класса
console.log('Есть класс featured:', card.classList.contains('featured'))
console.log('Все классы:', Array.from(card.classList).join(', '))

// hidden атрибут
const secret = document.createElement('div')
secret.hidden = true
secret.textContent = 'Секретный блок'
console.log('Скрыт:', secret.hidden)

data-* атрибуты — хранение данных в HTML элементе

// Карточка товара с data-атрибутами (как на Wildberries)
const product = document.createElement('div')
product.className = 'product-card'

// Устанавливаем data-атрибуты
product.dataset.productId = '98765'
product.dataset.price = '4990'
product.dataset.category = 'sneakers'
product.dataset.inStock = 'true'
product.dataset.discountPercent = '20'

product.textContent = 'Adidas Superstar'

// Читаем через dataset (kebab → camelCase автоматически)
console.log('ID товара:', product.dataset.productId)
console.log('Цена:', product.dataset.price + ' ₽')
console.log('Категория:', product.dataset.category)
console.log('В наличии:', product.dataset.inStock)
console.log('Скидка:', product.dataset.discountPercent + '%')

// Вычисляем цену со скидкой
const price = parseInt(product.dataset.price)
const discount = parseInt(product.dataset.discountPercent)
const finalPrice = price * (1 - discount / 100)
console.log('Цена со скидкой:', finalPrice + ' ₽')

// getAttribute — альтернативный способ
console.log('Через getAttribute:', product.getAttribute('data-product-id'))

Задание

Напиши HTML-карточку профиля пользователя (как в Telegram): div с id="user-profile", class="profile-card active", title="Профиль пользователя". Добавь data-атрибуты: data-user-id="777", data-username="roadtojs", data-premium="true", data-followers="15000". Внутри добавь имя пользователя в h2 и количество подписчиков в p.

Подсказка

id — уникальный идентификатор. class — может содержать несколько классов через пробел: class="profile-card active". data-* атрибуты хранят пользовательские данные: data-user-id="777". title — текст всплывающей подсказки при наведении.

Загружаем среду выполнения...

Загружаем AI-помощника...

← HTML & CSS/Атрибуты HTML#7 из 383← Предыдущий Следующий →+10 XP

Полезно по теме:Гайд: старт в frontend Практика: DOM и события Термин: DOM Маршрут: старт с нуля

Атрибуты HTML

Синтаксис атрибутов

<тег атрибут="значение">Содержимое</тег>

<!-- Примеры -->
<a href="https://vk.com" target="_blank">ВКонтакте</a>
<img src="photo.jpg" alt="Фото" width="300" />
<input type="email" placeholder="Введи email" required />

Глобальные атрибуты — работают на любом теге

id — уникальный идентификатор

<section id="contacts">...</section>
<h2 id="main-title">Заголовок</h2>

id должен быть уникальным на всей странице. Используется для:

Якорных ссылок: <a href="#contacts">

CSS-стилей: #contacts { ... }

JavaScript: document.getElementById('contacts')

class — CSS-классы

<div class="card">Карточка товара</div>
<div class="card featured">Рекомендуемый товар</div>
<button class="btn btn-primary">Купить</button>

Один элемент может иметь несколько классов через пробел. Классы — основной способ подключения CSS-стилей.

style — встроенные стили

<p style="color: red; font-size: 18px;">Важный текст</p>

Избегай inline-стилей в реальных проектах — их сложно переопределить и они смешивают структуру со стилями.

title — всплывающая подсказка

<abbr title="Каскадные таблицы стилей">CSS</abbr>
<button title="Удалить товар из корзины">✕</button>

Браузер показывает title при наведении мыши.

hidden — скрыть элемент

<div hidden>Этот блок скрыт от пользователя</div>

Атрибут без значения — его присутствие скрывает элемент. Аналог CSS display: none.

tabindex — порядок фокуса клавишей Tab

<button tabindex="1">Первая кнопка по Tab</button>
<button tabindex="2">Вторая кнопка по Tab</button>
<div tabindex="0">Div стал фокусируемым</div>
<span tabindex="-1">Программно фокусируемый, но не через Tab</span>

data-* атрибуты — пользовательские данные

Атрибуты data-* позволяют хранить любые данные прямо в HTML-элементе:

<div
  class="product-card"
  data-product-id="12345"
  data-price="4990"
  data-category="sneakers"
>
  Nike Air Max — 4 990 ₽
</div>

В JavaScript эти данные читаются через dataset:

const card = document.querySelector('.product-card')
console.log(card.dataset.productId)  // '12345'
console.log(card.dataset.price)      // '4990'
console.log(card.dataset.category)   // 'sneakers'

Обрати внимание: data-product-id становится dataset.productId (kebab-case → camelCase).

Типичные ошибки

Ошибка 1: Дублировать id

<div id="header">Шапка</div>
<div id="header">Ещё одна шапка</div>  <!-- Неверно! id должен быть уникальным -->

Ошибка 2: Пробелы в id

<div id="main header">  <!-- Неверно — id не может содержать пробелы -->
<div id="main-header">  <!-- Верно — дефис вместо пробела -->

Ошибка 3: Злоупотреблять inline style

<!-- Плохо — хаос в поддержке -->
<p style="color:red;font-size:16px;margin:10px;padding:5px">Текст</p>

<!-- Хорошо — класс + CSS-файл -->
<p class="warning-text">Текст</p>

В реальных проектах

Примеры

Работа с глобальными атрибутами: id, class, title, hidden

// Создаём карточку товара с атрибутами
const card = document.createElement('div')

// id — уникальный идентификатор
card.id = 'product-42'

// class — несколько классов через пробел
card.className = 'product-card featured'

// title — подсказка при наведении
card.title = 'Нажми чтобы посмотреть товар'

// style — встроенные стили (в реальных проектах избегай)
card.style.border = '1px solid #ccc'

card.textContent = 'Nike Air Max 90'

// Читаем атрибуты
console.log('id:', card.id)
console.log('class:', card.className)
console.log('title:', card.title)

// Проверка наличия класса
console.log('Есть класс featured:', card.classList.contains('featured'))
console.log('Все классы:', Array.from(card.classList).join(', '))

// hidden атрибут
const secret = document.createElement('div')
secret.hidden = true
secret.textContent = 'Секретный блок'
console.log('Скрыт:', secret.hidden)

data-* атрибуты — хранение данных в HTML элементе

// Карточка товара с data-атрибутами (как на Wildberries)
const product = document.createElement('div')
product.className = 'product-card'

// Устанавливаем data-атрибуты
product.dataset.productId = '98765'
product.dataset.price = '4990'
product.dataset.category = 'sneakers'
product.dataset.inStock = 'true'
product.dataset.discountPercent = '20'

product.textContent = 'Adidas Superstar'

// Читаем через dataset (kebab → camelCase автоматически)
console.log('ID товара:', product.dataset.productId)
console.log('Цена:', product.dataset.price + ' ₽')
console.log('Категория:', product.dataset.category)
console.log('В наличии:', product.dataset.inStock)
console.log('Скидка:', product.dataset.discountPercent + '%')

// Вычисляем цену со скидкой
const price = parseInt(product.dataset.price)
const discount = parseInt(product.dataset.discountPercent)
const finalPrice = price * (1 - discount / 100)
console.log('Цена со скидкой:', finalPrice + ' ₽')

// getAttribute — альтернативный способ
console.log('Через getAttribute:', product.getAttribute('data-product-id'))

Атрибуты HTML

Синтаксис атрибутов

<тег атрибут="значение">Содержимое</тег>

<!-- Примеры -->
<a href="https://vk.com" target="_blank">ВКонтакте</a>
<img src="photo.jpg" alt="Фото" width="300" />
<input type="email" placeholder="Введи email" required />

Глобальные атрибуты — работают на любом теге

id — уникальный идентификатор

<section id="contacts">...</section>
<h2 id="main-title">Заголовок</h2>

id должен быть уникальным на всей странице. Используется для:

Якорных ссылок: <a href="#contacts">

CSS-стилей: #contacts { ... }

JavaScript: document.getElementById('contacts')

class — CSS-классы

<div class="card">Карточка товара</div>
<div class="card featured">Рекомендуемый товар</div>
<button class="btn btn-primary">Купить</button>

Один элемент может иметь несколько классов через пробел. Классы — основной способ подключения CSS-стилей.

style — встроенные стили

<p style="color: red; font-size: 18px;">Важный текст</p>

Избегай inline-стилей в реальных проектах — их сложно переопределить и они смешивают структуру со стилями.

title — всплывающая подсказка

<abbr title="Каскадные таблицы стилей">CSS</abbr>
<button title="Удалить товар из корзины">✕</button>

Браузер показывает title при наведении мыши.

hidden — скрыть элемент

<div hidden>Этот блок скрыт от пользователя</div>

Атрибут без значения — его присутствие скрывает элемент. Аналог CSS display: none.

tabindex — порядок фокуса клавишей Tab

<button tabindex="1">Первая кнопка по Tab</button>
<button tabindex="2">Вторая кнопка по Tab</button>
<div tabindex="0">Div стал фокусируемым</div>
<span tabindex="-1">Программно фокусируемый, но не через Tab</span>

data-* атрибуты — пользовательские данные

Атрибуты data-* позволяют хранить любые данные прямо в HTML-элементе:

<div
  class="product-card"
  data-product-id="12345"
  data-price="4990"
  data-category="sneakers"
>
  Nike Air Max — 4 990 ₽
</div>

В JavaScript эти данные читаются через dataset:

const card = document.querySelector('.product-card')
console.log(card.dataset.productId)  // '12345'
console.log(card.dataset.price)      // '4990'
console.log(card.dataset.category)   // 'sneakers'

Обрати внимание: data-product-id становится dataset.productId (kebab-case → camelCase).

Типичные ошибки

Ошибка 1: Дублировать id

<div id="header">Шапка</div>
<div id="header">Ещё одна шапка</div>  <!-- Неверно! id должен быть уникальным -->

Ошибка 2: Пробелы в id

<div id="main header">  <!-- Неверно — id не может содержать пробелы -->
<div id="main-header">  <!-- Верно — дефис вместо пробела -->

Ошибка 3: Злоупотреблять inline style

<!-- Плохо — хаос в поддержке -->
<p style="color:red;font-size:16px;margin:10px;padding:5px">Текст</p>

<!-- Хорошо — класс + CSS-файл -->
<p class="warning-text">Текст</p>

В реальных проектах

Примеры

Работа с глобальными атрибутами: id, class, title, hidden

// Создаём карточку товара с атрибутами
const card = document.createElement('div')

// id — уникальный идентификатор
card.id = 'product-42'

// class — несколько классов через пробел
card.className = 'product-card featured'

// title — подсказка при наведении
card.title = 'Нажми чтобы посмотреть товар'

// style — встроенные стили (в реальных проектах избегай)
card.style.border = '1px solid #ccc'

card.textContent = 'Nike Air Max 90'

// Читаем атрибуты
console.log('id:', card.id)
console.log('class:', card.className)
console.log('title:', card.title)

// Проверка наличия класса
console.log('Есть класс featured:', card.classList.contains('featured'))
console.log('Все классы:', Array.from(card.classList).join(', '))

// hidden атрибут
const secret = document.createElement('div')
secret.hidden = true
secret.textContent = 'Секретный блок'
console.log('Скрыт:', secret.hidden)

data-* атрибуты — хранение данных в HTML элементе

// Карточка товара с data-атрибутами (как на Wildberries)
const product = document.createElement('div')
product.className = 'product-card'

// Устанавливаем data-атрибуты
product.dataset.productId = '98765'
product.dataset.price = '4990'
product.dataset.category = 'sneakers'
product.dataset.inStock = 'true'
product.dataset.discountPercent = '20'

product.textContent = 'Adidas Superstar'

// Читаем через dataset (kebab → camelCase автоматически)
console.log('ID товара:', product.dataset.productId)
console.log('Цена:', product.dataset.price + ' ₽')
console.log('Категория:', product.dataset.category)
console.log('В наличии:', product.dataset.inStock)
console.log('Скидка:', product.dataset.discountPercent + '%')

// Вычисляем цену со скидкой
const price = parseInt(product.dataset.price)
const discount = parseInt(product.dataset.discountPercent)
const finalPrice = price * (1 - discount / 100)
console.log('Цена со скидкой:', finalPrice + ' ₽')

// getAttribute — альтернативный способ
console.log('Через getAttribute:', product.getAttribute('data-product-id'))

Задание

Подсказка

Загружаем среду выполнения...

Загружаем AI-помощника...