HTML Layout Elements and Techniques

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

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.

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>

<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> - Defines a header for a document or a section <nav> - Defines a set of navigation links <section> - Defines a section in a document <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 that the user can open and close on demand <summary> - Defines a heading for the <details> element You can read more about semantic elements in our HTML Semantics chapter.

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

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

? Here you can create your website from scratch or use a template. Get started for free ❯ * no credit card required

You can create 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.

Floating elements are tied to the document flow, which may harm the flexibility. Learn more about float in our

Float and Clear chapter.