Атрибуты HTML тегов

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

Имя - это атрибут, который Вы хотите установить. Например, тег имеет атрибут с именем face, который Вы можете использовать, чтобы указать какой шрифт для текста Вы хотите выбрать.
Значение - это параметр, который будет иметь выбранный атрибут. Соответственно, атрибут face может иметь значение, например, Arial, то есть для текста заданный шрифт Arial.

Значение атрибута должно быть помещенное в двойные кавычки, и отделяется от атрибута знаком равенства. Например, Вы можете увидеть, что был определен цвет текста, а также шрифт в теге :

Многие HTML-теги имеют уникальный набор соответствующих атрибутов. Все теги и их атрибуты рассмотренные в следующих статьях. Но, сейчас мы сосредоточимся на наборе стандартных атрибутов, которые могут использоваться практически в любых HTML-тегах.

Стандартные атрибуты

Есть четыре основных атрибута, которые могут использоваться в большинстве HTML-тегах (хотя не во всех):

Атрибут - id.
Атрибут - title.
Атрибут - class.
Атрибут - style.

Атрибут id

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

Атрибут id - это уникальный идентификационный номер, который можно определить только к одному конкретному элементу.
Если у вас есть два или больше элемента с одинаковыми именами, то Вы можете использовать атрибут id, чтобы различать все элементы, которые имеют одинаковые названия.

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

Этот параграф объясняет, что такое HTML

Этот параграф объясняет, что такое CSS

Обратите внимание, что существуют некоторые особые правила для значения атрибута id, он должен:

Начинаться с букв (A-Z или a-z) и затем может следовать любое количество букв, цифр (0-9), дефисы, подчеркивания и двоеточия.
Значение атрибута id не должно повторяться в HTML-документе.

Атрибут title

Атрибут title задает название для элемента. Синтаксис атрибута title такой же, как в атрибута id. Он часто отображается вместо элемента, если тот не загружается или при наведении курсора мишки:

<h4 title="Привет HTML!">Заголовок HTML</h4>

В браузере данный код выдаст следующий результат:

Заголовок HTML

Теперь попробуйте навести курсор мыши на "Заголовок HTML" и посмотрите на результат.

Атрибут class

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

Пример применения атрибута class

Атрибут style

Атрибут style позволяет указать правила CSS в пределах элемента. Например:

Ваш текст здесь

Атрибут style мы также изучим более детально в разделе о CSS.

Атрибуты интернационализации

Существует три атрибута интернационализации, которые доступны для большинства (хотя и не для всех) элементов XHTML. Вот они:

Атрибут - dir.
Атрибут - lang.
Атрибут - xml:lang.

Атрибут dir

Атрибут dir позволяет указать браузеру, в каком направлении должен размещаться текст. Этот атрибут может принимать одно из двух значений, которые Вы можете видеть в таблице ниже:

Значение	Описание
ltr	Слева направо (значение по умолчанию).
rtl	Справа налево (для языков, таких как иврит или арабский, то есть которые читаются справа налево).

Вот пример, где текст читается справа налево:

<html dir=rtl>
<head>
<title>Направления текста</title>
</head>
<body>
Этот текст читается справа на лево.
</body>
</html>

Примечание: когда dir используется как атрибут тега <html>, он определяет направление текста в пределах всей веб-страницы. Когда же атрибут dir используется внутри другого тега, он контролирует направление текста только в этом теге.

Атрибут lang

Атрибут lang позволяет указать основной язык, используемый в документе, но этот атрибут хранится в HTML только для обратной совместимости с предыдущими версиями HTML. Этот атрибут был заменен атрибутом xml:lang в новых документах XHTML.

Когда атрибут lang включен в тег <html>, он задает язык, который используются в документе. При использовании внутри других тегов, атрибут lang указывает язык, используемый в пределах этого тега. В идеале, браузер будет использовать lang чтобы лучше представить текст для пользователя. Например, страница, на которой используется английский язык:

<html lang=en>
<head>
<title>English Language Page</title>
</head>
<body> This page is using English Language
</body>
</html>

Атрибут xml:lang

Атрибут xml:lang заменяет атрибут lang в XHTML. Значение атрибута xml:lang должно быть использованным в соответствии со стандартом ISO-639, в котором показан список код стран и языков.

Универсальные атрибуты

Ниже представлена таблица атрибутов, которые могут свободно использоваться со многими HTML-тегами:

Атрибут	Параметры	Описание
align	right, left, center	Выравнивание тега по горизонтали
valign	top, middle, bottom	Вертикальное выравнивание тега.
bgcolor	числовые, шестнадцатеричные значения RGB	Цвет фона позади тега.
background	URL-адреса	Фоновое изображения за тегом.
id	Определяется пользователем	Имя тега.
class	Определяется пользователем	Имя тега для использования Каскадных таблиц Стилей CSS.
width	Числовое значение (%, px)	Задает ширину таблицы, изображения или ячейки таблицы.
height	Числовое значение (%, px)	Задает высоту таблицы, изображения или ячейки таблицы.
title	Определяется пользователем	"Pop-up" название элементов при наведении курсора или когда не загружаются.