HTML Layout Elements and Techniques

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

HTML Layout Elements

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> – Defines an 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

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.

Apostube

See author's posts