Атрибут id тега <pre>
Описание
Атрибут id для тега <pre> задаёт уникальный идентификатор блока предварительно форматированного текста. Этот идентификатор может использоваться для CSS-стилизации, JavaScript-обращений или как якорная ссылка.
<pre id="json-example">
{
"name": "John Doe",
"age": 30,
"isActive": true
}
</pre>
Основные характеристики:
| Аспект | Описание |
|---|---|
| Уникальность | Должен быть единственным в документе |
| Синтаксис | Должен начинаться с буквы (A-Za-z), может содержать цифры, дефисы и подчёркивания |
| Регистр | Чувствителен к регистру (jsonExample ≠ jsonexample) |
Использование с CSS:
<style>
#code-sample {
background-color: #f8f8f8;
border-left: 3px solid #4CAF50;
padding: 15px;
overflow-x: auto;
}
</style>
<pre id="code-sample">
// Пример кода с подсветкой
function greet() {
console.log("Hello, world!");
}
</pre>
Использование с JavaScript:
<pre id="editable-config">
server_url = "https://example.com"
timeout = 30
</pre>
<script>
// Получение содержимого
const configText = document.getElementById('editable-config').textContent;
// Изменение стиля
document.getElementById('editable-config').style.fontFamily = 'monospace';
</script>
Рекомендации:
- Используйте семантичные имена (например, "error-log" вместо "pre1")
- Избегайте избыточных префиксов (не нужно "pre-config", достаточно "config")
- Для стилизации предпочтительнее использовать классы
- Храните согласованность именования в проекте
Пример с динамическим обновлением:
<pre id="log-output"></pre>
<script>
// Обновление содержимого
function updateLog(message) {
const log = document.getElementById('log-output');
log.textContent += message + '\n';
log.scrollTop = log.scrollHeight;
}
updateLog('Система инициализирована');
updateLog('Загрузка данных...');
</script>
Примечание: Хотя атрибут id полезен для управления элементами <pre>, помните о его глобальной уникальности. Для повторяющихся блоков (например, нескольких блоков кода) лучше использовать классы в сочетании с data-атрибутами.