HTML Атрибуты
Атрибуты содержат дополнительную информацию об элементах HTML.
Атрибуты тегов HTML
- Все HTML элементы могут иметь атрибуты
- Атрибуты предоставляют дополнительную информацию об элементах
- Атрибуты всегда задаются в начальном теге
- Атрибуты обычно входят в пары имя/значение, такие как: name="value"
Атрибут href
Тег <a> определяет гиперссылку.
Атрибут href указывает URL адрес страницы, на которую переходит ссылка:
<a href="https://schoolsw3.com">Посетить Schoolsw3</a>
Попробуйте сами »
Вы узнаете больше о ссылках в разделе HTML Ссылки.
Атрибут src
Тег <img> используется для встраивания изображения в HTML страницу.
Атрибут src указывает путь к отображаемому изображению:
<img src="img_girl.jpg">
Попробуйте сами »
Атрибуты width и height
Тег <img> также должен содержать атрибуты width и
height, который определяет ширину и высоту изображения (в пикселях):
<img src="img_girl.jpg" width="500" height="600">
Попробуйте сами »
Атрибут alt
Обязательный атрибут alt требуется для тега <img>
указывает альтернативный текст для изображения, если изображение по какой-либо причине не может быть отображено.
Это может быть связано с медленным соединением или ошибкой в системе.
Атрибут src, используется пользователем для чтения программы с экрана.
<img src="img_girl.jpg" alt="Девушка в куртке">
Попробуйте сами »
Посмотрите, что произойдет, если мы попытаемся отобразить изображение, которого не существует:
<img src="img_typo.jpg" alt="Девушка в куртке">
Попробуйте сами »
Вы узнаете больше об изображениях в нашем разделе HTML Изображения.
Атрибут style
Атрибут 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 или TITLE.
Однако консорциум sw3C рекомендует строчные атрибуты в HTML и требует строчные атрибуты для более строгих типов документов, таких как XHTML.
Schoolsw3 всегда использует имена атрибутов в нижнем регистре.
Всегда цитировать значения атрибутов
Стандарт HTML не требует кавычек вокруг значений атрибутов.
Однако консорциум sw3C рекомендует строчные атрибуты в HTML и требует строчные атрибуты для более строгих типов документов, таких как XHTML.
Хорошо:
<a href="https://schoolsw3.com/html/">Посетите HTML Учебник</a>Плохо:
<a href=https://schoolsw3.com/html/>Посетите HTML Учебник</a>Иногда приходится использовать кавычки. В примере атрибут title отображается неправильно, так как он содержит пробел:
<p
title=О Schoolsw3>
Попробуйте сами »
В Schoolsw3 всегда используем кавычки вокруг значений атрибутов.
Одинарные или двойные кавычки?
Двойные кавычки вокруг значений атрибутов наиболее распространены в HTML, но также могут использоваться и одинарные кавычки.
В некоторых ситуациях, когда само значение атрибута содержит двойные кавычки, необходимо использовать одинарные кавычки:
<p title='Джон "Дробовик" Нельсон'>
Или наоборот:
<p title="Джон 'Дробовик' Нельсон">
Попробуйте сами »
Краткое содержание главы
- Все HTML элементы могут иметь атрибуты
- Атрибут
hrefв теге<a>указывает URL адрес страницы, на которую переходит ссылка - Атрибут
srcв теге<img>указывает путь к отображаемому изображению - Атрибут
widthиheightв теге<img>предоставьте информацию о размере изображений - Атрибут
altв теге<img>предоставляет альтернативный текст для изображения - Атрибут
styleиспользуется для добавления стилей к элементу, таких как цвет, шрифт, размер и многое другое - Атрибут
langв теге<html>тег объявляет язык веб страницы - Атрибут
titleопределяет некоторую дополнительную информацию об элементе
Упражнения HTML
Справочник атрибутов HTML
Полный список всех атрибутов для каждого HTML элемента приведен в нашем разделе: HTML Справочник атрибутов.