Урок #18: Изучаем атрибут ID в HTML самостоятельно

Всем привет дорогие друзья. Сегодня воскресенье, а значит еще один полезный урок по созданию сайтов на языке HTML. Поговорим мы про атрибут id в HTML. В предыдущем уроке мы разбирали с вами, что такое классы и как их использовать в верстке, т.е как они работают.

Использование идентификатора id в HTML

Атрибут id указывает на уникальный идентификатор элемента в HTML, к которому можно также как и классу обратиться посредством языка Javascript или же CSS для выполнения определенных задач.

В CSS обозначается обычным знаком решетка (#) после которого без пробелов идет имя нашего идентификатора, которое всегда должно быть написано на латинице.

Обычный пример ниже. Для заголовка ниже мы зададим атрибут id с именем myheader. Запишется он вот так в таблице стилей:

Результат будет вот таким:

В стилях мы задали для атрибута id свойство заливки фона элемента заголовка, добавили цвет шрифта, отступ и выравнивание по центру.

Примечание: Атрибут id может быть задан или указан для любого тега или элемента в HTML.

Важно! Имя идентификатора id чувствительно к регистру. Если делаете большими буквами, также большими буквами указывайте и в CSS.

Должно содержать также не менее одного символа и не должно иметь пробелов, вкладок, отступов и т.д.

Различия между классами и идентификаторами

Вполне логичный вопрос, так чем же пользоваться в итоге, если можно применять и тот, и другой способы? Ответ простой. Идентификатор id по принципу приоритета стоит выше класса, т.е если у элемента будет сначала прописан идентификатор, а потом за другим элементов пойдет класс, то браузер сначала исполнит запрос в таблице стилей к идентификатору id, а уже потом к классу! Это нужно просто запомнить.

И еще элемент в html может иметь только один идентификатор, в то время как имя класса может использоваться несколькими элементами!

Результат:

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

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

Пример ниже показывает как с помощью атрибута id можно манипулировать текстом:

Так выглядит текст пока кнопка не зажата:

После нажатия на кнопку «Change Text» мы получим изменение текста с идентификатором #myHeader по которому обращается Яваскрипт:

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

Мы упоминали в уроке про html ссылки, что для удобства чтения в каждую ссылку элемента списка можно заключить свой идентификатор с атрибутом и переходить до нужно блока текста на странице, если текст реально очень большой. Это очень удобно и является частью юзабилити сайта.

Давайте для начала создадим якорь с идентификатором id:

А теперь добавим закладку-якорь в ссылку

На этом наш урок подошел к концу. Впереди нас ждет следующая полезность — работа с html iframe.

Всем хорошего дня и приятного изучения!