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

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

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

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

Методы верстки HTML

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

• CSS framework
• CSS float property
• CSS flexbox
• CSS grid

CSS Frameworks

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

CSS Float макет

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

CSS Flexbox макет

Flexbox - это новый режим компоновки в CSS3.

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

Узнайте больше о flexbox в разделе CSS Flexbox.

CSS Grid макет

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

Узнайте больше о grids в разделе CSS Grid.