Главная » Руководство по HTML – HTML5 введение » Атрибуты элементов HTML

Атрибуты элементов HTML

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

Это часть языка гипертекстовой разметки (HTML). Атрибуты нужны для настройки поведения или отображения элементов HTML на веб-странице. Например, их можно применять для изменения размера, цвета, а также функциональности элементов HTML.

HTML - атрибуты

Все элементы HTML могут иметь атрибуты;
Атрибуты предоставляют дополнительную информацию об элементах;
Атрибуты всегда указываются в начальном теге;
Атрибуты обычно представляют собой пары: имя и значение, например: name="value"

Атрибут href

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

<a href="https://www.appnet.club">Посетите веб-сайт AppNet.club</a>

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

Атрибут src

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

<img src="appnet_logo.png" >

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

1. Абсолютный URL-адрес — ссылка на внешние изображение, размещенное на другом веб-сайте:

src="https://www.appnet.club/appnet_logo.png"

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

2. Относительный URL-адрес — ссылка на изображение, размещенное в пределах вашего веб-сайта. В этом случае URL-адрес не включает доменное имя. Если URL-адрес начинается без косой черты (Слэш), он будет относиться к текущей странице:

src="appnet_logo.png"

Если URL-адрес начинается с косой черты, он будет относиться к домену:

src="/appnet_logo.png"

✪ Рекомендация: почти всегда лучше использовать относительные URL-адреса. Они не сломаются, если вы смените домен.

Атрибуты width и height

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

<img src="appnet_logo.png" width="483" height="483">

Атрибут alt

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

<img src="appnet_logo.png" alt="Лого AppNet.club">

Атрибут style

Атрибут style используется для добавления к элементу стилей, таких как цвет, шрифт, размер и т. д.

<p style="color:yellow;">Это желтый параграф.</p>

Атрибут lang

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

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

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

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

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

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

Атрибут title

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

Значение атрибута title будет отображаться в виде всплывающей подсказки при наведении курсора на элемент:

<p title="Здесь подсказка">Это параграф.</p>

✪ Рекомендация: всегда пишите атрибуты в нижнем регистре, несмотря на то, что стандарт HTML не требует выбора регистра при написании имен атрибутов.

Атрибут title (и все остальные атрибуты) могут быть написаны прописными или строчными буквами, как title или TITLE.

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

✪ Рекомендация: всегда указывайте значения атрибутов в кавычках, несмотря на то, что стандарт HTML не требует заключения значений атрибутов в кавычки.

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

Корректно:
<a href="https://appnet.club/html/">Посетите наше руководство по HTML</a>

Некорректно:
<a href=https://appnet.club/html/>Посетите наше руководство по HTML</a>

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

Некорректно:
<p title=Сайт APPNET.club>

Корректно:
<p title="Сайт APPNET.club">

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

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

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

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

<p title='Мы использовали атрибут "title" в этом примере'>

Или наоборот

<p title="Мы использовали атрибут 'title' в этом примере">

Краткое содержание

Все элементы HTML могут иметь атрибуты:

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

Для чего нужны атрибуты в HTML?

Проверьте себя, насколько хорошо вы запомнили материал.

☛ Заголовки HTML

Элементы HTML ☚

Поделиться ссылкой