Атрибут HTML id
Атрибут id задаёт уникальный id для элемента HTML. В одном документе не может быть двух элементов с одинаковым id.
Атрибут id
Атрибут id присваивает элементу уникальный id, который должен быть уникальным в документе. Он указывает на конкретный стиль в таблице стилей, а JavaScript использует его для доступа к элементу и его изменения. Чтобы написать CSS, используйте решётку (#), за которой следует имя id, а затем свойства в фигурных скобках.
Примечание: Имя id чувствительно к регистру. Примечание: Оно должно содержать хотя бы один символ, не может начинаться с цифры и не может содержать пробелов.
Пример
<h1>, оформленный по своему id.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">Мой заголовок</h1>
</body>
</html>
Разница между Class и ID
Имя класса может использоваться многими элементами, но id должен использоваться только одним элементом на странице.
Пример
Уникальный id наряду с общим классом.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Стилизация элемента с id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Стилизация всех элементов с классом "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h1 id="myHeader">Мои города</h1>
<h2 class="city">Лондон</h2>
<p>Лондон — столица Англии.</p>
<h2 class="city">Париж</h2>
<p>Париж — столица Франции.</p>
<h2 class="city">Токио</h2>
<p>Токио — столица Японии.</p>
</body>
</html>
Закладки HTML с помощью ID и ссылок
Закладки позволяют читателям переходить к определённой части страницы, что удобно на длинной странице. Сначала создайте закладку, присвоив элементу id, затем добавьте ссылку на неё с помощью href="#id". При нажатии на ссылку страница прокручивается к этому элементу. Также можно ссылаться на закладку на другой странице, указав имя файла перед #.
Пример
Ссылка, переходящая к Главе 4 на той же странице.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Переход по закладке</title>
</head>
<body>
<p><a href="#C4">Перейти к Главе 4</a></p>
<h2>Глава 1</h2>
<p>Эта глава объясняет ба бла бла</p>
<h2>Глава 2</h2>
<p>Эта глава объясняет ба бла бла</p>
<h2>Глава 3</h2>
<p>Эта глава объясняет ба бла бла</p>
<h2 id="C4">Глава 4</h2>
<p>Эта глава объясняет ба бла бла</p>
<h2>Глава 5</h2>
<p>Эта глава объясняет ба бла бла</p>
</body>
</html>
Закладка на другой странице
Ссылка на закладку на другой странице.
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Использование атрибута id в JavaScript
JavaScript может использовать id для работы с этим конкретным элементом. Метод getElementById() находит элемент с заданным id.
Пример
Кнопка, изменяющая текст заголовка с помощью JavaScript.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1 id="myHeader">Привет, мир!</h1>
<button onclick="displayResult()">Изменить текст</button>
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Хорошего дня!";
}
</script>
</body>
</html>
Итоги главы
Подведём итог: атрибут id задаёт уникальный id для элемента, и значение должно быть уникальным в документе. CSS и JavaScript используют его для оформления или выбора конкретного элемента, значение чувствительно к регистру, а также он используется для создания закладок. JavaScript может обращаться к элементу с помощью getElementById().