Изображения

В HTML изображения определяются с помощью тэга <img>. Тег изображения является пустым элементом, поскольку он содержит только атрибуты и поэтому не имеет закрывающего тега. Самый простой способ использования <img> с атрибутом src (src - это сокращение от источника (source)). Значением атрибута src является URL-адрес изображения, которое вы хотите отобразить.

URL указывает, где хранится изображение, которое обычно находится на вашем сервере.

<img src="my-picture.jpg">

Помимо атрибута src, также необходим атрибут alt. Alt - сокращение от альтернативного текста. Значением атрибута alt является резервный контент элементов - это означает, что атрибут alt будет отображаться, если браузер не смог отобразить само изображение. Значением атрибута alt также является то, что программы чтения с экрана будут читать вслух, когда они придут к вашему изображению. Это означает, что атрибут alt должен использоваться для описания реальной картинки. Допустим, на рисунке изображена Анджелина Джоли, HTML-разметка будет выглядеть так:

<img src="my-picture.jpg" alt="Portrait of Angelina Jolie">

С другой стороны, картину Пикассо можно охарактеризовать как «Портрет ангела Фернандеса де Сото». Работа из более поздней части Голубого периода Пикассо. Мужчина, вероятно, пьющий абсент, изображенный в мрачном стиле ». И почему это длинное описание? Представьте, что вы не можете увидеть картинку, и alt txt - это ваше описание картины.

Последний атрибут, который следует упомянуть в отношении тега изображения, это атрибут title. Если вы когда-либо наводили указатель мыши на изображение и видели текст, это значение атрибута title. Кроме того, этот текст часто называют всплывающей подсказкой. Это добавляет смысловой смысл к вашим изображениям, но должен использоваться только на изображениях, где эффект наведения не противоречит удобству вашей страницы Это означает, что вы не должны использовать атрибут title, например, изображения, которые функционируют как навигация по страницам.

Чему вы научились

• Чтобы на самом деле показать изображение, вы всегда должны добавить атрибут src к тегу изображения
• Значение атрибута alt необходимо для чтения с экрана, если браузер по какой-то причине не может показать вашу картинку
• Атрибут alt важен для пользователей и поисковых роботов, поэтому не забывайте его использовать