Шаблоны макетов HTML

Макет страницы — это способ расположения основных областей страницы на экране: баннера, навигации, основного контента, боковой панели и подвала. В этой главе показано, как создать макет современным способом: разметить области с помощью семантических элементов HTML5, а затем расположить их с помощью CSS Flexbox или CSS Grid. По завершении вы сможете самостоятельно собрать адаптивную многоколоночную страницу с нуля.

Структура типичной страницы

Почти каждый сайт строится из одних и тех же пяти строительных блоков:

Область	Назначение	Элемент
Шапка	Логотип, название сайта, баннер	`<header>`
Навигация	Главное меню / ссылки	`<nav>`
Основной контент	Уникальное содержимое страницы	`<main>`
Боковая панель	Связанные ссылки, реклама, «дополнительное»	`<aside>`
Подвал	Авторские права, контакты, дополнительные ссылки	`<footer>`

До HTML5 все эти области записывались как универсальные элементы <div> с атрибутами id или class, например <div id="header">. Это по-прежнему работает, но лишено смысла: браузер, программа чтения с экрана или поисковый робот не могут отличить баннер от подвала. Семантические элементы выше описывают, чем является каждая область, что улучшает доступность и SEO без лишних усилий. Полный список приведён в разделе Семантические элементы в HTML5.

Семантический каркас страницы

Начните с разметки до добавления какого-либо CSS для макета. Используйте каждый ориентирный элемент один раз там, где он естественно подходит:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My page</title>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
      <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </nav>
    </header>

    <main>
      <h2>Welcome</h2>
      <p>This is the primary content of the page.</p>
    </main>

    <aside>
      <h2>Related</h2>
      <p>Links, ads, or extra information go here.</p>
    </aside>

    <footer>
      <p>&copy; 2024 My Website</p>
    </footer>
  </body>
</html>

Несколько правил, которые стоит запомнить:

На странице должен быть только один <main>, и он не должен быть вложен внутрь <header>, <nav>, <aside> или <footer>.
<nav> предназначен для основных навигационных блоков, а не для любой группы ссылок.
<aside> — это контент, косвенно связанный с основным; он работает как внутри <main>, так и рядом с ним.

Этот каркас пока не имеет колонок — всё располагается вертикально. Создание колонок из этих блоков — задача CSS, которую мы добавим далее.

Двухколоночный макет с Flexbox

CSS Flexbox располагает элементы вдоль одной оси — строки или столбца — и идеально подходит для размещения контента рядом с боковой панелью. Оберните <main> и <aside> в flex-контейнер: display: flex поставит их рядом, а свойство flex управляет распределением свободного пространства.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Flexbox two-column layout</title>
    <style>
      body {
        margin: 0;
        font-family: Arial, sans-serif;
      }
      header, footer {
        background: #2c3e50;
        color: #fff;
        padding: 16px;
      }
      .container {
        display: flex;
        gap: 16px;
        padding: 16px;
      }
      main {
        flex: 3;            /* main takes 3 shares of the space */
        background: #ecf0f1;
        padding: 16px;
      }
      aside {
        flex: 1;            /* sidebar takes 1 share */
        background: #dfe6e9;
        padding: 16px;
      }
    </style>
  </head>
  <body>
    <header><h1>My Website</h1></header>
    <div class="container">
      <main>
        <h2>Main content</h2>
        <p>This column grows to fill most of the width.</p>
      </main>
      <aside>
        <h2>Sidebar</h2>
        <p>A narrower second column.</p>
      </aside>
    </div>
    <footer><p>&copy; 2024 My Website</p></footer>
  </body>
</html>

flex: 3 и flex: 1 делят доступную ширину между двумя колонками в соотношении 3 к 1. Поскольку это пропорции, колонки остаются гибкими: они уменьшаются и увеличиваются вместе с viewport вместо того, чтобы занимать фиксированное число пикселей. Чтобы сложить их в стопку на маленьких экранах, оберните правило в медиазапрос:

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Полный макет с CSS Grid

