Websites often display content in the form of columns (like in newspapers or magazines). HTML5 brings new grammatical elements to define and different parts of the site:

1. define document title or section (section)
2. The set definition contains navigation paths
3. define a part in the document
4. define an independent, self-contained article in itself
5. define content next to another content (like sidebar)
6. Footer definition for text or part
7. Detailed definition added
8. Title definition for element

Layout in HTML Picture 1
How to display on the page of the above elements

HTML page layout technique

There are four ways to create multiple columns in HTML, each with its own strengths and weaknesses.

1. HTML table
2. Floating properties of CSS
3. Framework CSS
4. Flexbox CSS

Which way should I choose to create multiple column layouts in HTML?

Use tables in HTML

Element which is not used for page layout. Its purpose is to display data in tabular form. So do not use the table to create a layout for the page because it will make the code very messy. Imagine a few months later going back to editing the page design and how difficult it would be.

Framework CSS

If you want to create a fast layout, you can use frameworks like Bootstrap .

Floating characteristic (float) of CSS

Designing the entire layout of the site with floating properties (float) in CSS is very common. Float is easy to learn - just remember how it works. But this also has the disadvantage that it attaches to the flow of documents, which can affect the flexibility of the page. Below is an example of CSS floating properties.

Layout in HTML Picture 2
Results display page with the floating properties of CSS

Flexbox CSS

Flexbox is the new layout mode in CSS3.

Using flexbox ensures that the elements work as expected when the page layout must adapt to different screen sizes and devices. But this way has a disadvantage of not working on IE10 and earlier versions.

This is an example of creating a page layout with flexbox.

When resizing an open HTML page, you'll see the page layout change:

Layout in HTML Picture 3

Layout in HTML Picture 4
Page layout with flexbox

Previous article: Head element in HTML

Lesson: Designing websites running on multiple devices (responsive web) in HTML