Please note, this is a STATIC archive of website www.w3schools.com from 05 May 2020, cach3.com does not collect or store any user information, there is no "phishing" involved.
THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML Layout Elements and Techniques


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


Example

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer

Try it Yourself »

HTML Layout Elements

HTML offers several semantic elements that define the different parts of a web page:

HTML5 Semantic Elements
<header> - Defines a header for a document or a section
<nav> - Defines a container for navigation links
<section> - Defines a section in a document
<article> - Defines an independent self-contained article
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details
<summary> - Defines a heading for the <details> element
HTML5 Semantic Elements
  • <header> - Defines a header for a document or a section
  • <nav> - Defines a container for navigation links
  • <section> - Defines a section in a document
  • <article> - Defines an independent self-contained article
  • <aside> - Defines content aside from the content (like a sidebar)
  • <footer> - Defines a footer for a document or a section
  • <details> - Defines additional details
  • <summary> - Defines a heading for the <details> element

You can read more about semantic elements in our HTML Semantics chapter.


HTML Layout Techniques

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

  • CSS framework
  • CSS float property
  • CSS flexbox
  • CSS grid


CSS Frameworks

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


CSS Float Layout

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.

Example

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer

Try it Yourself »

CSS Flexbox Layout

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.

Learn more about flexbox in our CSS Flexbox chapter.

Example

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer

Try it Yourself »

CSS Grid Layout

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.

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