Атрибут id тега <dir>
Описание
Атрибут id задаёт уникальный идентификатор для элемента <dir>, но важно понимать, что сам тег <dir> является устаревшим в HTML5. В современных реализациях следует использовать <ul> или <ol> с атрибутом id.
Важно: Элемент <dir> устарел в HTML5. Для создания списков с идентификаторами используйте <ul> или <ol>.
Историческое использование (не рекомендуется):
<!-- Устаревший подход -->
<dir id="oldDirectoryList">
<li>Элемент 1</li>
<li>Элемент 2</li>
</dir>
Современная альтернатива:
<ul id="modernList" class="directory-structure">
<li>Файл 1.txt</li>
<li>Файл 2.txt</li>
</ul>
Основные правила для атрибута id:
| Правило | Пример | Неправильно |
|---|---|---|
| Уникальность | id="mainMenu" |
Повторение id на странице |
| Формат имени | id="file-list" |
id="file list" |
| Начинается с буквы | id="list1" |
id="1list" |
Использование в JavaScript:
<ul id="dynamicList">
<li>Исходный элемент</li>
</ul>
<button onclick="addListItem()">Добавить элемент</button>
<script>
function addListItem() {
const list = document.getElementById('dynamicList');
const newItem = document.createElement('li');
newItem.textContent = 'Новый элемент ' + (list.children.length + 1);
list.appendChild(newItem);
}
</script>
Связь с CSS:
<style>
#specialList {
border: 2px solid #4a5568;
padding: 10px;
border-radius: 5px;
}
#specialList li {
padding: 5px;
margin: 3px 0;
background-color: #f7fafc;
}
</style>
<ul id="specialList">
<li>Элемент A</li>
<li>Элемент B</li>
</ul>
Лучшие практики:
- Используйте осмысленные имена, отражающие назначение списка
- Избегайте общих имен типа "list1", "list2"
- Для динамически создаваемых списков генерируйте уникальные id
- Сочетайте с классами для более гибкой стилизации