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

Semantic Elements

New Elements

Browser Support
Page structure
Concept map →
Terms

HTML Tables

An HTML table is defined with the <table> tag..

HTML

Describes the structure of Web pages using markup.

HTML Documents

Must start with a document type declaration: <!DOCTYPE html>. The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>.

<details>

Defines additional details.

Semantic Elements

Are elements with a meaning. Clearly describes its meaning to both the browser and the developer. Are supported in all modern browsers..

HTML Layout Elements

Semantic elements that define the different parts of a web page (since HTML5).

<header>

Defines a header for a document or a section. Should be used as a container for introductory content.. You can have several <header> elements in one document..

<nav>

Defines a container for navigation links. Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links..

<section>

Defines a section in a document. According to W3C's HTML5 documentation: "A section is a thematic grouping of content, typically with a heading.".

<article>

Defines an independent self-contained article. An article should make sense on its own, and it should be possible to read it independently from the rest of the web site.. Examples of where an <article> element can be used: forum post, blog post, newspaper article.

<aside>

Defines content aside from the content (like a sidebar).

<footer>

Defines a footer for a document or a section. Should contain information about its containing element. Typically contains the author of the document, copyright information, links to terms of use, contact information, etc.. You may have several <footer> elements in one document.

<summary>

Defines a heading for the <details> element.

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..

CSS Flexbox

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..

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..

CSS Frameworks

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

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.

HTML5