HTML Layout

← Previous Next →

HTML layout is advance topic to create a website layout using table. many websites achieved this HTML layout using tables. <div> tag using to create a website layout its easy to manage in compare of table tag using create layout. But still table is good to create a layout structure.

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.

Basic HTML Layout

Before starting to discuss about basic HTML Layout, we recommends you see some below listed HTML Layout patterns.

HTML Layout 1

HTML Layout 2

Layout Explanation

In above images you can see how we can design our own web-page layout because there is not any pre-defined patterns for layout any page. We can assume some common section which are used in maximum page because people are familiar to those section so it is easy way to increase user experience. Let’s know what can be common section in a web page layout.

Header Section

Maximum web page follow this structure to mention logo and navigation (menu), and some other important links like login, social media links etc.

Content Section

This is the section where we provides all our page content like article, company information, product information or it could be anything means we can say that the main content of web-page.

Footer Section

Basically we use footer section to provide terms and condition, copy-right information, address info, other important links or whatever we want to mention in this section.

HTML5 Layout Elements

In HTML4 or other older version there was no concept of <header> , <footer> etc tags but in HTML5 many new tag introduced which are very helpful for designing web page layout. We are listing the important HTML5 tags which uses in constructing HTML Layout.

Websites often display content in multiple columns. HTML5 offers new semantic elements that define the different parts of a web page

HTML Table

The HTML Table element was not designed to be a layout tool! The purpose of the <table> element is to display tabular data. So, do not use tables for your page layout

CSS Float Property

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.

Note : Floating elements are tied to the document flow, which may harm the flexibility.

CSS Flexbox

Flexbox is a new layout mode in CSS3. Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

Note : Does not work in IE10 and earlier.

CSS Frameworks

If you want to create your layout fast, you can use a framework, like Bootstrap.

How To Start

As a fresher we always confused from where to start, here we will tell you the steps how you can start web page layout designing, so let’s begin!

• Start with <div> tag and learn how to define its height and width, try to practice in px unit of length. Define its background colour and border etc.
• Now practice with 3 div, 1st div will act as container for 2nd and 3rd div, means 2nd and 3rd div will be within 1st div. Now provide height and width to 2nd and 3rd div according to 1st div and arrange 2nd and 3rd div side by side using CSS property float.
• Now practice with more div to define your web page structure, practice it again and again.
• There is only a single way to learn it! It is more and more practice so try now it’s your term.

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.

← Previous Next →