HTML Layout
Websites often display content in multiple columns (like a magazine or newspaper).
HTML Layout Elements
HTML has several semantic elements that define the different parts of a web page:
<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
HTML Layout Techniques
There are four different ways to create multicolumn layouts. Each way has its pros and cons:
- CSS framework (like Tailwind or Bootstrap)
- CSS float property (the old way)
- CSS flexbox
- CSS grid
CSS Flexbox
Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.
Flexbox Layout Example
Result