Атрибут data-* тега <pre>

Описание

Атрибуты data-* для тега <pre> позволяют хранить дополнительную пользовательскую информацию, связанную с блоком предварительно форматированного текста. Эти атрибуты не влияют на отображение, но могут использоваться JavaScript для расширенной функциональности.

Пример использования:
<pre data-language="javascript" data-line-highlight="5,8-10"> function calculateTotal(items) { let total = 0; items.forEach(item => { total += item.price * item.quantity; // Подсвечиваемая строка }); return total; } </pre>

Типичные сценарии применения:

Атрибут Назначение
data-language Указание языка программирования для подсветки синтаксиса
data-line-highlight Строки для особого выделения (номера или диапазоны)
data-source Идентификатор исходного кода в базе данных
data-version Версия кода или документа

Пример с JavaScript обработкой:

<pre id="code-sample" data-language="python" data-executable="true"> def greet(name): print(f"Hello, {name}!") greet("World") </pre> <script> const preElement = document.getElementById('code-sample'); if (preElement.dataset.executable === 'true') { console.log('Этот код помечен как исполняемый'); // Дополнительная логика обработки } </script>

Особенности работы:

  • Имена атрибутов должны быть в kebab-case (дефисы между словами)
  • Значения всегда строковые (для других типов требуется преобразование)
  • Доступны через свойство dataset в JavaScript
  • Не влияют на SEO при правильном использовании

Рекомендации:

  • Используйте для хранения мета-информации о блоке кода/текста
  • Избегайте хранения больших объемов данных (лучше использовать JSON в одном атрибуте)
  • Придерживайтесь единого стиля именования в проекте
  • Для сложных данных используйте: data-config='{"lines":5,"trim":true}'

Пример с JSON данными:

<pre data-code-meta='{"author":"Alice","created":"2023-01-15","license":"MIT"}'> // Пример кода с метаданными const example = 42; </pre> <script> const meta = JSON.parse(document.querySelector('pre').dataset.codeMeta); console.log(meta.author); // "Alice" </script>

Примечание: Хотя data-атрибуты предоставляют гибкий способ хранения информации, для критически важных данных лучше использовать JavaScript-объекты или специализированные API. Data-атрибуты идеальны для разовой конфигурации и передачи мета-информации.