• Web page layout is an essential part of creating well-formed, well-structured, semantically rich websites
• A well-designed, colorful, and neat HTML page helps to establish a good user experience
• Creating a website layout is the activity of positioning the various elements that make a web page in a well-structured manner and give an appealing look to the website
• Creating an HTML Web layout is not difficult at all. All you need to know are a few tags that help in constructing an eye-catching design for a new website
• Advanced website layouts can be achieved using a combination of HTML and CSS
• Most modern websites and blogs consist of an HTML5 Semantic tag-based layout like header, footer, navbar, perhaps another sidebar, the main content area
• HTML has several elements that can be used to define each of these areas. These include the main, header, footer, nav, aside, and article elements.
• Also, the div element is a generic block-level element that can be used for grouping HTML elements to create Web layout

HTML Layout Techniques

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

1. HTML Layout using Tables (not recommended)
   • Use Table, tr, td tag to create a whole layout
   • Table-based layouts are not at all flexible and difficult to manage and modify
2. Layouts using Div and Span (CSS float property)
   • You can use Div - the block level element to create a complete web layout with CSS float property
   • It is a common and widely used technique to create entire web layouts using the CSS float property (float – helps to align block-level elements)
   • Floating elements are tied to the document flow, which may harm the flexibility, and sometimes it’s difficult to manage the whole layout
3. HTML5 Semantic Tags based Layout(CSS float property)
   • You can use HTML5 semantic tags like main, header, nav, section, article, aside, footer, etc. to create a fully functional web layout
   • It is a common and widely used technique to create entire web layouts using the CSS float property (float – helps to align block-level elements)
4. CSS flexbox Layout
   • Flexbox is a new layout mode in CSS3
5. CSS framework
   • Create layout faster and quicker by using a framework like Bootstrap,W3.CSS or so
6. 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.
   • The CSS grid layout is a new layout model optimized for two-dimensional layouts.
   • It’s ideal for website layouts, forms, image galleries, and anything that requires precise and responsive positioning.

Creating Table-based Layout (not recommended)

• The purpose of the <table> element is to display tabular data
• The simplest and most popular way of creating layouts is using HTML <table> tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.
• The <table> element was not designed to be a layout tool! Before the introduction to Div tag, web designers/developers use to follow table-based layout

Note: Do not use tables for your page layout! They will make code length, tedious and brings a mess into your code