Атрибуты HTML class и id.

Довольно часто, просматривая исходный код многих HTML-страниц, можно видеть добавление к HTML-элементам двух атрибутов:

+ class

+ id

Посмотрите, скажем, на это изображение:

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

Как вы можете видеть из примера выше, атрибуты class и id имеют значение, которое указывается после знака "=".

class="значение"

id="значение"

Возникает вопрос, что же можно указывать в качестве этого значения?

Значением этих атрибутов может быть:

+ Любая комбинация букв и цифр латинского алфавита [a-zA-Z0-9] знака "-" и "_".

НО, получившаяся комбинация не должна начинаться:

+ с цифры

+ Двух знаков тире "--"

Таким образом значение атрибутов class и id придумываете вы сами.

Например, давайте для элемента абзаца на странице добавим атрибут class и придумаем для него какое-нибудь значение.

<p>Пример абзаца</p>

Добавление атрибута class или id, само по себе, никаких изменений во внешний вид элемента не вносит. Давайте в этом сейчас убедимся.

<p>Пример абзаца без атрибутов</p
<p>Пример абзаца с атрибутом class</p>
<p id="my_parag1">Пример абзаца с атрибутом id</p>

Так для чего же нужны эти атрибуты?

С их помощью вы даете элементам на странице что-то вроде уникального номера-названия.

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

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

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

Таким образом, добавляя элементам на веб-странице атрибуты id или class мы просто даем им имена.

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