Layouts

Domains: HTML

HTML Layout Elements

Websites often display content in multiple columns (like a magazine or newspaper).

HTML5 offers new semantic elements that define the different parts of a web page:

HTML Layout Techniques

There are five different ways to create multicolumn layouts. Each way has its pros and cons:

  • HTML tables (not recommended)
  • CSS float property
  • CSS flexbox
  • CSS framework
  • CSS grid

Which One to Choose?

HTML Tables

The <table> element was not designed to be a layout tool! The purpose of the <table> element is to display tabular data. So, do not use tables for your page layout! They will bring a mess into your code. And imagine how hard it will be to redesign your site after a couple of months.

Tip: Do NOT use tables for your page layout!

CSS Frameworks

If you want to create your layout fast, you can use a framework, like W3.CSS or Bootstrap.

CSS Floats

It is common to do entire web layouts using the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work. Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility. Learn more about float in our CSS Float and Clear chapter.

CSS Flexbox

Flexbox is a new layout mode in CSS3.

Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices. Disadvantages: Does not work in IE10 and earlier.

Learn more about flexbox in our CSS Flexbox chapter.

CSS Grid View

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Disadvantages: Does not work in IE nor in Edge 15 and earlier.

Learn more about CSS grids in our CSS Grid View chapter.

Similar pages

Page structure
Terms

HTML Tables

HTML

HTML Documents

<details>

Semantic Elements

HTML Layout Elements

<header>

<nav>

<section>

<article>

<aside>

<footer>

<summary>

CSS Grid View

CSS Flexbox

CSS Floats

CSS Frameworks

HTML Tables

HTML5