Id в html для чего нужен

Глобальный атрибут (en-US) id устанавливает элементу уникальный идентификатор (ID), имя которого должно быть уникальным в документе (на странице). Его назначением является идентификация элемента при связывании (использование идентификатора фрагмента), скриптинге или стилизации (с помощью CSS).

Интерактивный пример

Значение этого атрибута «непрозрачная» строка: это означает, что веб-автор не должен использовать его для передачи какой-либо информации. Особое значение, например семантическое, получать из этой строки не надо.

Значение id не должно содержать пропусков (пробелов, табуляции и т.д). Браузеры обрабатывают пробелы, как часть уникального идентификатора. В отличии от атрибута class , который позволяет разделять пробелами значение (указывать несколько классов через пробел), элементы могут иметь только один ID.

Примечание: Использование символов отличных от ASCII букв, цифр, ‘_’ , ‘-‘ и ‘.’ может вызвать проблемы, связанные с совместимостью, т.к. они не были разрешены в HTML 4. Несмотря на то, что в HTML5 ограничение было снято, для совместимости ID должен начинаться с латинской буквы.

HTML атрибут id

HTML атрибут id используется для указания уникального идентификатора HTML элемента.

В документе HTML не может быть больше одного элемента с одинаковым идентификатором (id).

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

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

Атрибут id используется для указания на конкретную декларацию стиля в таблице стилей. Он также используется JavaScript для доступа и управления элементом с указанным id.

Синтаксис для id таков: напишите хэш-символ (#), за которым следует имя id. Затем определите свойства CSS в фигурных скобках <>.

В следующем примере мы имеем элемент <h1> , который указывает на имя id "myHeader". Этот элемент <h1> будет стилизован в соответствие к определению стиля #myHeader в разделе head:

Пример

Примечание: Имя id чувствительно к регистру!

Примечание: Имя id должно содержать по крайней мере один символ и не должно содержать пробелов (пробелы, вкладки и т.д.).

Разница между Class и ID

Имя класса может использоваться несколькими элементами HTML, тогда как имя id должно использоваться только одним элементом HTML на странице:

Пример

/* Стиль всех элементов имеет имя класса «city» */
.city <
background-color: tomato;
color: white;
padding: 10px;
>
</style>

<!— Элемент с уникальным id —>
<h1 Cities</h1>

<!— Несколько элементов с одинаковым классом —>
<h2 ><p>Лондон — это столица Англии.</p>

<h2 ><p>Париж — это столица Франции.</p>

Примечание: Вы можете узнать намного больше про CSS в CSS Учебнике на нашем сайте W3Schools.

HTML Закладки с ID и ссылками

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

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

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

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

Пример

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

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

Пример

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

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

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

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

Пример

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

Примечание: Ознакомтесь более подробнее с JavaScript в разделе HTML JavaScript или в JavaScript Учебнике на нашем сайте W3Schools.

HTML id Attribute

The HTML id attribute is used to specify a unique id for an HTML element.

You cannot have more than one element with the same id in an HTML document.

Using The id Attribute

The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.

The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.

The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces <>.

In the following example we have an <h1> element that points to the id name "myHeader". This <h1> element will be styled according to the #myHeader style definition in the head section:

Example

Note: The id name is case sensitive!

Note: The id name must contain at least one character, cannot start with a number, and must not contain whitespaces (spaces, tabs, etc.).

Difference Between Class and ID

A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:

Example

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

<!— An element with a unique id —>
<h1 Cities</h1>

<!— Multiple elements with same class —>
<h2 ><p>London is the capital of England.</p>

<h2 ><p>Paris is the capital of France.</p>

<h2 ><p>Tokyo is the capital of Japan.</p>

Tip: You can learn much more about CSS in our CSS Tutorial.

HTML Bookmarks with ID and Links

HTML bookmarks are used to allow readers to jump to specific parts of a webpage.

Bookmarks can be useful if your page is very long.

To use a bookmark, you must first create it, and then add a link to it.

Then, when the link is clicked, the page will scroll to the location with the bookmark.

Example

First, create a bookmark with the id attribute:

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

Example

Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:

Using The id Attribute in JavaScript

The id attribute can also be used by JavaScript to perform some tasks for that specific element.

JavaScript can access an element with a specific id with the getElementById() method:

Example

Use the id attribute to manipulate text with JavaScript:

Tip: Study JavaScript in the HTML JavaScript chapter, or in our JavaScript Tutorial.

HTML Атрибут ID

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

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

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

Пример

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

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

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

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

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

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

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

Пример

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

<!— A unique element —>
<h1 >
<!— Multiple similar elements —>
<h2 ><p>London is the capital of England.</p>

<h2 ><p>Paris is the capital of France.</p>

<h2 ><p>Tokyo is the capital of Japan.</p>

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

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

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

Примере

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

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

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

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

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

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

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

Пример

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

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

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

Id в html для чего нужен