Атрибут id
Атрибут id применяется для указания идентификатора HTML-элемента — уникального имени, которое в дальнейшем может быть использовано для изменения стилей данного элемента (через CSS) или в качестве закладки (якоря). Затем к якорю можно будет переходить с помощью ссылки, созданной тегом <A>.
Атрибут id появился в HTML довольно давно (с появлением CSS), но раньше он поддерживался ограниченным количеством тегов, а теперь он есть у всех. Поэтому, если на страницах описания каких-то тегов вы увидите логотип HTML 5 (
) напротив атрибута, то знайте, что этот тег начал поддерживать атрибут id именно с версии HTML 5. Впрочем, таких тегов очень мало.
Значения
Значением атрибута id является любое слово состоящее из букв латинского алфавита (a-z, A-Z), цифр (0-9), символов дефиса (-) и подчеркивания (_), но при этом оно не может начинаться с цифры или дефиса, после которого идет цифра.
Значение по умолчанию: нет.
На одной HTML-странице не может быть двух и более идентификаторов с одинаковым именем, но при этом надо учитывать, что, например id="block" и id="Block" — это разные идентификаторы, так как регистр символов также имеет значение.
Синтаксис
<div id="значение">...</div>
<body id="значение">...</body>
<strong id="значение">...</strong>Обязательный атрибут: нет.
Пример HTML: применение атрибута id
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - атрибут id</title>
<style type="text/css">
#telo {
background: #CCFFCC; /* цвет фона страницы */
}
#content {
font-weight: bold; /* жирный шрифт элементов внутри id="content" */
}
#content p {
border: 2px #7C7CAF solid; /* стили рамки вокруг параграфа */
padding: 5px; /* внутренние отступы */
}
</style>
</head>
<body id="telo">
<div id="content">
<p>
Чаще всего атрибут id используют для обозначения основных элементов
разметки сайта, таких как верхняя часть страницы (header), нижняя (футер),
зона основного содержимого и т.д. В этом случае, используя составные селекторы CSS,
например, <a href="https://seodon.ru/css/selektory-potomkov.php">селекторы потомков</a>,
можно осуществлять более гибкие изменения внешнего вида страниц без правки самого HTML-кода.
</p>
</div>
</body>
</html>Результат: Применение атрибута id.
Поддержка версиями HTML
| Версия: | HTML 4.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
| Поддержка: | Да | Да | Да | Да |
Поддержка браузерами
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari |
| Версия: | 6.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Да | Да | Да | Да | Да |