Урок 04

Ссылки, изображения, медиа

Ссылки <a>

Основной тег для навигации.

<a href="https://example.com">Внешняя ссылка</a>
<a href="/about">Внутренняя</a>
<a href="page.html">Относительная</a>
<a href="#section">Якорь на странице</a>
<a href="mailto:hello@example.com">Email</a>
<a href="tel:+79990001122">Телефон</a>

Что важно:

  • href — обязателен.
  • Текст ссылки должен быть описательным (не «здесь»).
  • Не использовать <a href="#"> для кнопок — для этого <button>.

Внешние ссылки

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    Открыть в новой вкладке
</a>

Что означают атрибуты:

  • target="_blank" — новая вкладка.
  • rel="noopener" — не давать доступ к window.opener.
  • rel="noreferrer" — не передавать Referer.

⚠️ Без noopener возможна уязвимость reverse tabnabbing.

Правило: для внешних ссылок с _blank — всегда noopener noreferrer.

Якоря

<h2 id="features">Возможности</h2>

<a href="#features">Перейти к возможностям</a>

Что даёт: прокрутка к элементу с этим id.

Правило: id уникален. Якорь — это #id.

Внутренние страницы

Относительные пути:

<a href="/about">От корня</a>            <!-- https://site.com/about -->
<a href="about.html">Текущая папка</a>   <!-- /current/about.html -->
<a href="../about.html">Уровень выше</a>
<a href="./about.html">Явно текущая</a>

Правило: внутри сайта — абсолютные от корня (/about). Так надёжнее.

Скачивание

<a href="/files/report.pdf" download>Скачать PDF</a>
<a href="/files/report.pdf" download="report-2026.pdf">Скачать с именем</a>

Что даёт: браузер не открывает, а скачивает.

Изображения <img>

<img src="cat.jpg" alt="Рыжий кот лежит на диване" width="800" height="600">

Обязательные атрибуты:

  • src — путь.
  • alt — текстовое описание.

Рекомендуемые:

  • width, height — размеры (против layout shift).
  • loading="lazy" — отложенная загрузка.
  • decoding="async" — асинхронное декодирование.
  • sizes, srcset — адаптивные картинки.

alt — что писать

Хорошо:

<img src="iphone.jpg" alt="iPhone 15 Pro в титановом корпусе">

Плохо:

<img src="iphone.jpg" alt="картинка">
<img src="iphone.jpg" alt="iphone iphone iphone">

Декоративные картинки:

<img src="divider.png" alt="">

Что даёт:

  • Скринридеры — читают alt.
  • SEO — поисковики понимают картинку.
  • Fallback — если картинка не загрузилась, виден текст.

Правило: alt описывает содержание картинки, а не её существование.

Адаптивные изображения

Простое:

<img
    src="image.jpg"
    alt="Пример"
    width="800"
    height="600"
    loading="lazy"
>

srcset — разные разрешения:

<img
    src="image-800.jpg"
    srcset="
        image-400.jpg 400w,
        image-800.jpg 800w,
        image-1600.jpg 1600w
    "
    sizes="(max-width: 600px) 100vw, 50vw"
    alt="Пример"
>

Что даёт: браузер сам выберет подходящее разрешение.

<picture> — разные форматы:

<picture>
    <source srcset="image.avif" type="image/avif">
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="Пример" width="800" height="600">
</picture>

Что даёт: AVIF → WebP → JPEG fallback.

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

  • JPEG — фото, без прозрачности.
  • PNG — с прозрачностью, скриншоты.
  • WebP — современный, меньше JPEG и PNG.
  • AVIF — новее WebP, ещё меньше.
  • SVG — вектор, иконки, логотипы.
  • GIF — анимации (устаревает).

Правило: AVIF/WebP с JPEG fallback. SVG для иконок и лого.

Аудио

<audio controls preload="metadata">
    <source src="podcast.mp3" type="audio/mpeg">
    <source src="podcast.ogg" type="audio/ogg">
    Ваш браузер не поддерживает аудио.
</audio>

Атрибуты:

  • controls — плеер.
  • autoplay — автостарт (обычно блокируется).
  • loop — повтор.
  • muted — без звука (нужен для autoplay).
  • preload — none, metadata, auto.

Видео

<video controls width="800" height="450" poster="preview.jpg" preload="metadata">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <track kind="subtitles" src="subtitles.vtt" srclang="ru" label="Русские">
    Ваш браузер не поддерживает видео.
</video>

Что здесь:

  • poster — превью до воспроизведения.
  • <track> — субтитры.
  • Два source — MP4 и WebM.

Форматы:

  • MP4 (H.264) — универсальный.
  • WebM (VP9) — меньше размер.
  • AV1 — новее, эффективнее.

Iframe

<iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    width="560"
    height="315"
    title="YouTube video"
    allow="accelerometer; autoplay; encrypted-media"
    allowfullscreen
    loading="lazy"
></iframe>

Атрибуты:

  • src — URL.
  • title — обязателен для доступности.
  • allow — разрешения.
  • loading="lazy" — отложенная загрузка.
  • sandbox — изоляция (для небезопасных источников).

⚠️ Iframe тяжёлый. Не злоупотреблять.

Интерактив: <details>

<details>
    <summary>Показать подробности</summary>
    <p>Скрытое содержимое.</p>
</details>

Что даёт: аккордеон без JavaScript.

Атрибут open:

<details open>

Что даёт: открыт по умолчанию.

<figure> и <figcaption>

<figure>
    <img src="diagram.png" alt="Схема архитектуры">
    <figcaption>Рис. 1. Архитектура приложения</figcaption>
</figure>

Что даёт: семантическая связь картинки и подписи.

Практика

1. Свёрстайте галерею:

<section>
    <h2>Галерея</h2>
    <figure>
        <img src="photo-1.jpg" alt="Описание 1" width="600" height="400" loading="lazy">
        <figcaption>Подпись 1</figcaption>
    </figure>
    <figure>
        <img src="photo-2.jpg" alt="Описание 2" width="600" height="400" loading="lazy">
        <figcaption>Подпись 2</figcaption>
    </figure>
</section>

2. Вставьте видео с субтитрами.

3. Сделайте ссылку на скачивание PDF.

4. Добавьте <details> для FAQ.

Частые ошибки

1. Отсутствие alt:

<img src="cat.jpg">

Решение: всегда alt. Пустой для декоративных.

2. Текст ссылки «здесь»:

<a href="/page">здесь</a>

Решение: описательный текст.

3. href="#" для кнопок:

<a href="#" onclick="...">Кнопка</a>

Решение: <button>.

4. <img> без width/height:

Layout shift — контент прыгает

Решение: всегда width + height.

5. target="_blank" без rel:

Уязвимость

Решение: rel="noopener noreferrer".

6. Iframe без title:

Скринридер не понимает

Решение: всегда title.

7. <embed> и <object> для видео:

Устарело

Решение: <video>.

8. GIF вместо видео:

Огромный размер

Решение: <video autoplay loop muted>.

Итог

  • <a> — href, описательный текст.
  • Внешние ссылки — noopener noreferrer.
  • <img> — src, alt, width, height.
  • alt — содержание картинки.
  • srcset + <picture> — адаптивные.
  • AVIF/WebP — современные форматы.
  • <audio>, <video> — controls, poster, track.
  • Iframe — title, loading="lazy".
  • <details> — аккордеон без JS.
  • <figure> — картинка + подпись.

Дальше — списки, таблицы.