HTML Атрибуты

Атрибуты HTML служат для передачи дополнительной информации о HTML-элементах.

Атрибуты HTML

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

Атрибут href

Для определения гиперссылки в HTML используется тег <a>. Атрибут href задает URL страницы, на которую ведет ссылка:

Пример:

<a href="https://htmlclub.ru">Посетить HTML Club</a>

Подробнее о ссылках будет рассказано в главе HTML Ссылки.

Атрибут src

Тег <img> используется для вставки изображения на страницу HTML. Атрибут src задает путь к изображению, которое будет отображено:

Пример:

<img src="img_girl.jpg">

Существует два способа задать URL в атрибуте src:

Абсолютный URL — Ссылка на изображение, размещенное на другом сайте. Пример: src="https://msiter.ru/images/img_girl.jpg".

Примечание: Внешние изображения могут быть защищены авторским правом. Если вы не получите разрешение на их использование, вы можете нарушить законы об авторском праве. Кроме того, вы не можете контролировать внешние изображения; они внезапно могут быть удалены или изменены.

Относительный URL — Ссылка на изображение, размещенное внутри сайта. Здесь URL не включает имя домена. Если URL начинается без слэша, он будет относительным к текущей странице. Например: src="img_girl.jpg". Если URL начинается со слэша, он будет относительным к домену. Например: src="/images/img_girl.jpg".

Совет: Как правило, лучше использовать относительные URL. Они не сломаются, если вы измените домен.

Атрибуты width и height

Кроме адреса изображения тег <img> также может содержать атрибуты width и height, которые задают ширину и высоту изображения (в пикселях):

Пример:

<img src="img_girl.jpg" width="500" height="600">

Атрибут alt

Обязательный атрибут alt для тега <img> задает альтернативный текст для изображения, если по какой-то причине оно не может быть отображено. Это может произойти из-за медленного соединения, ошибки в атрибуте src или если пользователь использует экранный диктор.

Пример:

<img src="img_girl.jpg" alt="Девушка в куртке">

Вы узнаете больше об изображениях в главе «HTML Изображения».

Атрибут style

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

Пример:

<p style="color:red;">Это красный абзац.</p>

Вы узнаете больше о стилях в главе HTML Стили.

Атрибут lang

Следует всегда включать атрибут lang внутри тега <html>. Он декларирует язык веб-страницы. Это помогает поисковым системам и браузерам.

Следующий пример задает русский язык для страницы:

<!DOCTYPE html>
<html lang="ru">
<body>
...
</body>
</html>

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

Следующий пример задает русский язык и Россию в качестве страны:

<!DOCTYPE html>
<html lang="ru-RU">
<body>
...
</body>
</html>

Вы можете увидеть все коды языков в нашем справочнике «HTML Коды языков».

Атрибут title

В атрибуте title можно определить дополнительную информацию об этом элементе.

Содержимое атрибута title будет отображаться как всплывающая подсказка, когда вы наводите указатель мыши на элемент:

Пример:

<p title="Я подсказка">Это абзац.</p>

Мы советуем для атрибутов всегда использовать только строчные буквы

Стандарт HTML для атрибутов не обязывает использовать строчные буквы. Любой атрибут можно записать как в верхнем, так и в нижнем регистре, например, title или TITLE.

Тем не менее, W3C рекомендует использовать строчные буквы в HTML и требует их использования для более строгих типов документов, таких как XHTML.

Мы советуем всегда заключать значения атрибутов в кавычки

Стандарт HTML не обязывает использовать кавычки вокруг значений атрибутов.

Тем не менее, W3C рекомендует использовать кавычки в HTML и требует их использования для более строгих типов документов, таких как XHTML.

Хорошо:

<a href="https://htmlcub.ru/docs/html/">Посетить наш HTML учебник</a>

Плохо:

<a href=https://htmlclub.ru/docs/html/>Посетить наш HTML учебник</a>

Иногда использование кавычек обязательно. Этот пример не отобразит атрибут title правильно, потому что он содержит пробел:

Пример:

<p title=Описание HTML>

Одинарные или двойные кавычки?

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

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

<p title='Иван "Пушка" Артемов'>

Или наоборот:

<p title="Иван 'Пушка' Артемов">

Краткое содержание главы

У всех HTML-элементов могут быть атрибуты.
Атрибут href для тега <a> определяет URL страницы, куда ведет эта ссылка.
Атрибут src для тега <img> определяет путь к отображаемому изображению.
Атрибут alt тега <img> задает альтернативный текст для изображения.
Атрибуты width и height тега <img> задают размер ширину и высоту изображения в пикселях.
Атрибут style позволяет задать стили для элемента, например, цвет, шрифт, размер и многое другое.
Атрибут lang тега <html> задает язык и страну веб-страницы.
Атрибут title определяет дополнительную информацию об элементе.