---
title: Layouts
localeTitle: Макеты
---
## Макеты
Макеты организуют различные области веб-страницы.
Почти каждая веб-страница, которую мы видим, можно разделить на поля, которые можно упорядочить в определенном порядке для создания этой веб-страницы. Ниже приведен один из примеров.
![Пример дизайна сайта - www.codementor.io](http://i.imgur.com/Z1DSMYC.png)
> Веб-сайты часто отображают контент в нескольких столбцах (например, в журнале или в газете).
И методы компоновки HTML помогают нам помещать необходимую информацию в нужный заказ или дизайн.
### Методы реализации макетов
#### Таблицы HTML
Один из самых простых инструментов для реализации макетов на веб-странице, это обеспечивается HTML. Но по мере того, как макет становится сложным, таблицы HTML быстро теряют свою легкость из-за увеличения текста разметки.
#### CSS Float
Если вы хотите создать страницу с двумя столбцами с левой навигационной панелью и центральной областью просмотра контента, ее легко сделать с помощью CSS-поплавков. Просто установите левую навигационную страницу в `
` со свойством style `float: left;` , И ты получишь этот дизайн. Но что, если у вас было 4 столбца в одном разделе. Конечно, можно сделать это с помощью float, но синтаксис HTML, который вы написали, будет легко понять.
#### Шаблоны CSS
Здесь появляются CSS-фреймы, такие как [Bootstrap](http://getbootstrap.com/) и [Materialize](http://materializecss.com/) . Эти структуры обеспечивают функциональность сетки, которая позволяет разделить каждый раздел вашей веб-страницы на 12 столбцов, которые вы можете заказать для проектирования.
![Пример сетки](http://blog.gridbox.io/wp-content/uploads/2018/01/download-1-1024x271.png)
> Пример загрузочной сетки
### HTML-семантические элементы
Веб-сайты часто отображают контент в нескольких столбцах (например, в журнале или в газете).
HTML5 предлагает новые семантические элементы, которые определяют разные части веб-страницы:
```
- Defines a header for a document or a section