Website layout is the process of positioning the different elements that make up a web page and give it an attractive appearance.
You’ve probably noticed that most web pages on the web display their contents in multiple lines and columns, similar to a magazine or a newspaper, in order to give the user a more comfortable reading and writing experience.
You can do this by using HTML tags like <table>, <div>, <header>, <footer>, <section>, etc., along with some CSS styles.
The easiest way to create layouts in HTML is using a table. In general, this means putting the text, images, etc. into the rows and columns of the table. Let’s see how to create the following layout using an HTML table:
The table has 3 lines and 2 columns. The first and last lines span both columns using the colspan attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Table Layout</title>
</head>
<body style="margin:0px;">
<table style="width:100%; border-collapse:collapse; font:14px Arial,sans-serif;">
<tr>
<td colspan="2" style="padding:10px 20px; background-color:#acb3b9;">
<h1 style="font-size:24px;">Tutorial Republic</h1>
</td>
</tr>
<tr style="height:170px;">
<td style="width:20%; padding:20px; background-color:#d4d7dc; vertical-align: top;">
<ul style="list-style:none; padding:0px; line-height:24px;">
<li><a href="#" style="color:#333;">Home</a></li>
<li><a href="#" style="color:#333;">About</a></li>
<li><a href="#" style="color:#333;">Contact</a></li>
</ul>
</td>
<td style="padding:20px; background-color:#f2f2f2; vertical-align:top;">
<h2>Welcome to our site</h2>
<p>Here you will learn how to create websites...</p>
</td>
</tr>
<tr>
<td colspan="2" style="padding:5px; background-color:#acb3b9; text-align:center;">
<p>copyright © tutorialrepublic.com</p>
</td>
</tr>
</table>
</body>
</html>— The above HTML code will output the following:
Warning: In the above example, the method used for layout is not incorrect. However, it is not recommended to use tables or inline styles for layout. Layouts that are created using tables are often rendered at a very slow speed. Tables are only used for tabular data.
The <div> element is the most popular way to lay out a layout in HTML. A <div> stands for division, and it is used to mark a section of content or a collection of elements inside the HTML document. You can add more div elements if you need to.
In the following example, we will use the div element to lay out a multi-colon layout. The result will be the same as in the table element example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Div Layout</title>
<style>
body {
font: 14px Arial,sans-serif;
margin: 0px;
}
.header {
padding: 10px 20px;
background: #acb3b9;
}
.header h1 {
font-size: 24px;
}
.container {
width: 100%;
background: #f2f2f2;
}
.nav, .section {
float: left;
padding: 20px;
min-height: 170px;
box-sizing: border-box;
}
.nav {
width: 20%;
background: #d4d7dc;
}
.section {
width: 80%;
}
.nav ul {
list-style: none;
line-height: 24px;
padding: 0px;
}
.nav ul li a {
color: #333;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.footer {
background: #acb3b9;
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Tutorial Republic</h1>
</div>
<div class="wrapper clearfix">
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="section">
<h2>Welcome to our site</h2>
<p>Here you will learn how to create websites...</p>
</div>
</div>
<div class="footer">
<p>copyright © tutorialrepublic.com</p>
</div>
</div>
</body>
</html>— The following HTML code will output the same result as the above example:
We have used CSS float techniques to create this layout. CSS float is supported by most web browsers. You can also use CSS3 Flexbox to create a modern and flexible layout. Check out the CSS3 flexible box layouts Tutorial to learn more about Flexbox.
Tip: The DIV element and CSS can be used to create better web page layouts. You can edit all the pages on your website by simply editing a single CSS file. If you want to learn more about CSS, read our CSS tutorial.
HTML5 introduces new structural elements like <header>, <footer>, <nav>, <section> to define different parts of the web pages in a more semantic manner.
These elements can be thought of as a substitute for classes like .header, .footer, .nav, .section, etc.
In the following example, we will use the new HTML5 structure elements to achieve the same layout as in the previous examples.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Web Page Layout</title>
<style>
body {
font: 14px Arial,sans-serif;
margin: 0px;
}
header {
padding: 10px 20px;
background: #acb3b9;
}
header h1 {
font-size: 24px;
}
.container {
width: 100%;
background: #f2f2f2;
}
nav, section {
float: left;
padding: 20px;
min-height: 170px;
box-sizing: border-box;
}
section {
width: 80%;
}
nav {
width: 20%;
background: #d4d7dc;
}
nav ul {
list-style: none;
line-height: 24px;
padding: 0px;
}
nav ul li a {
color: #333;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
footer {
background: #acb3b9;
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Tutorial Republic</h1>
</header>
<div class="wrapper clearfix">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<h2>Welcome to our site</h2>
<p>Here you will learn how to create websites...</p>
</section>
</div>
<footer>
<p>copyright © tutorialrepublic.com</p>
</footer>
</div>
</body>
</html>— The output from the above HTML code will be the same as the output from the previous example:
The HTML5 structural elements are listed in the table below:
| Tag | Description |
|---|---|
<header> |
It represents a document's header or a section's header. |
<footer> |
It is used to represent a footer in a document or in a section. |
<nav> |
It represents a part of the navigation links. |
<section> |
It represents a part of your document, like a header or footer. |
<article> |
Represents a separate piece of content such as an article, a blog post, etc. |
<aside> |
It represents a subset of the content that is loosely associated with the page content. |
To learn more about the new HTML5 tags, please refer to the HTML5 Tags Reference.