HTML-изображение

HTML-тег изображения <img> отображает изображение на веб-странице. В этом уроке мы научимся определять HTML-элемент изображения на примере различных примеров.

Копировать

<img src=""/>

Примеры

Ниже приведен простой пример отображения HTML-изображения на веб-странице.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 
  <img src="https://htmlformatter.github.io/img/dragonfly.jpg">
  
</body>
</html>

Если изображение по адресу src недоступно, браузеры отображают символ поврежденного изображения.

Атрибут alt позволяет отображать альтернативный текст, если изображение отсутствует. Это повышает читабельность веб-страницы при отсутствии изображения.

<!DOCTYPE html>
 <html>
 <head>
 </head>
 <body>

 <h2 id="image-loaded" class="text-2xl font-bold text-gray-900 mt-8 mb-4">Image loaded</h2>
 <img src="https://htmlformatter.github.io/images1/dragonfly.jpg">

 

 <h2 id="image-not-loaded" class="text-2xl font-bold text-gray-900 mt-8 mb-4">Image not loaded</h2>
 <img src="https://htmlformatter.github.io/images1/dragonfly_n.jpg">

 

 <h2 id="image-not-loaded-but-alternate-text-is-present" class="text-2xl font-bold text-gray-900 mt-8 mb-4">Image not loaded, but alternate text is present</h2>
 <img src="https://htmlformatter.github.io/images1/dragonfly_n.jpg" alt="Dragon Fly">

 </body>
 </html>

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