HTML LAYOUTS

7 years ago

HTML

A web page layout is crucial to give a better look and feel to your website. In this tutorial, we will learn various tags which HTML5 provides to make look and feel of a website better.

HTML5 offers new 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
<summary> – Defines a heading for the <details> element

layout

We will discuss three techniques to create layouts.

HTML tables
CSS float property
CSS framework

1. HTML 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 utilise these rows and columns in whatever way you like.

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:

<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width="100%" border="0">
  <tr>
    <td colspan="2" bgcolor="#b5dcb3">
      <h1>This is Header </h1>
    </td>
  </tr>
  <tr valign="top">
    <td bgcolor="#aaa" width="50">
      <b>Main Menu</b><br />
      contents<br />
      contents<br />
      contents
    </td>
    <td bgcolor="#eee" width="100" height="200">
       contents
    </td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#b5dcb3">
      <center>
      This is footer
      </center>
    </td>
  </tr>
</table>
</body>
</html>

using tables for layout

Similarly, you can create a layout of your choice.

NOTE:The <table> element although commonly used is not designed to be a layout tool. So, do not use tables for your page layout! They will bring a mess into your code.

2. CSS Frameworks

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

3.CSS Floats

It is common to do entire web layouts using the CSS float property. In this we use the <div> and <span> tags.

We will make a code achieve same result using <div> tag along with CSS, as we got in the previous example using <table>.

<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div style="width:100%">
  <div style="background-color:#b5dcb3; width:100%">
      <h1>This is Header</h1>
  </div>
  <div style="background-color:#aaa; height:200px;width:100px;float:left;">
      <div><b>Main Menu</b></div>
      contents<br />
      contents<br />
      contents
  </div>
  <div style="background-color:#eee; height:200px;width:350px;float:left;">
    <p>contents</p>
  </div>
  
  <div style="background-color:#b5dcb3;clear:both">
  <center>
      This is footer
  </center>
  </div>
</div>
</body>
</html>

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

PS: For any questions, queries, feedback and comments feel free to write us at support@qatechhub.com and amruta@qatechhub.com

About the Author

Saurabh Dhingra

Follow Saurabh Dhingra: