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
определяет дополнительную информацию об элементе.