Menu
Допомога ЗСУ

Як додати зображення на веб-сторінку за допомогою HTML

Додати зображення на сайт — простіше простого, якщо знаєш правильний тег. У мові HTML для цього використовується тег <img>. Саме він відповідає за виведення картинок на вашій веб-сторінці. Розберімо детально, як правильно вставити зображення та не нашкодити SEO.

Основний синтаксис тега <img>

Щоб додати зображення в HTML-документ, використовується такий запис:

html
<img src="шлях до файлу" alt="альтернативний текст">

  • src — це атрибут, який вказує шлях до вашого графічного файлу (формати підтримуються: GIF, PNG, JPEG).

  • alt — обов’язковий атрибут, який задає альтернативний текст. Він відображається, якщо зображення не завантажилося, або коли користувач використовує спеціальні програми (екранні читачі).

Приклад коду для HTML4 та HTML5

html
<img src="images/dzen.png" alt="Листи майстра дзен">

Приклад коду для XHTML (з самозакриваючим тегом)

html
<img src="images/dzen.png" alt="Листи майстра дзен" />

Повний приклад вставки зображення на сторінку

Ось готовий HTML-документ, де ми додаємо зображення:

html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Мої зображення</title> </head> <body> <p><img src="images/dzen.png" alt="Листи майстра дзен"></p> </body> </html>

Важливі поради для SEO

  • Завжди заповнюйте атрибут alt — пошукові системи читають саме його, щоб зрозуміти, про що зображення.

  • Використовуйте зрозумілі імена файлів для зображень (наприклад, majster-dzen.png, а не img123.png).

  • Оптимізуйте розмір зображень для швидкого завантаження сайту — це позитивно впливає на ранжування у пошуку.

Ось і все — тепер ви знаєте, як додати зображення на веб-сторінку просто і правильно. І дизайн покращите, і Google скаже вам «дякую» 😉

Потрібен сайт, консультація, анімація або графічний дизайн? Лишіть заявку і я з вами зв'яжуся!
Підтримати розвиток ресурсу



Підтримати проєкт через Monobank

Hosting CityHost
Коментарі
    Copyright © 2025 Web-Master "TWS" | Powered by Web-Master "TWS"
    Translate »