Как правильно использовать атрибуты HTML-элементов, и что такое Data-атрибут?

как правильно использовать атрибуты html-элементов, и что такое data-атрибут?

Обычные атрибуты элементов

Элементы HTML-разметки являются своего рода инструкциями по отображению документа. Как быть, если необходимо придать элементу необычные свойства? Например, указать, где расположено изображение для вставки.

Такие возможности реализуются за счет атрибутов. У любого типа элемента есть свой предопределённый набор атрибутов. Если попытаться задать неподдерживаемый, ничего не произойдет. Браузер проигнорирует данное действие, но с точки зрения валидатора[1] HTML-разметки — это будет ошибкой.

Ниже мы приводим пример вставки изображения в страницу. Для этого используется элемент <img>, у которого есть атрибут src, сообщающий браузеру URL-адрес изображения.

<!-- Вставка картинки. Атрибут "src" определяет её расположение -->
<img src="https://coder-booster.ru/images/site-logo.png">

Правила установки атрибутов при разметке элементов:

  • Атрибуты могут задаваться только в открывающем теге.
  • Они должны быть отделены пробелом друг от друга и от имени элемента.
  • Атрибуты могут быть двух видов: со значением и флаги.
  • Атрибут со значением задается выражением «имя-атрибута=“значение-атрибута“».
  • Флаг не имеет значения и задается выражением «имя-атрибута».
<!-- Примеры корректного определения атрибутов -->
<div title="Текст отобразиться при наведении мыши на содержание">
    <!-- Вставка картинки. Атрибут "src" определяет адрес её расположения -->
    <img src="https://coder-booster.ru/images/site-logo.png">

    <!-- Aбзац. Атрибут "align" отвечает за выравнивание текста -->
    <p align="left" title="Заголовок абзаца">Наведи на меня мышь</p>
</div>

Важно
В современной практике HTML-атрибуты не используются для стилизации элементов (выравнивание текста, изменение цвета заднего фона и т.д.). Для этого существует технология под названием CSS[2]. Активно используются лишь атрибуты, добавляющие особое поведение. Их мы будем рассматривать далее в учебном курсе.

Специальный data-атрибут

Data-атрибут в настоящий момент не несет для вас никакой ценности. Его единственной задачей является добавление к элементу данных, которые валидатор HTML-разметки не признает ошибочными.

Он нужен для создания динамических страниц при использовании встроенного в браузер языка программирования JavaScript. Data-атрибут может содержать какое-либо значение, которым сможет оперировать программист. Например, при создании игры, к элементу можно добавить атрибут score со значением 0. Программный код сможет найти его и обновлять вместе с ростом очков игрока. Если при загрузке веб-страницы он будет содержать значение 1000, то и отсчет игровых очков начнется с этой цифры.

При установке data-атрибута действуют те же самые правила, что и в случае с обычным, но с одним отличием — имя всегда должно начинаться со слова data и символа «-» следующего за ним. Выражение может быть построено таким образом «data-имя-атрибута=“значение-атрибута“»

<!-- Создание контейнера с установленным data-атрибутом -->
<div data-role="description">
    Установленный атрибут указывает абстрактную роль, для
    описания содержимого элемента. На отображение в браузере
    это не повлияет, но для программы чтения экрана или
    нужд программиста может иметь ценность.
</div>

Термины, использованные в статье

  1. Валидатор HTML-разметки (англ. W3C validator) — инструмент, созданный Консорциумом Всемирной паутины, осуществляющий анализ HTML-разметки и выявляющий в ней ошибки. Документ, содержащий ошибки, может неправильно отображаться в браузерах.

    Валидатор находится в соответствующем разделе официального сайта консорциума — http://validator.w3.org/.
  2. Каскадные таблицы стилей (англ. Cascading Style Sheets, сокр. CSS) - специальный язык, достаточно простой в освоении, который способен описывать стилевое оформление элементов веб-страницы. Как правило, стили, написанные на CSS, располагаются в отдельном файле и подключаются к странице при её загрузке.

Последние публикации