HTML первые шаги - урок 8 - Универсальные атрибуты тегов

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

Атрибут id

Атрибут id показывает уникальное имя тега, такие имена не должны повторятся, потому что это может вызвать проблемы при работе с jQuery или Javascript. Вот несколько примеров использования тега id:

...
<ul id="menu1">
  <li id="item1">lorem</li>
  <li id="item2">ipsum</li>
  <li id="item3">привет</li>
  <li id="item4">мир</li>
</ul>
...
<div id="header"></div>

Атрибут id можно будет использовать чтобы задавать CSS-стили оформления отдельно для каждого блока, меню, пункта меню или других тегов. Также id используются в Javascript (jQuery).

Атрибут class

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

<ul id="menu1">
  <li class="item">lorem</li>
  <li class="item">ipsum</li>
  <li class="item">привет</li>
  <li class="item">мир</li>
</ul>

Атрибут style

Атрибут style служит для того чтобы писать CSS стили прямо в теге. Можете пока не сильно вдаваться в подробности этого атрибута, его мы подробно разберем в учебнике CSS. Пока напишу только более менее понятные примеры:

...
<div style="width: 200px; height: 100px; background: #dddddd">
Блок
</div>
...
<p style="font-size: 14px; color: #333333">
Текст
</p>

Первый пример выводит блок шириной 200 пикселей, 100 пикселей, фон #dddddd (где-то около серого). Второй пример это абзац текста размером шрифта в 14 пикселей, цветом #333333 (близко к черному, но нет).

Атрибут title

Применяется для всплывающей подсказки, когда мы наводим на элемент на странице:

...
<img src="./images/image.jpg" alt="photo" title="это я" />
...
<a href="html2.html" title="моя страница">Ссылка</a>
...
<h2 title="заголовок">Привет, Мир!</h2>

Конечно есть еще и другие универсальные атрибуты: accesskey, contenteditable, contextmenu, dir, hidden, lang, spellcheck, tabindex. Я думаю вы с ними столкнетесь позже когда будете заниматься версткой мультиязычных сайтов. А пока будет достаточно знать об основных универсальных атрибутах.