Просмотров: 1 344

Чем отличаются атрибуты HTML id от class.

Эта статья является продолжением статьи об атрибутах id и class. Если вы успели ее прочитать, то у вас наверняка мог возникнуть вопрос, чем же отличаются эти атрибуты друг от друга?

Бывают ситуации, что одному элементу присваиваются сразу оба атрибута:

<p id="value" class="value">Абзац текста</p>

В чем же отличие?

Атрибут id расшифровывается от английского слова «identificator», которое переводиться как «идентификатор» или уникальный признак объекта, позволяющий различать его от других объектов. Это, своего рода, паспорт элемента.

images

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

Нельзя писать так:

<p id="value">Элемент абзаца</p>
<p id="value">Элемент абзаца</p>

Конечно, от того, что вы напишите содержимое html-документа таким образом, не изменится его внешний вид и явных ошибок вы не увидите.

Ошибки станут заметными, когда вы начнете обращаться к этим элементам с помощью различных технологий, таких как CSS или Javascript. Они не смогут корректно отыскать их на странице и выполнить с ними необходимые действия.

Атрибут id чаще всего используется для того, чтобы пометить области на странице, которые встречаются только один раз. Например, на блогах часто выводится список заметок.

Wix Blog Coming Soon_1

Каждая заметка, сама по себе уникальна, и другой такой нет. В этом случае, каждой из этих заметок может быть присвоен свой уникальный идентификатор, и в случае необходимости нужную заметку можно скрыть или оформить соответствующим образом.

Теперь атрибут class. Его задача объединить группу элементов в один класс (т.е. группу со сходными параметрами и характеристиками).

images (1)

Элементов с атрибутом class может быть сколько угодно на странице.

К примеру, если какую-то группу абзацев нужно выделить определенным цветом, им можно присвоить атрибут class с одинаковым значением.

<p>Элемент абзаца</p>
<p>Элемент абзаца</p>

Теперь, ко всем этим абзацам можно обратится с помощью технологии CSS и разом поменять их внешний вид.

Это очень удобно и экономит огромное количество времени.

Надеюсь, теперь отличия между этими атрибутами стали вам понятны. Если будут вопросы, пишите в комментариях.