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

Научимся соединять страницы между собой и наполнять их мультимедиа.

Ссылки — <a>

Ссылка задаётся тегом <a> с атрибутом href. Ссылаться можно на внешние сайты, локальные файлы и элементы своей страницы.

<a href="https://developer.mozilla.org">MDN Docs</a>
<a href="about.html">О нас</a>
<a href="#contacts">Контактная информация</a>

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

Изображение — одиночный тег с src (путь) и alt (текст-заменитель). Ширину и высоту можно управлять через CSS, а здесь уменьшим прямо атрибутами для примера:

<img src="cat.jpg" alt="Рыжий кот на подоконнике" width="300">

Атрибут alt показывается, если картинка не загрузилась. Скринридеры озвучивают его незрячим пользователям — это не формальность, а доступность.

Таблицы

Таблица строится из рядов <tr>, ячеек данных <td> и заголовков <th>. Для объединения ячеек есть атрибуты colspan и rowspan.

<table>
  <thead>
    <tr><th>Технология</th><th>Сложность</th></tr>
  </thead>
  <tbody>
    <tr><td>HTML</td><td>Низкая</td></tr>
    <tr><td>CSS</td><td>Средняя</td></tr>
    <tr><td>JS</td><td>Высокая</td></tr>
  </tbody>
</table>

Видео и аудио

Современные теги позволяют встраивать видео без сторонних плееров:

<video controls width="400">
  <source src="promo.mp4">
</video>
<audio controls>
  <source src="track.mp3">
</audio>

Пути: относительные и абсолютные

Путь к файлу может быть полным (от корня сайта) или относительным (от текущей папки). Разница критична при переносе сайта на хостинг:

<img src="images/cat.jpg">        <!-- в подпапке images/ -->
<img src="../images/cat.jpg">     <!-- на уровень выше -->
<a href="/blog/post.html">      <!-- от корня сайта -->
<img src="https://site.ru/i/cat.jpg"> <!-- внешний -->

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

Ленивая загрузка и скорость сайта

Страница не обязана ждать загрузки всех картинок сразу. Атрибут loading="lazy" подгружает изображение, только когда пользователь докрутил до него:

<img src="gallery/photo-12.jpg"
     alt="Фото из поездки"
     loading="lazy" decoding="async">

Семантика таблиц: caption и scope

Таблицам можно дать подпись <caption>, а заголовки колонок пометить scope="col" — так её понимают скринридеры и поисковики:

<table>
  <caption>Расписание занятий</caption>
  <tr>
    <th scope="col">День</th>
    <th scope="col">Тема</th>
  </tr>
  <tr><td>Пн</td><td>HTML</td></tr>
</table>

Ссылка «наверх» и глубокие якоря

Якорь можно направить не только вниз, но и «наверх» — на любого предка, у которого есть id. Классика — кнопка возврата:

<body id="top">
  <a href="#top">↑ Наверх</a>

  <!-- или на любой блок -->
  <a href="#footer">К контактам</a>
  <footer id="footer">...</footer>

Безопасные ссылки: rel="noopener"

При открытии в новой вкладке передавайте rel="noopener noreferrer" — тогда вкладка-цель не получит ссылку на вашу страницу и не сможет ею манипулировать:

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">Внешняя ссылка</a>

Адаптивные изображения: srcset и <picture>

Тег <picture> и атрибут srcset подсказывают браузеру несколько вариантов картинки — для экрана, плотности пикселей и формата:

<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg"
       srcset="hero@2x.jpg 2x"
       alt="Баннер">
</picture>

Встраивание: iframe

В чужой контент — карты, видео, формы — встраивают через <iframe>:

<iframe src="https://www.openstreetmap.org/export/embed.html"
        width="500" height="300"
        loading="lazy"></iframe>

Мета-теги соцсетей (Open Graph)

Шаринг в мессенджерах и соцсетях показывает превью-карточку. Ею управляют OG-теги:

