| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 1.0 + | 1.0 + | 1.0 + | 1.0 + | 1.0 + | 1.0 + | 1.0 + |
Специфікація
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Опис
Тег <img> призначений для відображення на веб-сторінці зображень в графічному форматі GIF, JPEG або PNG. Адреса файлу з картинкою задається через атрибут src . Якщо необхідно, то малюнок можна зробити посиланням на інший файл, помістивши тег <img> в контейнер <a> . При цьому навколо зображення відображається рамка, яку можна прибрати, додавши атрибут border="0" в тег <img> .
Малюнки також можуть застосовуватися в якості карт-зображень, коли картинка містить активні області, які виступають в якості посилань. Така карта за зовнішнім виглядом нічим не відрізняється від звичайного зображення, але при цьому воно може бути розбите на невидимі зони різної форми, де кожна з областей служить посиланням.
Синтаксис
| HTML | <img src="URL" alt="альтернативний текст"> |
| XHTML | <img src="URL" alt="альтернативний текст"/> |
Атрибути
- align
- Визначає як малюнок буде вирівнюватися по краю і спосіб обтікання текстом.
- alt
- Альтернативний текст для зображення.
- border
- Товщина рамки навколо зображення.
- height
- Висота зображення.
- hspace
- Горизонтальний відступ від зображення до навколишнього контенту.
- ismap
- Каже браузеру, що картинка є серверної картою-зображенням.
- longdesc
- Вказує адресу документа, де міститься анотація до картинки.
- lowsrc
- Адреса зображення низької якості.
- src
- Шлях до графічного файлу.
- vspace
- Вертикальний відступ від зображення до навколишнього контенту.
- width
- Ширина зображення.
- usemap
- Посилання на тег <map>, що містить координати для клієнтської карти-зображення.
Також для цього тега доступні універсальні атрибути та події .
Закриваючий тег
Чи не потрібно.
Приклад
HTML5 IE Cr Op Sa Fx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> Тег IMG </title> </head> <body> <p> <a href="lorem.html"> <img src="images/girl.png" width="189" height="255" alt="lorem"> </a> Lorem ipsum dolor sit amet ... </p> </body> </html>