Модуль 02 — Текст, ссылки, изображения, семантика
Разметка, которую понимают и люди, и программы
Что вы освоите в этом модуле
- Строить иерархию заголовков и размечать текст по смыслу, а не по виду
- Делать маркированные и нумерованные списки
- Записывать ссылки на другие страницы, разделы, почту и телефон
- Правильно указывать пути к файлам: абсолютные и относительные
- Вставлять изображения с описанием для тех, кто их не видит
- Размечать страницу семантическими элементами
Заголовки, абзацы, списки
Заголовки — <h1>…<h6>, от главного к мелким. На странице один <h1> — её тема; разделы — <h2>, подразделы — <h3>. Уровни не пропускают: после h2 идёт h3, а не h4. Списки: <ul> — маркированный (порядок не важен), <ol> — нумерованный (шаги, рейтинг); пункт каждого — <li>.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Рецепт</title>
</head>
<body>
<h1>Блины на молоке</h1>
<p>Тонкие блины на <strong>холодном</strong> молоке. Тесто должно
постоять <em>не меньше 20 минут</em>.</p>
<h2>Ингредиенты</h2>
<ul>
<li>Молоко — 500 мл</li>
<li>Мука — 200 г</li>
<li>Яйца — 2 шт.</li>
</ul>
<h2>Приготовление</h2>
<ol>
<li>Смешать яйца с сахаром и солью.</li>
<li>Добавить молоко и муку, взбить.</li>
<li>Жарить на горячей сковороде.</li>
</ol>
</body>
</html>
<strong> — важное, <em> — смысловое ударение. Браузер показывает их жирным и курсивом, но выбирают их по смыслу: экранный диктор произносит такие слова с интонацией. Если нужен просто жирный шрифт для оформления, это задача CSS. Теги <b> и <i> тоже существуют, но смыслового веса не несут.
h4 выглядит как надо» — ошибка. Уровень заголовка — это структура документа. По заголовкам перемещаются пользователи экранных дикторов и строит оглавление поисковик. Размер меняется в CSS.Спецсимволы
Символы < и & в HTML служебные. Чтобы показать их как текст, пишут мнемоники — код между & и ;:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Спецсимволы</title>
</head>
<body>
<p>Тег абзаца пишется так: <p></p>
<p>ООО «Рога & копыта»</p>
<p>Цена: 1 500 ₽ — не разрывается при переносе</p>
<p>© 2026</p>
</body>
</html>
| Запись | Символ | Когда нужен |
|---|---|---|
< > | < > | Показать тег как текст |
& | & | Амперсанд в тексте и в адресах ссылок |
| неразрывный пробел | Не разрывать строку: «1 500 ₽», «г. Москва», «т. е.» |
© | © | Знак авторского права |
Кавычки «ёлочки», тире и знак рубля в UTF-8 пишут прямо символами: с <meta charset="UTF-8"> мнемоники для них не нужны.
Ссылки
Ссылка — элемент <a> с атрибутом href. Текст ссылки должен говорить, куда она ведёт: «Яндекс Карты», а не «здесь» или «нажмите»:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Ссылки</title>
</head>
<body>
<nav>
<a href="index.html">Главная</a> |
<a href="menu/drinks.html">Напитки</a> |
<a href="#contacts">Контакты</a>
</nav>
<h1>Кафе «Нева»</h1>
<p>Мы есть на <a href="https://yandex.ru/maps/" target="_blank" rel="noopener">Яндекс Картах</a>.</p>
<h2 id="contacts">Контакты</h2>
<p>Почта: <a href="mailto:cafe@example.ru">cafe@example.ru</a>,
телефон: <a href="tel:+78121234567">+7 812 123-45-67</a></p>
</body>
</html>
| href | Куда ведёт |
|---|---|
https://yandex.ru/maps/ | Абсолютный адрес: на другой сайт |
menu/drinks.html | Относительный путь: файл в подкаталоге menu рядом с текущей страницей |
#contacts | Якорь: элемент с id="contacts" на этой же странице |
mailto:адрес | Открыть почтовую программу с письмом на адрес |
tel:+78121234567 | На телефоне — позвонить; номер без пробелов, в международном формате |
target="_blank" открывает ссылку в новой вкладке. Его ставят только для внешних сайтов, и вместе с rel="noopener": без него открытая страница получает доступ к вкладке вашего сайта через JavaScript.
Пути к файлам
Относительный путь отсчитывается от каталога текущей страницы. Пусть сайт устроен так:
site/
├── index.html
├── about.html
├── img/
│ └── logo.svg
└── menu/
├── drinks.html
└── desserts.html
| Откуда | Куда | Путь |
|---|---|---|
index.html | about.html | about.html |
index.html | logo.svg | img/logo.svg |
menu/drinks.html | desserts.html | desserts.html — тот же каталог |
menu/drinks.html | index.html | ../index.html — .. означает «на уровень выше» |
menu/drinks.html | logo.svg | ../img/logo.svg |
Путь, начинающийся с / (/img/logo.svg), отсчитывается от корня сайта. На сервере это удобно, но при открытии файла с диска (file://) корнем становится корень диска, и такие ссылки ломаются. Пока сайт открывается с диска, пишите относительные пути.
Logo.svg и logo.svg — разные файлы. Страница, у которой всё работало на компьютере, после выкладки показывает пустые картинки. Называйте файлы латиницей в нижнем регистре, без пробелов: summer-menu.jpg.Изображения
<img> — пустой элемент с обязательными атрибутами src (путь к файлу) и alt (описание). width и height — размеры в пикселях: браузер заранее оставит место, и текст не «прыгнет», когда картинка загрузится.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Изображения</title>
</head>
<body>
<figure>
<img src="logo.svg" alt="Логотип кафе: две белые волны на синем круге"
width="120" height="120">
<figcaption>Логотип кафе «Нева»</figcaption>
</figure>
<p>Картинка с ошибкой в имени файла:</p>
<img src="logo-new.svg" alt="Логотип кафе" width="120" height="120">
</body>
</html>
Вторая картинка не нашлась — и браузер показал вместо неё текст alt. Этот же текст прочитает экранный диктор незрячему пользователю. Правила для alt: описывает, что важно на картинке в этом месте, а не «картинка» или имя файла; у чисто декоративной картинки — пустой alt="", чтобы диктор её пропустил.
| Формат | Для чего |
|---|---|
| JPEG | Фотографии |
| PNG | Снимки экрана, картинки с прозрачностью и чёткими краями |
| WebP, AVIF | То же, что JPEG и PNG, но файлы в 1,5–2 раза меньше; поддерживаются всеми современными браузерами |
| SVG | Логотипы, значки, схемы: векторный формат, чёткий в любом размере |
<figure> объединяет картинку (или схему, фрагмент кода) с подписью <figcaption>. Фотография с телефона весит 3–5 МБ — перед публикацией её уменьшают до нужного размера и сжимают, иначе страница грузится десятки секунд на мобильной связи.
Семантическая разметка
Семантические элементы называют роль блока на странице. Выглядят они как обычные блоки — разница в смысле:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Кафе «Нева» — новости</title>
</head>
<body>
<header>
<a href="index.html">Кафе «Нева»</a>
<nav>
<a href="menu.html">Меню</a>
<a href="news.html">Новости</a>
<a href="contacts.html">Контакты</a>
</nav>
</header>
<main>
<article>
<h1>Открыли летнюю веранду</h1>
<p>С 1 июня работаем на веранде с видом на Неву.</p>
</article>
<aside>
<h2>Часы работы</h2>
<p>Ежедневно с 9:00 до 22:00</p>
</aside>
</main>
<footer>
<p>© 2026 Кафе «Нева»</p>
</footer>
</body>
</html>
| Элемент | Роль |
|---|---|
<header> | Шапка: логотип, название, навигация |
<nav> | Главная навигация по сайту или странице |
<main> | Основное содержимое; один на странице |
<article> | Самостоятельный материал: новость, статья, карточка товара |
<section> | Тематический раздел со своим заголовком |
<aside> | Дополнительное: врезка, боковая колонка |
<footer> | Подвал: контакты, копирайт, юридическая информация |
<div>, <span> | Блок и строчный фрагмент без смысла — только для оформления |
Сравните ту же страницу, свёрстанную одними <div>:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Без семантики</title>
</head>
<body>
<div class="top">
<div class="logo">Кафе «Нева»</div>
<div class="menu"><span onclick="go('menu')">Меню</span></div>
</div>
<div class="content">
<div class="title">Открыли летнюю веранду</div>
<div>С 1 июня работаем на веранде с видом на Неву.</div>
</div>
</body>
</html>
В браузере обе страницы можно сделать одинаковыми с помощью CSS. Но во второй экранный диктор не найдёт навигацию и главное содержимое, поисковик не поймёт, где заголовок новости, а «Меню» на <span> с обработчиком нельзя выбрать клавиатурой — это не ссылка. Правило: сначала подходящий по смыслу элемент, <div> — когда подходящего нет.
Доступность с первого дня
Сайтами пользуются люди с плохим зрением, с экранными дикторами, без мыши. В России требования к доступности описывает ГОСТ Р 52872-2019 (он основан на международном руководстве WCAG); для сайтов государственных органов доступность обязательна. Большую часть требований выполняет правильная разметка, которую вы уже знаете:
Проверочный список модуля
lang="ru"у<html>и понятный<title>.- Один
<h1>, уровни заголовков без пропусков. - У каждой картинки есть
alt; у декоративной — пустой. - Текст ссылки понятен без окружения: не «тут», не «подробнее» десять раз подряд.
- Навигация — в
<nav>, основное — в<main>. - Всё, на что нажимают, —
<a>или<button>, а не<div>или<span>.
Проверить себя можно без специальных программ: пройдите страницу клавишей Tab — фокус должен обойти все ссылки по порядку. В инструментах разработчика Chrome и Яндекс Браузера есть вкладка Lighthouse с проверкой доступности.
Ключевые выводы модуля
Запомните главное
- Один
h1, заголовки по уровням без пропусков; элемент выбирают по смыслу, вид задаёт CSS <,&, — для служебных символов и неразрывного пробела- Относительный путь — от каталога текущей страницы,
..— уровень выше; имена файлов — латиницей в нижнем регистре - Внешняя ссылка в новой вкладке —
target="_blank" rel="noopener" <img>— всегда сalt,widthиheightheader,nav,main,article,aside,footer— вместо безликихdiv