You Are Here

HTML Layouts

HTML layout is used to arrange web pages in a well-structured and responsive form. The webpage layout is very important to give a better look to your website. Web page layout works with the arrangement of visual elements of an HTML document.
The web page layout is important while creating a website so that our website will look professional. For creating layouts you can use CSS and javascript based framework for responsive web designing.

HTML Layout Elements:

html layout
The website has a specific layout to display content in a specific manner.
The following are different elements that are used to define the different parts of a webpage.
  • <header>: The <header> is used to define a header for a document or a section
  • <nav>: The <nav> is used to define a container for navigation links
  • <section>: The <section> is used to define a section in a document
  • <aside>: The <aside> is Used to define content aside from the content (like a sidebar)
  • <article>: The <article> is used to define an independent self-contained article
  • <footer>: The <footer> is Used to define a footer for a document or a section
  • <details>: The <details> is used to define additional details
  • <summary>: The <summary> is used to define a heading for the <details> element

HTML Layout Techniques:

HTML has five different ways to create multicolumn layouts:
  • HTML tables (not recommended)
  • CSS float property
  • CSS flexbox
  • CSS framework
  • CSS grid

Which One to Choose for creating layout?

HTML Tables:

The simplest way of creating layouts is using HTML <table> tag. The HTML table is used to display data in tabular form. So don’t use the table to create your page layout. Using a table to create a layout will mess up your code and it will be hard to recreate your code.

CSS Frameworks:

You can use a CSS framework to create a layout. Using CSS frameworks like W3.CSS or Bootstrap you can easily create a layout.

CSS Floats:

You can create a layout using the CSS float property. The CSS float property is used for positioning and formatting content. Float is easy to learn, you just have to remember how the float and clear properties work. Float elements are bind to the document flow, which may harm the flexibility.
You will learn more about CSS float in our CSS tutorial.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<title> Template </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
}
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
nav {
float: left;
width: 30%;
height: 300px;
background: #ccc;
padding: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px;
}
section:after {
content: "";
display: table;
clear: both;
}
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<header>
<h2> Technologies </h2>
</header>
<section>
<nav>
<ul>
<li><a href="#"> HTML</a></li>
<li><a href="#"> CSS </a></li>
<li><a href="#"> Bootstrap </a></li>
</ul>
</nav>
<article>
<h2> HTML </h2>
<p> HTML is a markup language using which you can create your website. HTML stands for Hypertext Markup Language. It contains elements and the elements are represented by tags. </p>
</article>
</section>
<footer>
<p> Footer </p>
</footer>
</body>
</html>
Try it

CSS Flexbox:

CSS3 introduced a new layout mode i.e flexbox. The flexbox can fill extra space without the need to use Javascript. The disadvantage of flexbox is that it does not work on IE10 and earlier.
You will learn more about the flexbox in our CSS tutorial.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<title> Template </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
}
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
section {
display: flex;
}
nav {
flex: 1;
background: #ccc;
padding: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
}
article {
flex: 3;
background-color: #f1f1f1;
padding: 10px;
}
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
@media (max-width: 600px) {
section {
flex-direction: column;
}
}
</style>
</head>
<body>
<header>
<h2> Technologies </h2>
</header>
<section>
<nav>
<ul>
<li><a href="#"> HTML </a></li>
<li><a href="#" > CSS </a></li>
<li><a href="#"> Bootstrap </a>
</ul>
</nav>
<article>
<h2> HTML </h2>
<p> HTML is a markup language using which you can create your website. HTML stands for Hypertext Markup Language. It contains elements and the elements are represented by tags. </p>
</article>
</section>
<footer>
<p> Footer </p>
</footer>
</body>
</html>
Try it

CSS Grid View:

The grid view in CSS offers a grid-based system with rows and columns. The grid view makes it easier to design web pages without using floats and positioning. The disadvantage of the grid view is that it does not work in IE and earlier.
You will learn more about CSS grids in our CSS tutorial.

Ask a Question

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