Атрибуты HTML

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

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

Атрибут href

Тег <a> создаёт гиперссылку. Его атрибут href задаёт URL, на который ведёт ссылка.

Пример

Ссылка на сайт PromptCookbook.

Страница с гиперссылкой, созданной с помощью тега a, чей href указывает на https://prompt-cookbook.com, с текстом ссылки "Посетите PromptCookbook".

> Результат: полная HTML-страница

Prompt

Страница с гиперссылкой, созданной с помощью тега a, чей href указывает на https://prompt-cookbook.com, с текстом ссылки "Посетите PromptCookbook".

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Href</title>
</head>
<body>

<a href="https://prompt-cookbook.com">Посетите PromptCookbook</a>

</body>
</html>

Атрибут src

Тег <img> размещает изображение на странице. Его атрибут src задаёт путь к изображению.

Путь можно записать двумя способами. Абсолютный URL указывает на изображение на другом сайте, например https://prompt-cookbook.com; обратите внимание, что внешние изображения могут быть защищены авторским правом и могут измениться или исчезнуть без предупреждения. Относительный URL указывает на изображение на вашем собственном сайте и не содержит имени домена, например img_girl.jpg (относительно текущей страницы) или /images/img_girl.jpg (относительно домена).

Совет: Относительные URL почти всегда предпочтительнее, так как они продолжают работать при смене домена.

Пример

Изображение, заданное только атрибутом src.

Страница, встраивающая изображение с помощью тега img, используя только атрибут src, установленный в "img_girl.jpg".

> Результат: полная HTML-страница

Prompt

Страница, встраивающая изображение с помощью тега img, используя только атрибут src, установленный в "img_girl.jpg".

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Src</title>
</head>
<body>

<img src="img_girl.jpg">

</body>
</html>

Атрибуты width и height

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

Пример

Изображение с заданными шириной и высотой.

Страница с изображением (тег img, src "img_girl.jpg"), задающая его размер атрибутами width="500" и height="600" (пиксели).

> Результат: полная HTML-страница

Prompt

Страница с изображением (тег img, src "img_girl.jpg"), задающая его размер атрибутами width="500" и height="600" (пиксели).

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ширина Высота</title>
</head>
<body>

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

</body>
</html>

Атрибут alt

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

С рабочим изображением

Изображение с alt-текстом.

Страница с изображением (src "img_girl.jpg"), включающим обязательный атрибут alt "Девочка в куртке" в качестве альтернативного текста.

> Результат: полная HTML-страница

Prompt

Страница с изображением (src "img_girl.jpg"), включающим обязательный атрибут alt "Девочка в куртке" в качестве альтернативного текста.

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alt</title>
</head>
<body>

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

</body>
</html>

Когда изображение отсутствует

Alt-текст показывается, потому что изображение не существует.

Страница, которая пытается показать несуществующее изображение (src "img_typo.jpg"), поэтому вместо него отображается alt-текст "Девочка в куртке".

> Результат: полная HTML-страница

Prompt

Страница, которая пытается показать несуществующее изображение (src "img_typo.jpg"), поэтому вместо него отображается alt-текст "Девочка в куртке".

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ошибка Alt</title>
</head>
<body>

<img src="img_typo.jpg" alt="Девочка в куртке">

</body>
</html>

Атрибут style

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

Пример

Абзац, оформленный красным цветом.

Страница с абзацем, использующим атрибут style, чтобы сделать текст красным: "Это красный абзац."

> Результат: полная HTML-страница

Prompt

Страница с абзацем, использующим атрибут style, чтобы сделать текст красным: "Это красный абзац."

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style</title>
</head>
<body>

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

</body>
</html>

Атрибут lang

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

Можно также добавить код страны: первые две буквы задают язык, а последние две — страну. Например, en — английский, а en-US — английский язык, используемый в США.

Только язык

Объявление английского языка с помощью lang="en".

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

Язык и страна

Объявление английского языка (США) с помощью lang="en-US".

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

Атрибут title

Атрибут title даёт дополнительную информацию об элементе. Его значение показывается как всплывающая подсказка при наведении курсора на элемент.

Пример

Абзац со всплывающей подсказкой.

Страница с абзацем, у которого есть атрибут title "Я всплывающая подсказка", поэтому наведение курсора на абзац показывает этот текст в виде подсказки. Абзац гласит: "Это абзац."

> Результат: полная HTML-страница

Prompt

Страница с абзацем, у которого есть атрибут title "Я всплывающая подсказка", поэтому наведение курсора на абзац показывает этот текст в виде подсказки. Абзац гласит: "Это абзац."

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>

<p title="Я всплывающая подсказка">Это абзац.</p>

</body>
</html>

Наш совет: всегда используйте атрибуты в нижнем регистре

Стандарт HTML не требует строчных имён атрибутов, поэтому и title, и TITLE работают. Но PromptCookbook рекомендует строчные буквы, а более строгие типы документов, такие как XHTML, требуют этого. PromptCookbook всегда использует строчные имена атрибутов.

Наш совет: всегда заключайте значения атрибутов в кавычки

Стандарт HTML не требует кавычек вокруг значений атрибутов, но PromptCookbook рекомендует их, а XHTML требует. Кавычки иногда обязательны: значение, содержащее пробелы, без них будет отображаться некорректно. PromptCookbook всегда заключает значения атрибутов в кавычки.

Отсутствующие кавычки

Значение title с пробелами, но без кавычек, которое отображается неправильно.

Страница, показывающая, почему кавычки важны: абзац, значение атрибута title которого содержит пробелы, но написано без кавычек, из-за чего оно отображается некорректно. Используй title=Description of PromptCookbook.

> Результат: полная HTML-страница

Prompt

Страница, показывающая, почему кавычки важны: абзац, значение атрибута title которого содержит пробелы, но написано без кавычек, из-за чего оно отображается некорректно. Используй title=Description of PromptCookbook.

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ошибка кавычек</title>
</head>
<body>

<p title=Description of PromptCookbook>Это абзац.</p>

</body>
</html>

Правильно

Значение атрибута, заключённое в кавычки.

<a href="https://prompt-cookbook.com">Visit our HTML tutorial</a>

Неправильно

То же значение атрибута без кавычек.

<a href=https://prompt-cookbook.com>Visit our HTML tutorial</a>

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

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

Пример

Одинарные и двойные кавычки, используемые вокруг значений, содержащих кавычки.

Страница с двумя абзацами, показывающими одинарные и двойные кавычки вокруг значения атрибута, которое само содержит кавычки: один title='John "ShotGun" Nelson' и один title="John 'ShotGun' Nelson".

> Результат: полная HTML-страница

Prompt

Страница с двумя абзацами, показывающими одинарные и двойные кавычки вокруг значения атрибута, которое само содержит кавычки: один title='John "ShotGun" Nelson' и один title="John 'ShotGun' Nelson".

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Одинарные и двойные кавычки</title>
</head>
<body>

<p title='John "ShotGun" Nelson'>Этот абзац использует одинарные кавычки.</p>
<p title="John 'ShotGun' Nelson">Этот абзац использует двойные кавычки.</p>

</body>
</html>

Итоги главы

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