Посилання та зображення
Навчись додавати посилання і картинки на сторінку
Посилання <a>
Тег <a> (anchor — якір) створює посилання. Головний атрибут — href (hypertext reference) — адреса куди веде посилання.
<!-- Зовнішнє посилання -->
<a href="https://google.com">Відкрити Google</a>
<!-- Внутрішнє посилання (інша сторінка сайту) -->
<a href="/about">Про нас</a>
<!-- Посилання в тій же вкладці (за замовчуванням) -->
<a href="https://google.com">Google</a>
<!-- Відкрити в новій вкладці -->
<a href="https://google.com" target="_blank" rel="noopener">Google</a>target="_blank" — відкрити посилання в новій вкладці.
rel="noopener" — безпека: нова вкладка не має доступу до поточної сторінки.
Зображення <img>
Тег <img> вставляє зображення. Він самозакриваючий — не має закриваючого тегу.
<!-- src — шлях до зображення, alt — опис для скрін-рідерів -->
<img src="photo.jpg" alt="Фото міста">
<!-- Розміри (краще задавати завжди) -->
<img src="logo.png" alt="Логотип" width="200" height="100">
<!-- Зображення з інтернету -->
<img src="https://via.placeholder.com/300" alt="Заглушка">alt — дуже важливий! Якщо зображення не завантажиться, браузер покаже цей текст. Також читається скрін-рідерами для людей з вадами зору.
Завжди додавай атрибут alt до зображень! Пошта з порожнім alt або без нього — це погано для SEO і доступності. Якщо зображення декоративне і не несе змісту — залиш alt='', але не прибирай атрибут зовсім.
Зображення можна обгорнути в посилання — тоді клік на картинку переходить по URL.
Відносні шляхи (photo.jpg, /images/logo.png) — для файлів на твоєму сервері. Абсолютні (https://...) — для ресурсів в інтернеті. Для власного сайту завжди використовуй відносні шляхи.