Начинайте с содержания и отношений
Представьте страницу выставки: название, краткое описание, расписание и правила посещения. Эти части связаны смыслом, а не только расстоянием между ними. HTML помогает обозначить структуру: где находится заголовок, где абзац, где перечень или самостоятельный материал. Если все элементы оформлены как одинаковые безымянные блоки, важные отношения могут существовать лишь в голове дизайнера. Полезный вопрос перед выбором элемента звучит так: какую роль выполняет этот фрагмент, если убрать цвет, размер и декоративные линии?
Уровень заголовка не является размером шрифта
Заголовки образуют иерархию. Разделы одного уровня должны быть сопоставимы по смыслу, а подразделы раскрывать соответствующий раздел. Выбирать уровень только ради стандартного внешнего размера неудобно: это смешивает структуру и оформление. Размер, отступы и цвет можно изменить средствами CSS, сохранив логическую роль. Проверьте страницу по одному списку заголовков. Если из него неясно, о чём материал и как части вложены друг в друга, стоит уточнить названия или организацию содержания до косметических правок.
Выбирайте форму списка по задаче
Перечень материалов и последовательность действий устроены по-разному. В первом случае перестановка пунктов обычно не меняет смысл, во втором порядок может быть существенным. Для связанных терминов и пояснений существует ещё один тип структуры. Такой выбор помогает читателю понимать отношения между частями. Не стоит вручную добавлять символы и пробелы, чтобы лишь изобразить нужный вид. В учебном примере сначала сформулируйте, что объединяет пункты, затем выберите подходящий способ разметки. Декоративное оформление должно поддерживать уже обозначенную связь.
Проверяйте структуру и внешний вид отдельно
CSS управляет представлением, но удачная картинка не подтверждает правильность всей страницы. Посмотрите на содержание без авторского оформления, проверьте логический порядок чтения и понятность названий. Затем оцените поведение при изменении ширины окна и увеличении текста. Автоматическая проверка разметки полезна, однако не способна полностью решить, удачно ли сформулирован заголовок и понятен ли материал человеку. Для старых учебных примеров отдельно сверяйте используемые приёмы с актуальной документацией. Дата примера сама по себе не делает все его решения ошибочными или подходящими сегодня.
Попробуйте на практике
Спроектируйте структуру вымышленной страницы небольшой выставки на бумаге, без написания кода.
- Запишите название выставки, вводный абзац, расписание, правила посещения и краткий словарь двух терминов.
- Назначьте каждому фрагменту смысловую роль и расположите его в понятном порядке чтения.
- Составьте отдельный список заголовков с уровнями. Проверьте, какие разделы равноправны и где действительно нужен подраздел.
- На втором листе опишите оформление: размеры, отступы и цвета. Убедитесь, что изменение этих свойств не меняет смысловых ролей.
Как проверить результат. Схема остаётся понятной без визуальных украшений. Заголовки образуют осмысленную иерархию, разные перечни выбраны по отношениям между пунктами, а оформление описано отдельно.
Частые вопросы
Если текст крупный и жирный, почему этого недостаточно?
Внешний вид помогает зрительному восприятию, но не обязательно обозначает программно доступную роль. Смысловую структуру нужно задавать соответствующей разметкой.
Правильная разметка автоматически делает сайт полностью доступным?
Нет. Она является основой, но также важны взаимодействие, понятность, контраст, работа с клавиатуры и другие свойства конкретной страницы.
Самостоятельный разбор темы. Содержание конкретной обучающей программы здесь не представлено.