HTML Layout Tutorial | Learn HTML

HTML layout defines design and structure of a web page. You can display contants in various ways in different devices. These different looks of web page are known as HTML layout.

In this tutorial, you will learn how you can create custom HTML layout for web page with multiple section and colunms.


HTML Layout Elements

Every web page has some basic sections that are important for better user experience like header, navigation menu, footer etc.

To create these section HTML5 offers some special tags. These tags are knowns as HTML layout elements.

html-website-layout-elements

Following are different HTML layout elements which are used to define the different parts of a webpage:

  • Header Section – The HTML <header> tag is used to define a header of a web page. This section stays at the top of a page. Usually it contains logo or icon of the website.
  • Navigation Menu – The HTML <nav> tag is used to define the navigation menu. It contains links of different pages to navigate through the website easily.
  • Content Section – The HTML <section> tag is used to define the content section. You can add any types of content in this section text, image, table etc. This is the main section of a web page where necessary information is displayed.
  • Article Section – The HTML <article> tag is used to define the article section. If you want to write big text or story then you should use this tag.
  • Aside/Sidebar – The HTML <aside> tag is used to define a sidebar in a web page. Usually it is used to create a sidebar menu. However, you can also upload other contents.
  • Footer Section – The HTML <footer> tag is used to define the footer section in a web page. It stays at the bottom of a page. This section mostly contains information about author, copyright, contact links, etc.

HTML Layout Techniques

There are 5 different techniques to design your HTML layout. You can create multiple columns with these techniques.

Each technique has its pros and cons:

  1. HTML tables (not recommended)
  2. CSS float property
  3. CSS framework
  4. CSS flexbox
  5. CSS grid

Which Layout Technique to Choose?

When you are trying to create a multicolumn website for your business, it is important to choose the right technique for layout.

Each one has its benefits and drawbacks. You have to select one according to your need.

Let’s go through all those possible ways to get clear idea where and how your should use them in your web page.


HTML Tables

HTML tables are not introduced for creating layouts. However, you can use it to design your website.

Main benefit of using table is you can create rows and columns very easily. But this is old way of creating web page.

In modern days, no one use table on this perpose. Code gets very long in size. It becomes too complecated to modify the code later on.

Should you use table in html layout?

No, we don’t recommend to use table. There are a number of alternatives available to make the process easy and simple.

Those alternative techniques will save your valuable time and effort.

<!DOCTYPE html>
<html>
<head>
	<title>HTML Layout Example with Table</title>
	<style>
		.example_list{
			margin: 0;
			padding: 0;
			list-style: none;
			background-color: gray;
		}
		.example_list li{
			float: left;
			border-right: 1px solid #ada5a5;
		}
		.example_list li a{
			text-decoration: none;
			color: #000000;
			padding: 15px 20px;
			display: block;
			color: #f2f2f2;
		}
	</style>
</head>
<body>
 
<table>
<tr>
	<td colspan="2" style="background-color:#666666;color:white;padding:20px;width: 100%;text-align:center;">WorldTechis Head</td>
</tr>
<tr>
	<td colspan="2" style="background: gray;">
		<ul class="example_list">
			<li><a href="https://worldtechis.com">Home</a></li>
			<li><a href="https://worldtechis.com">Blog</a></li>
			<li><a href="https://worldtechis.com">HTML</a></li>
			<li><a href="https://worldtechis.com">About</a></li>
			<li><a href="https://worldtechis.com">Contact</a></li>
		</ul>
	</td>
</tr>
<tr>
	<td style="width:70%;background-color:#f1f1f1;"><h2>HTML Layout Example</h2>
	HTML layout defines design and structure of a web page. You can display contants in various ways in different devices. These different looks of web page are known as HTML layout.<br>
	In this tutorial, you will learn how you can create custom HTML layout for web page with multiple section and colunms.</td>
	<td style="width:30%;background-color:silver;">
	<a href="#" style="text-decoration: none;">HTML Basics</a><br/>
	<a href="#" style="text-decoration: none;">HTML Fonts<br/>
	<a href="#" style="text-decoration: none;">HTML List<br/>
	<a href="#" style="text-decoration: none;">HTML Links<br/>
	<a href="#" style="text-decoration: none;">Tables<br/>
	<a href="#" style="text-decoration: none;">HTML Forms<br/>
	<a href="#" style="text-decoration: none;">HTML Layout
	</td>
</tr>
<tr>
	<td colspan="2" style="background-color:#ada6a6;color:white;text-align:center;
	padding:5px;">Copyright @ worldtechis.com</td>
</tr>
</table>

</body>
</html>

The output shows in a web browser:

WorldTechis Head

HTML Layout Example

HTML layout defines design and structure of a web page. You can display contants in various ways in different devices. These different looks of web page are known as HTML layout.
In this tutorial, you will learn how you can create custom HTML layout for web page with multiple section and colunms.
HTML Basics
HTML Fonts
HTML List
HTML Links
Tables
HTML Forms
HTML Layout
Copyright @ worldtechis.com

Learn more about HTML table, in our tutorial – HTML Tables


CSS Float Property

It is a CSS property used to create columns. In most case, developers use float property in web page.

Main drawback is if you use float property then you will need to use clear property.

You can move HTML sections in left or right with float property.

OUTPUT

Note: you will learn more about float property in our CSS tutorial.


CSS Framework

Another way of creating HTML layout is frameworks. There are many CSS frameworks available. Like, Bootstrap, Foundation, Materialize, Semantic-UI.

CSS framework is a collection of css properties. To add a framework, you have to download the CSS file and add that file in your HTML document with <link> tag.

Learn how to add external file in a document – HTML CSS

Different framework has different class to implement those CSS properties. You just need to add these class in your HTML elements.

Main benefit of using framework is it is easy to use and you can design your web page with very less code. You don’t have to write CSS properties to design your page.


CSS Grid Layout

CSS grid is built for creating HTML layout. It is a 2-dimensional layout system i.e. you can handle your design through rows and columns.

A grid layout often has 12 columns with total width of 100% and it can shrink and expand for different browser screen size.

To use grid layout for an element, all you have to do is set the element to display:grid. You can control rows and columns for an element and its position with grid system.

OUTPUT


CSS Flexbox

Flexbox is the short form of CSS Flexible Box Layout Module. You can use flexbox instead of using float property.

You should use this technique if you want to fill the a available container space in the best possible ways.

You have to set display: flex property in the parent element. There are many other flex properties you can use to control HTML elements.

The flex container properties are:

  • flex-wrap
  • flex-flow
  • align-items
  • align-content
  • flex-direction
  • justify-content

OUTPUT


Responsive HTML Layout

Responsive HTML layout means your web page has to be compatible in all devices.

You can design different layouts for different devices using @media property.

Usually an HTML layout contains different number of colunms for desktop, tablet and mobile devices.

For example, desktop layout contains 3 or 4 columns, tablet contains 2 columns and mobile contains 1 column.

You will learn more detail about responsive HTML layout in our next tutorial.