Learn HTML #37

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:

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

Leave a Reply

Your email address will not be published. Required fields are marked *