Что такое id и class в HTML — и когда что использовать

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

id – это атрибут, который может использоваться в любом теге. Предназначен для уникального (и должен являтся таким) идентификатора элемента, то есть можно использовать только один раз - к одному элементу например:

<a href=”example.com” id=”link”>Перейдите по ссылке</a> <a href=”example.ru” id=”link_rus”>Или этой</a>

При упоминании в CSS, обращение к id через #.

#link { color: black; text-decoration: none; } #link_rus { color: purple; text:decoration: none; }

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

<ul> <li class=”Europe”>France</li> <li class=”Europe”>Italy</li> <li>India</li> <li>Korea</li> </ul>

При обращении к классу используется “.”

.Europe { color: blue; }

Так, у атрибутов одна цель – разделить одни элементы от других, но разные значения: создать уникальное “имя” для тега, и отсоединить одинаковые теги по смыслу/значению от остальных таких же (но не обязательно).

Для начала разберемся с атрибутом id.

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

У нас есть несколько тегов с разной информацией:

<p>Phasellus sit amet condimentum odio. Sed sed nunc sed ante sodales efficitur et sed massa.</p> <p>Donec sed eros a velit bibendum dignissim. Maecenas lorem eros, semper et semper vel, finibus nec leo.</p>

И чтобы их различать, для каждого тега напишем свой, уникальный id:

<p id=”phasellus”>Phasellus sit amet condimentum odio. Sed sed nunc sed ante sodales efficitur et sed massa.</p> <p id=”donec”>Donec sed eros a velit bibendum dignissim. Maecenas lorem eros, semper et semper vel, finibus nec leo.</p>

Так, в дальнейшем, при разработке, программа сразу поймет с каким именно параграфом нужно работать.

Следующий случай – это якорные ссылки, для которых подходят только id.

Суть якорных ссылок в том, чтобы при навигации ссылаться не на ссылку, а на id элемента:

<p id=”contacts”>Call us if you have questions 0123456789</p> <a href=”#contacts”>Contacts</a>

Допустим, как в примере выше, ссылка ссылается на id тега

с контактами.

Второй исключительный случай, связь элементов форм через id. В теге label, атрибут for ссылается именно на id элемента.

<label for=”user_opinion”>Write your opinion</label> <input type=”text” id=”user_opinion” name=”Your opinion”</input>

Так, информация из формы ввода input будет привязана к элементу с id “user_opinion”, т.к. мы прикрепили его в теге label.

И третий исключительный случай, работа с логической частью, JavaScript, ссылка на id элемента, самый удобный и быстрый способ:

const header = document.getElementById('main-header')

А что будет если продублировать id? В случае с css, это может быть не так критично, но всегда стоит помнить, что программа может выдать не тот результат, который нужен и в навигации, формах и JavaScript это может нарушить всю логику. Поэтому лучше запомнить один id = один элемент.

Теперь перейдем к атрибуту class. Они наоборот объединяют элементы в группу по значению или смыслу.

Например, представим что разрабатывается сайт с не построчным видом, а все элементы размещены в разных секциях, блоках, поэтому в CSS будет использоваться flexbox

flex-direction: row;

Для этого мы создаем класс, в котором будет несколько элементов

<div class=”flex-container”> <div>Italia</div> <div>France</div> <div>Portugal</div>

При обращении к классу в CSS, изменения будут применены ко всем div.

.flex-container { display: flex; flex-direction: row; }

Так, ко классам можно провести аналогию с функцией – один раз создал и много раз вызываешь. Но разница в назначении этих двух атрибутов, не противоречит мысли использовать их совместно, например:

В этом случае, id и class выполняют разные назначения. Id используется, как якорная ссылка, а class для стилевого оформления.

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

id — это уникальное имя для конкретного элемента. Один элемент на странице, один id. Он незаменим там, где важна логика: якорные ссылки, связь элементов формы, работа с JavaScript.

class — это способ объединить элементы по смыслу и применить к ним общие стили. Как функция в программировании: написал один раз – используешь везде, где нужно.

Главное правило, которое стоит запомнить: если вы хотите стилизовать что-то — используйте class. Если вам нужно обратиться к конкретному, единственному элементу — используйте id.

Что такое id и class в HTML — и когда что использовать

Введение

Чуть-чуть теории

Как же понять: что, когда и где использовать?

Заключение