HTML тег img використовується для відображення зображення на веб-сторінці. Тег HTML img — це порожній тег, який містить лише атрибути, закриваючі теги не використовуються в елементі зображення HTML.

Давайте розглянемо приклад зображення HTML.

 <h2>HTML Image Example</h2> <img src="//techcodeview.com/img/html-tutorial/39/html-image.webp" alt="Good Morning Friends"> 

Вихід:

Атрибути HTML-тегу img

Src і alt є важливими атрибутами HTML-тегу img. Нижче наведено всі атрибути тегу зображення HTML.

1) src

Це необхідний атрибут, який описує джерело або шлях до зображення. Він вказує браузеру, де шукати зображення на сервері.

Розташування зображення може бути в тому ж каталозі або на іншому сервері.

2) все

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

3) ширина

Це необов’язковий атрибут, який використовується для визначення ширини для відображення зображення. Зараз це не рекомендується. Ви повинні застосувати CSS замість атрибута ширини.

4) висота

Це h3 висота зображення. Атрибут висоти HTML також підтримує елементи iframe, зображення та об’єкт. Зараз це не рекомендується. Ви повинні застосувати CSS замість атрибута height.

Використання атрибутів висоти та ширини з тегом img

Ви дізналися, як вставити зображення на свою веб-сторінку. Тепер, якщо ми хочемо надати деяку висоту та ширину для відображення зображення відповідно до наших вимог, ми можемо встановити це за допомогою атрибутів висоти та ширини зображення.

приклад:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

Вихід:

Примітка. Завжди намагайтеся вставляти зображення з висотою та шириною, інакше воно може мерехтіти під час відображення на веб-сторінці.

Використання атрибута alt

Ми можемо використовувати атрибут alt з тег. Він відображатиме альтернативний текст, якщо зображення не може відобразитися у браузері. Нижче наведено приклад атрибута alt:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

Вихід:

Як отримати зображення з іншого каталогу/папки?

Щоб вставити зображення у ваш веб-сайт, це зображення має бути у вашій папці, куди ви помістили файл HTML. Але якщо в якомусь випадку зображення доступне в іншому каталозі, ви можете отримати доступ до зображення таким чином:

У наведеному вище операторі ми розмістили зображення на локальному диску E------>папка зображень------>img/html-tutorial/39/html-image-2.webp.

'abc's in numbers'

Примітка. Якщо URL-адреса src буде неправильною або написана з орфографічною помилкою, ваше зображення не відображатиметься на веб-сторінці, тому спробуйте вказати правильну URL-адресу.

використання тег як посилання

Ми також можемо пов’язати зображення з іншою сторінкою або використовувати зображення як посилання. Для цього покладіть тег всередині тег.

приклад:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp"> 

Вихід:

Підтримка браузерів

елемент	Chrome	IE	Firefox	Опера	Сафарі
	Так	Так	Так	Так	Так