HTML -атрибуты
Атрибуты HTML предоставляют дополнительную информацию об элементах HTML.
HTML-атрибуты
- Все элементы HTML могут иметь атрибуты
- Атрибуты предоставляют дополнительную информацию об элементах
- Атрибуты всегда указываются в начальном теге
- Атрибуты обычно представляют собой пары имя/значение, например: name="value"
Атрибут href
Тег <a>определяет гиперссылку. Атрибут
hrefуказывает URL страницы, на которую ведет ссылка:
Пример
<a href="https://www.w3schools.com">Visit W3Schools</a>
Вы узнаете больше о ссылках в нашей главе HTML-ссылки .
Атрибут src
Тег <img>используется для встраивания изображения в HTML-страницу. Атрибут srcуказывает путь к отображаемому изображению:
Пример
<img src="img_girl.jpg">
Есть два способа указать URL в src
атрибуте:
1. Абсолютный URL -адрес — ссылки на внешнее изображение, размещенное на другом веб-сайте. Пример: src="https://www.w3schools.com/images/img_girl.jpg" .
Примечания: Внешние изображения могут быть защищены авторским правом. Если вы не получите разрешение на его использование, вы можете нарушить закон об авторском праве. Кроме того, вы не можете управлять внешними изображениями; его можно внезапно удалить или изменить.
2. Относительный URL -адрес — ссылки на изображение, размещенное на веб-сайте. Здесь URL-адрес не включает доменное имя. Если URL-адрес начинается без косой черты, он будет относиться к текущей странице. Пример: src="img_girl.jpg". Если URL-адрес начинается с косой черты, он будет относиться к домену. Пример: src="/images/img_girl.jpg".
Совет: почти всегда лучше использовать относительные URL-адреса. Они не сломаются, если вы смените домен.
Атрибуты ширины и высоты
Тег <img>также должен содержать
атрибуты widthи
height, которые определяют ширину и высоту изображения (в пикселях):
Пример
<img src="img_girl.jpg" width="500" height="600">
Атрибут alt
Обязательный altатрибут для <img>
тега указывает альтернативный текст для изображения, если изображение по каким-либо причинам не может быть отображено. Это может быть связано с медленным подключением, ошибкой в srcатрибуте или использованием пользователем программы чтения с экрана.
Пример
<img src="img_girl.jpg" alt="Girl
with a jacket">
Пример
Посмотрите, что произойдет, если мы попытаемся отобразить несуществующее изображение:
<img src="img_typo.jpg" alt="Girl
with a jacket">
Вы узнаете больше об изображениях в нашей главе HTML-изображения .
Атрибут стиля
Атрибут styleиспользуется для добавления к элементу стилей, таких как цвет, шрифт, размер и т. д.
Пример
<p style="color:red;">This is a red paragraph.</p>
Вы узнаете больше о стилях в нашей главе Стили HTML .
Атрибут lang
Вы всегда должны включать langатрибут внутри <html>тега, чтобы объявить язык веб-страницы. Это предназначено для помощи поисковым системам и браузерам.
В следующем примере в качестве языка указан английский:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Коды стран также могут быть добавлены к коду языка в lang
атрибуте. Итак, первые два символа определяют язык HTML-страницы, а последние два символа определяют страну.
В следующем примере в качестве языка указан английский, а в качестве страны — США:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Вы можете увидеть все коды языков в нашем Справочнике по языковым кодам HTML .
Атрибут заголовка
Атрибут titleопределяет некоторую дополнительную информацию об элементе.
Значение атрибута title будет отображаться в виде всплывающей подсказки при наведении курсора на элемент:
Пример
<p title="I'm a tooltip">This is a paragraph.</p>
Мы предлагаем: всегда используйте атрибуты нижнего регистра
Стандарт HTML не требует имен атрибутов в нижнем регистре.
Атрибут title (и все остальные атрибуты) может быть написан прописными или строчными буквами, как title или TITLE .
Однако W3C рекомендует атрибуты нижнего регистра в HTML и требует атрибуты нижнего регистра для более строгих типов документов, таких как XHTML.
В W3Schools мы всегда используем имена атрибутов в нижнем регистре.
Мы предлагаем: всегда указывать значения атрибутов в кавычках
Стандарт HTML не требует заключения значений атрибутов в кавычки.
Однако W3C рекомендует кавычки в HTML и требует кавычек для более строгих типов документов, таких как XHTML.
Хорошо:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Плохой:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>Иногда приходится использовать кавычки. В этом примере атрибут title будет отображаться некорректно, так как он содержит пробел:
Пример
<p
title=About W3Schools>
В W3Schools мы всегда заключаем в кавычки значения атрибутов.
Одинарные или двойные кавычки?
Двойные кавычки вокруг значений атрибутов наиболее распространены в HTML, но также можно использовать и одинарные кавычки.
В некоторых ситуациях, когда само значение атрибута содержит двойные кавычки, необходимо использовать одинарные кавычки:
<p title='John "ShotGun" Nelson'>
Или наоборот:
<p title="John 'ShotGun' Nelson">
Краткое содержание главы
- Все элементы HTML могут иметь атрибуты
- Атрибут указывает URL страницы,
hrefна<a>которую ведет ссылка - Атрибут указывает путь
srcк<img>отображаемому изображению. - Атрибуты
widthи предоставляют информациюheightо<img>размере изображений . - Атрибут
altпредоставляет<img>альтернативный текст для изображения - Атрибут
styleиспользуется для добавления к элементу стилей, таких как цвет, шрифт, размер и т . д. - Атрибут тега объявляет
langязык<html>веб-страницы. - Атрибут
titleопределяет некоторую дополнительную информацию об элементе
HTML-упражнения
Справочник по атрибутам HTML
Полный список всех атрибутов для каждого элемента HTML приведен в нашем Справочнике по атрибутам HTML .