CSS Grid располагает элементы в двух измерениях — по строкам и по столбцам одновременно — что делает его лучшим инструментом для макета всей страницы. С помощью grid-template-areas можно нарисовать макет в виде обычного текста и назначить каждому элементу именованную область:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>CSS Grid page layout</title>
    <style>
      body {
        margin: 0;
        font-family: Arial, sans-serif;
      }
      .grid {
        display: grid;
        grid-template-columns: 1fr 3fr;   /* sidebar : content */
        grid-template-areas:
          "header header"
          "nav    main"
          "footer footer";
        gap: 12px;
        padding: 12px;
      }
      header { grid-area: header; background: #2c3e50; color: #fff; }
      nav    { grid-area: nav;    background: #dfe6e9; }
      main   { grid-area: main;   background: #ecf0f1; }
      footer { grid-area: footer; background: #2c3e50; color: #fff; }
      header, nav, main, footer { padding: 16px; }
    </style>
  </head>
  <body>
    <div class="grid">
      <header><h1>My Website</h1></header>
      <nav>Navigation</nav>
      <main>
        <h2>Main content</h2>
        <p>The header and footer span both columns.</p>
      </main>
      <footer><p>&copy; 2024 My Website</p></footer>
    </div>
  </body>
</html>

Единица fr означает «долю свободного пространства», поэтому 1fr 3fr делает колонку контента втрое шире боковой панели — снова гибкое соотношение, а не фиксированная ширина. Визуальная карта в grid-template-areas позволяет шапке и подвалу охватывать обе колонки, просто повторяя их имена в строке.

Flexbox или Grid — что выбрать?

Оба подхода современны, хорошо поддерживаются и нередко взаимозаменяемы, однако у каждого есть своя естественная область применения:

Используйте Flexbox, когда располагаете элементы в одном направлении — панель навигации, панель инструментов, ряд карточек или основной контент рядом с боковой панелью.
Используйте Grid, когда нужны строки и столбцы одновременно — например, макет всей страницы (шапка / боковая панель / контент / подвал) или галерея изображений.

Распространённый надёжный подход — использовать Grid для общего каркаса страницы, а Flexbox — для небольших компонентов внутри каждой области.

Фиксированные и гибкие макеты

Приведённые выше примеры являются гибкими (fluid): ширина задаётся в виде соотношений (flex: 3, 3fr) или процентов, поэтому макет растягивается на любой экран. Это основа адаптивного дизайна.

Фиксированный макет привязывает области к точному значению в пикселях, например width: 960px или flex: 0 0 240px для боковой панели. Фиксированная ширина даёт точный контроль, но не адаптируется: на узком телефоне возникает горизонтальная прокрутка, а на широком мониторе остаётся пустое место. На практике большинство сайтов сочетают оба подхода: фиксированная боковая панель рядом с гибкой колонкой контента, часто ограниченной через max-width, чтобы очень широкие экраны оставались удобочитаемыми.

Информация

Старый подход к многоколоночным макетам использовал свойство CSS float вместе с отрицательными значениями margin. Эта техника сейчас считается устаревшей — она ненадёжна и трудна в сопровождении. Для создания макетов используйте Flexbox или Grid; float сегодня применяется главным образом для обтекания текстом изображения.

Готовые шаблоны макетов

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

Эти шаблоны созданы с использованием устаревшей техники CSS float и отрицательных значений margin. Вы можете изучить их для вдохновения, но для новых проектов лучше использовать Flexbox или Grid — результат будет проще в сопровождении и адаптивным из коробки.

Настройка шаблона

Выбрав понравившуюся структуру, вы можете доработать её следующими способами:

Замените текст-заглушку и добавьте собственные изображения.
Скорректируйте семантическую разметку в соответствии с вашим контентом.
Углубите знания разметки с помощью нашего учебника HTML.
Измените стиль макета с помощью нашего учебника CSS.
Добавьте интерактивность с помощью нашего учебника JavaScript.

Практика

Какие семантические элементы HTML5 обычно используются для построения макета страницы?

Практика

Какой метод CSS лучше всего подходит для двумерного макета страницы со строками и столбцами?

CSS GridCSS float с отрицательными отступамиТаблицы HTMLТег <center>