Идентификация (ID) и Классы

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

ID (Идентификация)

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

Вы можете использовать элемент id, чтобы, например, определить столбцы на вашей веб-странице, и разметка HTML будет выглядеть следующим образом:

<div id="right-column">Content of the right column</div>
<div id="left-column"> Content of the left column </div>

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

<div id="menu">This would be your menu</div>
<div id="blog-entry">Your first blog-entry</div>
<div id="blog-entry">Your second blog-entry</div>

Классы

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

<div class="blog-entry">
	<p> Just Another Day<br />
	Written by Christina<br />
	On January 11th </p>
	<p class="content">This is my second blog entry, and I just wanted to check in on you </p>
</div>
<div class="blog-entry">
	<p> My First Blog Entry<br />
	Written by Christina<br />
	On January 10th </p>
	<p class="content">I’m so happy to write my first blog entry – yay!</p>
<div>

Вы можете использовать это в сочетании с каскадными таблицами стилей (CSS). CSS сообщает браузеру, как отображать HTML-элемент, это означает, что все форматирование удаляется (или должно быть) из HTML-документа и сохраняется в отдельном файле - также называемом таблицей стилей. Я не буду углубляться в CSS в этом руководстве, но важно, чтобы вы знали, что есть такая вещь, как таблицы стилей, и дизайн вашей веб-страницы определен в этих документах.

Чему вы научились

• ID и классы являются атрибутами
• Идентификаторы (ID) уникальны для конкретного элемента
• Классы могут быть использованы для нескольких элементов
• Обычно, они используются в комбинации с CSS