Атрибуты HTML

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

<a href="https://example.com" target="_blank">Перейти</a>

Здесь href и target — это атрибуты тега <a>.

Общие сведения

Каждый HTML-элемент может иметь один или несколько атрибутов. Атрибуты передают браузеру дополнительные сведения о том, как должен отображаться или функционировать элемент.

Основные особенности:

• Атрибуты указываются только в открывающем теге.
• Имя и значение разделяются знаком =.
• Значение заключается в кавычки.
• Порядок атрибутов не имеет значения.
• В HTML5 атрибуты не чувствительны к регистру.

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

Эти атрибуты могут применяться почти к любому элементу:

Атрибут	Назначение	Пример
id	Уникальный идентификатор элемента	<div id="header">
class	Класс для применения CSS или JS	<p class="text">
style	Встроенные CSS-стили	<span style="color:red">
title	Подсказка при наведении	<abbr title="HyperText Markup Language">HTML</abbr>
lang	Язык содержимого	<p lang="en">Text</p>
hidden	Скрывает элемент	<div hidden>
tabindex	Порядок фокусировки при Tab	<input tabindex="1">
data-*	Пользовательские (кастомные) данные	<div data-id="42">

Атрибуты гиперссылок

Атрибут	Описание	Пример
href	Адрес перехода	<a href="https://guidesbook.xyz">GuidesBook</a>
target	Где открыть ссылку (_blank, _self, _parent, _top)	<a href="..." target="_blank">
rel	Отношение к документу (noopener, nofollow и др.)	<a rel="nofollow">
download	Позволяет скачать файл	<a href="file.pdf" download>

Атрибуты изображений

Атрибут	Назначение	Пример
src	Путь к изображению	<img src="photo.jpg">
alt	Текст при отсутствии изображения	<img src="photo.jpg" alt="Фото гор">
width / height	Размеры изображения	<img src="..." width="400" height="300">
loading	Ленивая загрузка (lazy / eager)	<img src="..." loading="lazy">

Атрибуты форм и полей ввода

Атрибут	Для чего используется	Пример
type	Тип поля (text, email, password и др.)	<input type="text">
name	Имя параметра при отправке формы	<input name="username">
value	Значение поля	<input value="По умолчанию">
placeholder	Текст-подсказка	<input placeholder="Введите имя">
required	Обязательное поле	<input required>
disabled	Отключает элемент	<button disabled>
checked	Отмечает чекбокс или радиокнопку	<input type="checkbox" checked>
maxlength	Максимальная длина ввода	<input maxlength="30">
autocomplete	Управление автозаполнением	<input autocomplete="off">

Атрибуты мультимедиа

Атрибут	Применяется к	Назначение
controls	<audio>, <video>	Отображает элементы управления
autoplay	<audio>, <video>	Автоматическое воспроизведение
loop	<audio>, <video>	Повторное воспроизведение
muted	<audio>, <video>	Без звука
poster	<video>	Изображение-заставка до начала воспроизведения

Пользовательские атрибуты data-*

HTML5 позволяет создавать собственные атрибуты, начинающиеся с data-. Они применяются для хранения данных, которые могут быть использованы JavaScript-кодом.

<div data-user-id="42" data-role="guide"></div>
<script>
  const div = document.querySelector('div');
  console.log(div.dataset.userId); // 42
</script>

Атрибуты ARIA (доступность)

Атрибуты ARIA улучшают доступность для людей с ограниченными возможностями и помогают экранным читалкам корректно интерпретировать элементы.

<button aria-label="Закрыть окно">×</button>
<nav aria-labelledby="mainmenu">
  ...
</nav>

Советы по использованию

1. Избегайте устаревших атрибутов, таких как bgcolor, align, border — используйте CSS.
2. Проверяйте валидацию кода через W3C Validator.
3. Всегда добавляйте alt к изображениям.
4. Не злоупотребляйте встроенными стилями (style).
5. Используйте data-* только при необходимости — не дублируйте бизнес-логику.

Пример комплексного использования атрибутов

<article id="post-101" class="blog-post" lang="ru" data-category="html">
  <h2 title="Основы HTML">Введение в HTML</h2>
  <p style="color:#333;">
    HTML использует атрибуты для задания свойств элементов.
  </p>
  <a href="https://ru.guidesbook.xyz" target="_blank" rel="noopener">Читать далее</a>
</article>

Заключение

Атрибуты — неотъемлемая часть HTML. Они делают элементы гибкими, настраиваемыми и интерактивными, а также обеспечивают корректное взаимодействие с CSS, JavaScript и вспомогательными технологиями.

Знание и грамотное применение атрибутов — основа чистой и семантически правильной вёрстки.