HTML – Layout Elements and Techniques

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

 

See the Pen
HTML – Layout Elements and Techniques by Iampsp.com (@iampsp)
on CodePen.


HTML Layout Elements

HTML has 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 set of navigation links
  • <section> – Defines a section in a document
  • <article> – Defines independent, self-contained content
  • <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

 

HTML Layout Techniques

There are four different techniques to create multicolumn layouts. Each technique 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 CSS framework, like 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.

 

See the Pen
CSS Template by Iampsp.com (@iampsp)
on CodePen.

CSS Flexbox Layout

Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

 

See the Pen
CSS Flexbox Layout by Iampsp.com (@iampsp)
on CodePen.

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.