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.

CSS Grid. Вид сетки

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

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

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