HTML Макеты

Веб‑сайты часто отображают содержимое в нескольких колонках (как, например, в журнале или газете).

HTML Элементы макета

Веб‑сайты часто отображают контент в нескольких столбцах (например, журнал или газета).

HTML предлагает несколько семантических элементов, которые определяют разные части веб‑страницы:

<header> - Определяет заголовок для документа или раздела
<nav> - Определяет контейнер для навигационных ссылок
<section> - Определяет раздел в документе
<article> - Определяет независимую автономную статью
<aside> - Определяет контент помимо основного содержимого (например, боковую панель)
<footer> - Определяет нижний колонтитул (footer) для документа или раздела
<details> - Определяет дополнительные детали
<summary> - Определяет заголовок для элемента <details>

<header> - Определяет заголовок для документа или раздела <nav> - Определяет контейнер для навигационных ссылок <section> - Определяет раздел в документе <article> - Определяет независимую автономную статью <aside> - Определяет контент помимо основного содержимого (например, боковую панель) <footer> - Определяет нижний колонтитул (footer) для документа или раздела <details> - Определяет дополнительные детали <summary> - Определяет заголовок для элемента <details> Подробнее о семантических элементах вы можете узнать в главе HTML Семантика на нашем сайте W3Schools на русском.

HTML Методы размещения

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

• HTML таблицы (не рекомендуется)
• CSS свойство float (обтекание)
• CSS flexbox (флексбокс)
• CSS framework (фреймворк)
• CSS grid (сетка)

Что выбрать?

HTML Таблицы

Элемент <table> не был разработан как инструмент для макета! Назначение элемента <table> — отображение табличных данных. Поэтому не используйте таблицы для макета своей страницы! Они внесут беспорядок в ваш код. И представьте, как сложно будет изменить дизайн вашего сайта через пару месяцев.

CSS фреймворки

Если вы хотите быстро создать макет, вы можете использовать фреймворк, например W3.CSS или Bootstrap.

CSS Float (обтекание)

Распространённая практика — создавать целые веб‑макеты, используя свойство CSS float. Float прост в освоении — вам просто нужно помнить, как работают свойства float и clear. Недостатки: Плавающие элементы привязаны к потоку документа, что может ухудшить гибкость. Подробнее о float читайте в разделе CSS Float и Clear.

CSS Flexbox (флексбокс)

Flexbox — новый режим макета в CSS3.

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

Узнайте больше о flexbox в разделе CSS Flexbox на нашем сайте W3Schools українською.

CSS Grid. Вид сетки

Модуль CSS Grid Layout предлагает систему макетов на основе сетки с рядами и столбцами, что упрощает разработку веб‑страниц без использования обтекания и позиционирования.

Недостатки: Не работает ни в IE, ни в Edge 15 и более ранних версиях.

Узнайте больше о CSS‑сетках в разделе CSS Grid Вид сетки на нашем сайте W3Schools на русском.