---

HTML Layout Elements

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

HTML offers 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 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
• <summery> - Defines a heading for the <details> element

---

HTML Layout Techniques

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

• HTML tables (not recommended)
• CSS float property
• CSS flexbox
• CSS framework
• CSS grid

---

HTML Tables

• The <table> element was not designed to be a layout tool.
• The <table> element is usually used to display tabular data.

Note:- Tables are not used for table layout.

---

CSS Frameworks

Framework, like c3.CSS or Bootstrap is used to create fast layout.

CSS Floats

• The CSS float property is commonly used to do entire web layouts.
• Float is easy to learn - just by remembering how the float and clear properties work.
• Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility.

---

CSS Flexbox

• Flexbox is a new layout mode in CSS3.
• The 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.

---

CSS Grid View

• 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.
• Disadvantages: Does not work in IE nor in Edge 15 and earlier.

---