HTML Layout

Web page layout is very important to improve the appearance of your website.

A page layout defines the appearance of a website. An HTML layout is a structure that helps the user navigate through web pages easily. It is a way in which you can design web pages using simple HTML tags.


Website Layout

Most websites arrange content into multiple columns (like a magazine or newspaper).

Most websites can use <div> or <table> elements to create multiple columns. CSS is used to position elements, or to create backgrounds and colorful appearances for pages.

lampAlthough we can use HTML table tags to design beautiful layouts, table tags are not recommended as a layout tool – tables are not layout tools.

HTML Layout – Using the <div> Element

The div element is a block-level element used to group HTML elements.

The following example uses five div elements to create a multi-column layout:

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Tutorials for Beginner</title> 
</head>
<body>
 
<div id="container" style="width:500px">
 
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Page Title</h1></div>
 
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content is here</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
copyright © tutorialsbyte.com</div>
 
</div>
 
</body>
</html>

The above HTML code will produce the following result:


HTML Layout – Using Tables

Using HTML <table> tags is an easy way to create layouts.

Most sites can use <div> or <table> elements to create multiple columns. CSS is used to position elements, or to create backgrounds and colorful appearances for pages.

lampEven though HTML tables can be used to create beautiful layouts, tables are designed to present tabular data – tables are not layout tools!.

The following example uses a table with three rows and two columns – the first and last rows span two columns using the colspan attribute:

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Tutorials for Beginner</title> 
</head>
<body>
 
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main page title</h1>
</td>
</tr>
 
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
content is here</td>
</tr>
 
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
copyright © runoob.com</td>
</tr>
</table>
 
</body>
</html>

The HTML code above produces the following result:


HTML Layout – Helpful Tips

Tip: The biggest benefit of using CSS is that your site is easier to maintain if you store your CSS code in an external style sheet. By editing a single file, you can change the layout of all pages. To learn more about CSS, visit our CSS tutorial .

Tip: Since creating advanced layouts can be time-consuming, using templates is a quick option. Search engines can find many free website templates (you can use these pre-built website layouts and optimize them).


HTML layout tags

LableDescribe
<div>Define document blocks, (block-level)
<span>Definition span,Used to combine inline elements in a document