Sat. Feb 4th, 2023
  • 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

By admin

Leave a Reply

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