Метаданные и служебные элементы урока

Метаданные помогают понять, подходит ли урок текущей задаче. Уровень подготовки, используемая версия инструмента или дата содержательной проверки могут быть полезнее декоративного значка рядом с названием. Но такие сведения должны иметь основание: аккуратная строка не делает придуманную дату обновления фактом.

В reading-lab уже показаны две записи: уровень и статус учебного макета. В этом уроке вы оформите служебную область и определите правила её заполнения. Продолжайте состояние десятого урока; название, введение и основные разделы остаются без изменений.

Сведения для выбора материала

Уровень подготовки сообщает, какие знания предполагаются. Формулировка «Основы HTML и CSS» в нашем макете конкретнее, чем общая метка «Для всех». Читатель понимает, почему в тексте встречаются селекторы и свойства без подробного введения в синтаксис. Если предпосылки меняются, их нужно уточнить в содержании и метаданных согласованно.

Статус «Учебный макет» предотвращает неверное ожидание. Перед читателем предоставленный образец разметки, а не опубликованный итог реального редизайна. Эта запись не относится к качеству языка или полезности примера. Она сообщает происхождение материала и границу его применения. Не нужно делать её тревожным предупреждением, но скрывать тоже нельзя.

Авторство полезно только при реальных данных. Нельзя поставить вымышленное имя ради законченной карточки, а затем воспринимать её как редакционный факт. Если материал подготовлен коллективно и ещё не назначен ответственный, это остаётся вопросом процесса. Дизайн должен допускать отсутствие поля, не оставляя пустую строку с декоративным аватаром.

Дата создания и дата проверки содержания также различаются. Изменение отступа в CSS не означает, что примеры статьи стали актуальны для новой версии платформы. Поэтому подпись «Обновлено» должна иметь редакционное определение. В архиве ProfessorWeb особенно важно не выдавать исторический пример Silverlight или старого .NET за недавно перепроверенный современный материал только из-за новой оболочки.

Компактная информационная строка

Второй урок уже собрал список определений в гибкую строку. Теперь уточним её пространство и связь с введением. Следующий листинг — полный файл lesson-11.css:

.reading-lab .lab-meta { margin-block-start: 1.25rem; gap: .5rem 1.5rem; }
.reading-lab .lab-meta div { max-width: 100%; }
.reading-lab .lab-meta dt { font-weight: 400; }
.reading-lab .lab-meta dd { color: var(--lab-ink); }
.reading-lab .lab-meta dt::after { content: ": "; }
.reading-lab .lab-heading .lab-lead { max-width: 58ch; }

Ожидается, что значения будут немного заметнее подписей. Человек сначала различит конкретное условие, затем его роль. Размер остаётся умеренным и не конкурирует с введением. Мы не превращаем каждую запись в отдельную капсулу: две короткие группы и так имеют ясную связь благодаря расстояниям и словам.

Поля не получают фиксированную ширину. Значение уровня может стать длиннее, например «Основы HTML, CSS и чтения готовой разметки». Оно переносится вместе с доступным пространством. Если ради ровного ряда вы примените обрезание с многоточием, исчезнет как раз информация, которая помогает оценить предпосылки. Для служебной строки такое сокращение требует отдельного обоснования.

Разделитель в dt::after добавляет двоеточие как оформление уже существующей подписи. Смысловые слова находятся в HTML, а не создаются псевдоэлементом. Это важно для сопровождения: редактор меняет настоящую подпись, и она остаётся в документе независимо от CSS. Не храните названия полей только в декоративных правилах.

Время чтения и ложная точность

Предположим, вы хотите указать время чтения. Оно может быть приблизительной оценкой по объёму текста, но технический урок включает остановки, изучение кода и выполнение упражнений. Чтение страницы и освоение задачи имеют разную длительность. Поэтому подпись «Освоите за восемь минут» нельзя получить из простого числа слов.

Если редакция всё же использует оценку чтения, обозначьте её характер и правила вычисления. Например, учитывается только объясняющий текст, а примеры и практика не включаются. Конкретное число в нашем макете не добавляем: оно не было вычислено и проверено. Пустое поле не требуется, потому что интерфейс не обязан обещать длительность.

Сравните два будущих материала одинакового объёма. Один объясняет расположение элементов, другой содержит сложный запрос с несколькими условиями. Даже при одинаковом числе слов усилие чтения будет разным. Поэтому дизайн такой метрики должен избегать слишком уверенного вида, например таймера обратного отсчёта или значка гарантии.

Рейтинги, число просмотров и процент завершения тоже требуют реального источника. Импортированная историческая оценка может иметь собственное происхождение, но новый шаблон не должен создавать свежую статистику из воздуха. Если этих данных нет, композиция должна оставаться законченной без них. Это более устойчивый подход, чем заполнение каждой пустой области произвольной цифрой.

Версия и границы актуальности

Техническая статья часто зависит от версии. Полезно показывать её рядом с уровнем, когда от неё меняются команды, интерфейс или результаты. Но версия инструмента не должна дублироваться в десяти местах с разными значениями. Назначьте один редакционный источник и используйте его согласованно в названии, вводном объяснении и служебных сведениях.

Для макета новой записи можно добавить ещё один div в существующий dl.lab-meta. Это пример формы поля; значение должно соответствовать вашей статье:

<div><dt>Среда примера</dt><dd>Готовая разметка HTML и CSS</dd></div>

Здесь нет номера браузера, который мы якобы использовали. Формулировка описывает действительное устройство предоставленного примера. Если позже вы выполните проверку в конкретной среде, её сведения относятся к отчёту о проверке, а не автоматически становятся универсальной предпосылкой урока.

Не перегружайте шапку всей историей сопровождения. Если изменения важны, отдельная короткая заметка внутри материала объяснит, что именно обновлено. Длинный журнал правок рядом с названием заставляет нового читателя сначала изучать редакционный процесс. На странице урока служебная область должна помогать выбору, а не заменять основное объяснение.

Проверьте вариант с отсутствующей датой и вариант с более длинным уровнем подготовки. Ожидайте, что заголовок, введение и начало текста сохранят связную композицию. Если без четырёх обязательных метрик шапка кажется пустой, вернитесь к иерархии второго урока: её основу должны составлять тема и смысл, а не счётчики.

Теперь информационная область работает с реальными сведениями и допускает неполный набор. Вы не обязаны изобретать данные для красивого ряда. В следующем уроке разделим два других вида окружения: место статьи в каталоге и последовательный переход между уроками.