Атрибут id тега <div>
Описание
Атрибут id задаёт уникальный идентификатор для элемента <div>, позволяя:
- Однозначно обращаться к элементу из JavaScript и CSS
- Создавать якорные ссылки внутри страницы
- Связывать элементы между собой (например,
<label>с<input>)
<div id="header">
<h1>Заголовок страницы</h1>
</div>
<div id="main-content" class="container">
Основное содержимое страницы
</div>
<a href="#main-content">Перейти к содержимому</a>
Правила именования:
| Допустимо | Недопустимо | Причина |
|---|---|---|
id="user-profile" |
id="user profile" |
Пробелы запрещены |
id="item1" |
id="1item" |
Не может начинаться с цифры |
id="main_nav" |
id="main:nav" |
Некоторые символы запрещены |
Использование в JavaScript:
<div id="counter">0</div>
<button onclick="incrementCounter()">+1</button>
<script>
function incrementCounter() {
const counter = document.getElementById('counter');
counter.textContent = parseInt(counter.textContent) + 1;
}
</script>
Использование в CSS:
<style>
#special-box {
border: 2px solid #4CAF50;
padding: 15px;
background-color: #f8f9fa;
}
</style>
<div id="special-box">
Этот div имеет уникальное оформление
</div>
Лучшие практики:
- Используйте осмысленные имена, отражающие назначение элемента
- Избегайте общих имен типа "div1", "box2"
- Убедитесь, что идентификатор уникален в пределах всей страницы
- Для стилизации предпочитайте классы, а не id
- В динамических приложениях генерируйте уникальные id