Атрибут data-* тега <tt>
Описание
Атрибуты data-* для тега <tt> позволяют хранить дополнительную информацию в моноширинном текстовом элементе. Эти атрибуты не влияют на отображение, но могут быть использованы JavaScript для различных целей.
<tt data-line-number="42" data-visible="true">
Пример текста с data-атрибутами
</tt>
Особенности data-атрибутов:
- Должны начинаться с префикса
data- - Могут содержать любые пользовательские имена
- Значения хранятся в виде строк
- Доступны через JavaScript API
Пример доступа через JavaScript:
<tt id="code-line" data-line-number="15" data-status="active">
console.log("Hello World");
</tt>
<script>
const element = document.getElementById('code-line');
console.log(element.dataset.lineNumber); // "15"
console.log(element.dataset.status); // "active"
// Изменение данных
element.dataset.status = 'modified';
</script>
Рекомендации по именованию:
| Тип данных | Хороший пример | Плохой пример |
|---|---|---|
| Идентификаторы | data-code-id |
dataId |
| Состояния | data-visible |
dataVisibility |
| Позиции | data-line-num |
dataLineNumber123 |
Использование с CSS:
<style>
tt[data-status="error"] {
color: red;
font-weight: bold;
}
tt[data-important="true"]::before {
content: "! ";
color: orange;
}
</style>
<tt data-status="error">Ошибка выполнения</tt>
<tt data-important="true">Важное сообщение</tt>
Ограничения:
- Значения всегда преобразуются в строки
- Нет встроенной валидации данных
- Не предназначены для хранения больших объемов данных
Современные альтернативы:
- Для сложных данных используйте JavaScript-объекты
- Рассмотрите использование кастомных элементов
- Для больших проектов используйте state-менеджеры
Примечание: Хотя тег <tt> устарел, data-атрибуты остаются стандартным способом хранения дополнительной информации в HTML-элементах.