Разделяйте содержание и оформление
HTML задаёт структуру и значение элементов документа. CSS управляет их внешним представлением, а JavaScript может добавлять поведение. Границы этих задач не означают, что технологии существуют отдельно: они взаимодействуют, но решение начать с понятного содержания упрощает дальнейшую работу. Представим страницу небольшой мастерской. Посетителю нужны название услуги, условия приёма, адрес и способ задать вопрос. Сначала запишите эти части обычным текстом. Затем определите, какие из них являются заголовками, абзацами, списком или формой. Если содержание непонятно в таком виде, декоративные рамки и анимация вряд ли исправят его логику.
Заголовок показывает место в документе
Элементы h1–h6 обозначают уровни заголовков. Уровень выбирают по вложенности раздела, а размер букв настраивают отдельно. Для простой страницы удобно начать с одного основного заголовка h1, крупные разделы обозначить h2, а их подразделы при необходимости оформить как h3. Так, после общего названия ремонта могут идти разделы о работах, сроках и контактах. Внутри работ появляются отдельные подразделы о стульях и столах. Не нужно выбирать h4 только потому, что его стандартный размер кажется подходящим. Последовательность заголовков должна пересказывать устройство страницы даже без остальных абзацев.
Выбирайте элемент по действию
Ссылка предназначена для перехода к другому адресу или месту документа. Кнопка запускает действие, например отправку формы. Обычный текстовый блок с обработчиком щелчка не получает автоматически все свойства настоящей кнопки: клавиатурное взаимодействие и доступное название придётся обеспечивать отдельно. Для областей страницы тоже существуют смысловые элементы. Main обозначает основное содержание, nav служит для навигационного раздела. Универсальный div остаётся полезным контейнером, когда специальное значение не требуется. Принцип состоит не в максимальном количестве специальных названий, а в точном соответствии разметки назначению содержимого.
Подпись поля должна сохраняться
Полю формы нужна понятная видимая подпись. Элемент label можно связать с полем через совпадающие значения for и id. Подсказка внутри пустого поля не заменяет подпись: после ввода текста она исчезает, а человеку всё ещё нужно понимать, что он заполняет. Например, вместо неопределённого поля Введите данные лучше прямо назвать ожидаемое значение: имя или адрес электронной почты. Ограничения и обязательность объясняют рядом. Проверка в браузере помогает заметить ошибку, но не заменяет проверку данных на сервере. Структурная корректность также не гарантирует полную доступность: готовую страницу проверяют клавиатурой и подходящими средствами тестирования.
Попробуйте на практике
Спроектируйте на бумаге структуру учебной страницы мастерской, не создавая работающую форму и не отправляя данные.
- Запишите название страницы, три основных раздела и два подраздела внутри одного из них.
- Назначьте каждому заголовку уровень и прочитайте только их последовательность.
- Обозначьте основное содержание и навигацию, объяснив назначение каждой области.
- Добавьте предполагаемую ссылку на адрес мастерской и кнопку отправки вопроса, указав различие их функций.
- Для двух вымышленных полей запишите видимые подписи и пары значений for и id, затем проверьте их совпадение.
Как проверить результат. По заголовкам понятна структура, ссылка ведёт к адресу, кнопка обозначает действие, а назначение каждого поля известно без исчезающей подсказки.
Частые вопросы
Можно ли построить всё на div?
Технически это возможно, но многие полезные свойства придётся воссоздавать вручную. Подходящий стандартный элемент обычно даёт более ясную основу.
Достаточно ли проверить страницу глазами?
Нет. Внешний вид не показывает всю структуру и поведение элементов. Нужны также проверка разметки, навигации с клавиатуры и понятности названий.
Самостоятельный разбор темы. Содержание конкретной обучающей программы здесь не представлено.