Структура сайта: заголовки, разделы и навигация

Начните с плана, а не с оформления

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

Один h1 называет страницу. Крупные разделы получают h2. Если внутри раздела появляется самостоятельная подтема, используйте h3. Размер заголовка потом зададим CSS; сейчас важен порядок мыслей.

Разделите повторяющиеся и уникальные части

Шапка header может содержать название и меню. В main находится основное содержимое текущей страницы. Footer оставьте для краткой информации о проекте. Не усложняйте документ обёртками, если они пока не решают задачу.

<header>
  <nav aria-label="Основное меню">
    <a href="#about">О проекте</a>
    <a href="#topics">Темы</a>
  </nav>
</header>
<main>
  <h1>Мой учебный сайт</h1>
  <section id="about"><h2>О проекте</h2><p>Изучаю веб.</p></section>
  <section id="topics"><h2>Темы</h2><p>HTML и CSS.</p></section>
</main>
<footer>Учебный проект</footer>

Проверьте навигацию

Идентификаторы id уникальны. Ссылка с href=»#topics» должна вести к одному конкретному разделу. Для перехода на соседнюю страницу понадобится путь, например about.html. Если ссылка не работает, сравните написание цели и адреса посимвольно.

Не превращайте всё меню в кликабельный div. Настоящие ссылки уже поддерживают клавиатуру и стандартные действия браузера. Пройдите все пункты клавишей Tab и активируйте Enter.

Самостоятельное задание

Добавьте раздел «Что уже готово» со списком трёх пунктов. Затем прочитайте только заголовки: без абзацев всё ещё должен быть понятен план страницы. Справочные материалы: main, section и nav. Следующий урок — первые стили.