Элементы и методы разметки HTML

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

HTML-элементы макета

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

<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element

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

Методы разметки HTML

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

• CSS-фреймворк
• Плавающее свойство CSS
• CSS флексбокс
• CSS-сетка

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

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

Плавающий макет CSS

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

Макет CSS Flexbox

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

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

Макет сетки CSS

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

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