<meta property="og:title" content="WebDev Уроки">
<meta property="og:image" content="https://dev.ru/preview.png">
<meta property="og:description" content="Курс по вебу">

Скачивание файла: download

Ссылку можно превратить в кнопку «скачать» — браузер не откроет файл, а сохранит его:

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

<!-- можно задать своё имя загрузки: -->
<a href="files/report.pdf" download="Отчёт-2026.pdf">Скачать</a>

Ссылки mailto и tel

Контактные ссылки открывают почтовый клиент или приложение для звонков:

<a href="mailto:hi@site.ru?subject=Вопрос">Написать нам</a>
<a href="tel:+79990000000">Позвонить</a>

colspan и rowspan

Ячейки таблицы объединяются по строкам и столбцам:

<table>
  <tr>
    <th colspan="2">Объединённый заголовок</th>
  </tr>
  <tr>
    <td rowspan="2">Радужка на две строки</td>
    <td>право 1</td>
  </tr>
  <tr>
    <td>право 2</td>
  </tr>
</table>

Размер изображений для скорости

Скорость загрузки — часть вёрстки. Держите под контролем:

• Фото — WebP или JPEG про среднем качестве;
• Превью не больше 300–400 КБ;
• Ширина картинки не больше, чем блок, в который её ставят.

<img src="hero.webp" alt="Баннер" width="1200" height="500">

Картинка без файла: data URI

Маленькую картинку можно встроить прямо в атрибут — идеально для иконок и прелоадеров:

<img alt="Иконка"
     src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle r='10' fill='%2338bdf8'/></svg>">

Редирект через meta refresh

Страница может «прыгнуть» на другой адрес без JavaScript:

<meta http-equiv="refresh" content="0; url=https://new-site.ru">

video: autoplay, muted, loop

Встроенный плеер управляется атрибутами прямо в разметке:

<video autoplay muted loop controls>
  <source src="bg.mp4" type="video/mp4">
</video>

SVG прямо в HTML

Вектор вставляется тегом — это текст, который можно красить из CSS и анимировать:

<svg width="80" height="80">
  <circle cx="40" cy="40" r="36" fill="#38bdf8"></circle>
</svg>

Favicon: иконка вкладки

Вкладка и закладки украшает маленькая иконка — её подключают тегом link:

<link rel="icon" href="favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="favicon.svg">

CORS: доступ к чужим ресурсам

Загружать можно многое, но манипулировать чужими данными — только по правилам. О них вам скажут в консоли:

<!-- свои/простые ресурсы грузятся свободно -->
<img src="https://cdn.site.ru/logo.png">

<!-- чтение данных (fetch и др.) требует CORS-заголовков -->
fetch("https://api.other.ru/data");

Меню из списков

Классическая навигация строится на <ul> и <a> внутри <nav>:

<nav>
  <ul>
    <li><a href="/">Главная</a></li>
    <li><a href="/blog">Блог</a></li>
  </ul>
</nav>

Query-параметры в ссылках

После ? передают данные между страницами — при фильтрах, поиске, пагинации:

<a href="/catalog?category=notebooks&page=2">Ноутбуки, стр. 2</a>

alt и семантика изображений

Текст alt важен и когда картинка не загрузилась, и для незрячих пользователей. Что писать:

<!-- Содержательные картинки: опишите смысл -->
<img src="diagram.png" alt="График роста продаж за год">

<!-- Декоративные: пустой alt -->
<img src="line.png" alt="">

Мини-проект: страница визитка

Попробуйте собрать трёхстраничный мини-сайт. Простой вариант файловой структуры:

my-site/
├── index.html   <!-- главная -->
├── gallery.html <!-- галерея -->
├── contacts.html<!-- контакты -->
└── images/
    └── avatar.jpg

1. На главной — заголовок, абзац и ссылка «Галерея».
2. В галерее — три изображения в одну строку.
3. В контактах — якорь вниз к блоку с mailto:-ссылкой.
4. Между всеми страницами — взаимная навигация.