Ссылки и изображения в HTML

Ссылки и картинки — два элемента, без которых веб не был бы вебом. Тег <a> связывает страницы между собой, <img> встраивает визуальный контент. Разберём атрибуты, о которых новички обычно забывают, и составим работающий пример для DevBlog.

Тег <a> — ссылка

Базовый синтаксис:

<a href="https://docs.python.org">Документация Python</a>

href (HyperText Reference) — адрес, куда ведёт ссылка. Текст между тегами — кликабельная надпись.

Абсолютные и относительные URL

<!-- Абсолютный — полный адрес, включая протокол -->
<a href="https://python.org">python.org</a>

<!-- Относительный — путь внутри того же сайта -->
<a href="/posts/asyncio.html">Статья про asyncio</a>
<a href="../index.html">На главную</a>
<a href="contact.html">Контакты</a>

Относительные URL предпочтительны для внутренних ссылок: при смене домена менять их не придётся.

Открытие в новой вкладке

<a href="https://github.com/me" target="_blank" rel="noopener noreferrer">
  GitHub
</a>

• target="_blank" — открыть в новой вкладке/окне.
• rel="noopener noreferrer" — безопасность: новая вкладка не получит доступ к объекту window родительской страницы.

Правило: всегда добавляйте rel="noopener noreferrer" к внешним ссылкам с target="_blank".

Якорные ссылки

Переход к конкретному месту на той же странице:

<!-- Цель: элемент с id -->
<h2 id="installation">Установка</h2>

<!-- Ссылка-якорь -->
<a href="#installation">Перейти к установке</a>

<!-- Якорь на другой странице -->
<a href="/docs/setup.html#installation">Установка</a>

Якоря отлично подходят для оглавлений в длинных статьях блога.

Специальные схемы

<!-- Открыть почтовый клиент -->
<a href="mailto:hello@devblog.ru">Написать мне</a>

<!-- Скачать файл -->
<a href="/files/resume.pdf" download>Скачать резюме</a>

Тег <img> — изображение

<img
  src="/images/python-logo.png"
  alt="Логотип Python"
  width="200"
  height="200"
/>

Атрибуты:

Почему alt важен

Атрибут alt выполняет три функции:
1. Экранные читалки произносят его людям с нарушением зрения.
2. Браузер показывает текст, если изображение не загрузилось.
3. Поисковики индексируют содержимое картинки по alt.

<!-- Плохо: пустой или отсутствующий alt -->
<img src="avatar.jpg" />

<!-- Хорошо: описывает, что изображено -->
<img src="avatar.jpg" alt="Фото автора блога Алексея Петрова" />

<!-- Декоративное изображение: alt="" намеренно пустой -->
<img src="divider.png" alt="" role="presentation" />

Зачем указывать width и height

Браузер резервирует место под картинку ещё до её загрузки. Это устраняет «прыжок» контента (Cumulative Layout Shift) и улучшает показатели Core Web Vitals.

Форматы изображений

Изображение как ссылка

Оберните <img> тегом <a>:

<a href="/posts/python-decorators.html">
  <img
    src="/images/decorators-cover.jpg"
    alt="Обложка статьи о декораторах Python"
    width="640"
    height="360"
  />
</a>

Пример: карточка поста DevBlog

<article class="post-card">
  <a href="/posts/asyncio-guide.html">
    <img
      src="/images/asyncio-cover.webp"
      alt="Схема работы event loop в asyncio"
      width="640"
      height="360"
    />
  </a>
  <div class="post-card__body">
    <h2>
      <a href="/posts/asyncio-guide.html">
        Полное руководство по asyncio
      </a>
    </h2>
    <p>
      Разбираем event loop, корутины и практические паттерны
      для написания асинхронного кода на Python.
    </p>
    <a href="/posts/asyncio-guide.html" class="read-more">
      Читать далее →
    </a>
  </div>
</article>

Обратите внимание: ссылки на один и тот же URL встречаются три раза — на картинке, в заголовке и в кнопке «Читать далее». Это стандартный паттерн для карточек контента.