HTML5 Layouts Overview Tutorial

.

HTML Layouts

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

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

2.HTML Layout Techniques

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

2a. HTML tables
2b. CSS float property
2c. CSS framework
2d. CSS flexbox

3. Which One to Choose?

3a. 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!

3b. CSS Frameworks

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

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

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

.
201410