Начальный · Глава 1 / 18
Страница как понятный документ
После главы: Составить структуру каталога, которая остаётся понятной без оформления.
В этой главе
Содержание раньше карточек
Человек приходит в каталог с вопросом: что здесь есть и что подходит мне? До выбора цвета выпишите ответ страницы одним предложением. Затем перечислите необходимые блоки: название раздела, объяснение уровней, поиск, список изданий и переход к подробностям. Всё остальное должно помогать этим действиям, а не конкурировать с ними.
HTML передаёт не только внешний вид, но и назначение частей документа. Заголовок обозначает тему, ссылка ведёт к адресу, кнопка запускает действие. Если визуально похожие элементы сделаны одинаковыми div, браузер и вспомогательные технологии теряют часть встроенного поведения.
Одна карточка — один ясный следующий шаг
В карточке учебного тома полезны название, уровень, конкретный результат и ссылка на содержание. Десять одинаково ярких кнопок заставляют посетителя сначала изучать интерфейс. Выберите основной следующий шаг: например, «Посмотреть содержание». Покупка становится осмысленной после знакомства с материалом и условиями.
Иерархия заголовков следует смыслу, а не желаемому размеру шрифта. Страница имеет главную тему; названия разделов и карточек подчиняются ей. Размеры можно изменить стилями. Такая дисциплина облегчает проверку: прочитайте одни заголовки и убедитесь, что они образуют связное оглавление.
Основа должна пережить загрузку JavaScript
Прочитайте HTML до выполнения скриптов: есть ли название, описание и обычный адрес главы? Это базовый путь прогрессивного улучшения. Если для открытия статического содержания нужно дождаться сложной сцены, декоративная загрузка стала обязательной зависимостью чтения.
В приложении с серверной разметкой проверьте и момент до готовности обработчиков: кнопка может уже выглядеть активной, но ещё не реагировать. Пользователь не обязан знать слово «гидратация». Предусмотрите работающую ссылку или честное состояние ожидания и проверяйте повторное быстрое нажатие.
Разобранный пример
Минимальная карточка тома
Это HTML-фрагмент, который нужно поместить в документ с lang="ru", кодировкой UTF-8 и метатегом viewport. Ссылка указывает на учебный локальный путь; готовый серверный маршрут в этом примере не создаётся.
html<main>
<h1>Библиотека практических знаний</h1>
<section aria-labelledby="start-title">
<h2 id="start-title">С чего начать</h2>
<article>
<h3>Вычисления без чёрного ящика</h3>
<p>Начальный уровень. Спроектируете локальный каталог.</p>
<a href="/books/foundations">Посмотреть содержание тома</a>
</article>
</section>
</main>Теперь самостоятельно
Практика
Спроектируйте карточку второго тома: название, уровень, результат и основной переход. Удалите фразы, которые не помогают понять выбор.
Результат: Текст карточки и схема заголовков страницы.
Подсказка
- «Лучшее решение для всех» не описывает учебный результат.
Решение и проверка
Подходящий результат: «Напишете и проверите локальный калькулятор корзины». Он конкретнее обещания «станете профессионалом». Уровень — начальный, если предварительно объяснено требование уметь запускать Python.
Карточка использует заголовок третьего уровня внутри раздела второго уровня. Основной переход ведёт к содержанию именно этого тома. Не назначайте карточке роль кнопки, если она выполняет обычную навигацию по адресу.
Проверьте себя без текста
Когда использовать ссылку?
Когда действие означает переход к другому адресу или месту документа.
Почему размер шрифта не определяет уровень заголовка?
Уровень выражает смысловую вложенность, а размер относится к оформлению.
Проверить по первоисточникам
Конец образца
Полный том содержит 18 глав, решения, итоговый проект и словарь. Продажи откроются после предметной редактуры и подключения магазина.