HTML Верстка веб-страницы

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

Пример

Лондон

Лондон — столица Англии. Это самый густонаселенный город Великобритании, с метрополитенской зоной, насчитывающей более 13 миллионов жителей.

Расположенный на реке Темза, Лондон был крупным поселением на протяжении двух тысячелетий, его история восходит к основанию римлянами, которые назвали его Лондиниум.

Элементы верстки HTML

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

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

Подробнее о семантических элементах можно прочитать в главе HTML Семантические элементы.

Техники верстки HTML

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

CSS-фреймворки
CSS свойство float
CSS flexbox
CSS grid

CSS-фреймворки

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

Верстка с использованием CSS свойства float

Можно создавать целые веб-макеты с помощью плавающих элементов, которые создаются CSS свойством float. Этот метод прост в освоении — нужно только запомнить, как работают свойства float и clear.

Недостатки: Плавающие элементы привязаны к потоку документа, что может снижать гибкость.

Верстка с использованием CSS Flexbox

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

Верстка с использованием CSS Grid

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