This guide will show you how to create a web page layout using various methods.
Creating Website Layouts
The activity of positioning the different elements that make up a web page in a well-structured manner in order to give the website an attractive look is known as a website layout.
Many websites on the internet view their content in several rows and columns, similar to a magazine or newspaper, to offer a better reading and writing environment for their visitors. This is simply achieved by using HTML tags including <table>, <div>, <header>, <footer>, <section>, and so on, and applying CSS styles to them.
HTML Table Based Layout
The simplest way to create layouts in HTML is to use tables. In general, this entails arranging the contents, such as text, images, and so on into rows and columns.
The table’s colspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Table Layout</title>
</head>
<body style="margin:0px;">
<table width="100%" border="1" style="border-collapse:collapse; font:14px Arial,sans-serif;">
<tr>
<td colspan="2" style="padding:10px 20px; background:#fff; color:#006BA1;">
<h1 style="font-size:24px;">Learn Code Web</h1>
</td>
</tr>
<tr style="height:170px;">
<td style="width:20%; padding:20px; background-color:#ddd; 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:#fff; vertical-align:top;">
<h2>Welcome to our site</h2>
<p>Here you can write your content...</p>
</td>
</tr>
<tr>
<td colspan="2" style="padding:5px; background:#fff; color:#006BA1; text-align:center;">
<p>copyright © learncodeweb.com</p>
</td>
</tr>
</table>
</body>
</html>
The performance of the HTML code above is as follows:
web-page While the method used to create the layout in the preceding example is not wrong, it is not recommended. When making templates, avoid tables and inline styles. Table-based layouts are very slow to render. Tables are only for displaying tabular data.
HTML Div Based Layout
The most popular way of creating layouts in HTML is to use the <div> <div>
The div elements are used in the following example to create a multiple-column layout. It will give the same result as the table element in the previous 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: #fff;
color:#006BA1;
border-bottom:1px solid #ccc;
}
.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: #fff;
color:#006BA1;
text-align: center;
padding: 5px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Learn Code Web</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 can write your content...</p>
</div>
</div>
<div class="footer">
<p>copyright © learncodeweb.com</p>
</div>
</div>
</body>
</html>
The HTML code above has the same result as the previous example.
web-page-div Since most web browsers support CSS float techniques, we used them to create this layout. Alternatively, CSS3 flexbox can be used to create more modern and flexible layouts. To read more about flexbox, check out the CSS3 flexible box layouts tutorial.
NOTE: The DIV elements and CSS can be used to create improved web page layouts. By editing a single CSS file, you can change the layout of all of your website’s pages. Please visit our CSS tutorial section to learn more about CSS.
Using the HTML5 Structural Elements
To describe the various parts of a web page in a more semantic way, HTML5 also introduced new structural elements such as <header> <footer> <nav> <section>
These elements may be included in replacement of commonly used classes like .header, .footer, .nav, .section, and so on. The following example recreates the layout created in the previous examples using the new HTML5 structural elements.
<!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: #fff;
color:#006BA1;
border:1px solid #ddd;
}
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: #fff;
color:#006BA1;
border:1px solid #ddd;
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Learn Code Web</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 can write your content...</p>
</section>
</div>
<footer>
<p>copyright © learncodeweb.com</p>
</footer>
</div>
</body>
</html>
The HTML code above also produces the same result as the previous example:
web-page-html5 The table below gives a brief overview of the new HTML5 structural elements.
Tag
Description
<header>The header of a document or a section is represented by this element.
<footer>The footer of a document or a section is represented by this element.
<nav>A section of navigation links is represented by this element.
<section>A section of a document, such as a header or a footer, is represented by this element.
<article>An article, blog post, or other self-contained units of information is represented by this element.
<aside>Represents any content slightly related to the content of the page.
To read more about the newly introduced tags, please refer to the HTML5 tag guide.
