HTML Layout Elements | HTML Layout Tags | how to create HTML web page layout | what is html layout

HTML Layout Elements:
An HTML layout is a blueprint used to arrange web pages in a well-defined manner. It is easy to navigate, simple to understand, and uses HTML tags to customize web design elements. ... Additionally, because HTML layouts are typically responsive by default, they will also be properly formatted for mobile devices
HTML Layout Tags | how to create HTML web page layout | what is HTML layout

where we are using the HTML layout elements?.
how to use the HTML layout HTML elements?.
what is the HTML layout and elements?.
how to get layout elements?.
what are the HTML layout elements?.

A webpage layout is very important to give better look to your website. It takes considerable time to design a website's layout with a great look and feel.

Now-a-days, all modern websites are using CSS and JavaScript based framework to come up with responsive and dynamic websites but you can create a good layout using simple HTML tables or division tags in combination with other formatting tags. This chapter will give you few examples on how to create a simple but working layout for your webpage using pure HTML and its attributes.

HTML Layout - Using Tables
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.

Example
For example, the following HTML layout example is achieved using a table with 3 rows and 2 columns but the header and footer column spans both columns using the colspan attribute

Multiple Columns Layout - Using Tables

Example
Here is an example to create three column layout −

HTML Layouts - Using DIV, SPAN
The div element is a block level element used for grouping HTML elements. While the div tag is a block-level element, the HTML span element is used for grouping elements at an inline level.

Although we can achieve pretty nice layouts with HTML tables, but tables weren't really designed as a layout tool. Tables are more suited to presenting tabular data.

Note − This example makes use of Cascading Style Sheet (CSS), so before understanding this example you need to have a better understanding on how CSS works.

Example
Here we will try to achieve same result using div tag along with CSS, whatever you have achieved using table tag in previous example.