ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

HTML учебник

HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Styles HTML Formatting HTML Quotations HTML Comments HTML Colors HTML CSS HTML Links HTML Images HTML Tables HTML Lists HTML Blocks HTML Classes HTML Id HTML Iframes HTML JavaScript HTML File Paths HTML Head HTML Layout HTML Responsive HTML Computercode HTML Entities HTML Symbols HTML Charset HTML URL Encode HTML XHTML

HTML Forms

HTML Forms HTML Form Elements HTML Input Types HTML Input Attributes

HTML5

HTML5 Intro HTML5 Support HTML5 New Elements HTML5 Semantics HTML5 Migration HTML5 Style Guide

HTML Graphics

HTML Canvas HTML SVG HTML Google Maps

HTML Media

HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs

HTML Geolocation HTML Drag/Drop HTML Web Storage HTML Web Workers HTML SSE

HTML Examples

HTML Examples HTML Accessibility

HTML References

HTML Tag List HTML Attributes HTML Events HTML Colors HTML Canvas HTML Audio/Video HTML Doctypes HTML Character Sets HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods PX to EM Converter Keyboard Shortcuts


HTML Атрибут ID


Использование атрибута ID

Атрибут id указывает уникальный идентификатор для элемента HTML (значение должно быть уникальным в HTML-документе).

Значение идентификатора может использоваться CSS и JavaScript для выполнения определенных задач для уникального элемента с указанным значением идентификатора.

В CSS, чтобы выбрать элемент с определенным идентификатором, напишите символ хэша (#), за которым следует идентификатор элемента:

Пример

Использование CSS для стиля элемента с идентификатором "myHeader":

<style>
#myHeader {
    background-color: lightblue;
    color: black;
    padding: 40px;
    text-align: center;
}
</style>

<h1 id="myHeader">Мой заголовок</h1>

Result:

Мой заголовок

Совет: Атрибут ID можно использовать для любого элемента HTML.

Примечание: Значение идентификатора учитывает регистр.

Примечание: Значение идентификатора должно содержать не менее одного символа и не содержать пробелы (пробелы, вкладки и т. д.).


Разница между классом и ID

Элемент HTML может иметь только один уникальный идентификатор, принадлежащий этому единственному элементу, в то время как имя класса может использоваться несколькими элементами:

Пример

<style>
/* Style the element with the id "myHeader" */
#myHeader {
    background-color: lightblue;
    color: black;
    padding: 40px;
    text-align: center;
}

/* Style all elements with the class name "city" */
.city {
    background-color: tomato;
    color: white;
    padding: 10px;
}
</style>

<!-- A unique element -->
<h1 id="myHeader">My Cities</h1>

<!-- Multiple similar elements -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

Совет: Вы можете узнать больше о CSS в нашем учебнике по CSS.



Использование атрибута ID в JavaScript

JavaScript может получить доступ к элементу с указанным идентификатором с помощью getElementById() method:

Примере

Используйте атрибут ID для управления текстом с помощью JavaScript:

<script>
function displayResult() {
    document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

Совет: Изучайте JavaScript в главе HTML JavaScriptили в нашем Справочник по JavaScript.


Закладки с идентификатором и ссылками

Закладки HTML используются для того, чтобы позволить читателям перейти к определенным частям веб-страницы.

Закладки могут быть полезны, если ваша веб-страница очень длинная.

Чтобы сделать закладку, необходимо сначала создать закладку, а затем добавить ссылку на нее.

При щелчке ссылки страница будет прокручиваться в папку с закладкой.

Пример

Сначала создайте закладку с атрибутом id:

<h2 id="C4">Chapter 4</h2>

Затем добавьте ссылку на закладку ("перейти к главе 4"), изнутри той же страницы:

<a href="#C4">Jump to Chapter 4</a>

Или добавьте ссылку на закладку ("перейти к главе 4"), с другой страницы:

Пример

<a href="html_demo.html#C4">Jump to Chapter 4</a>