HTML Layout

Web page layout is an essential part of creating well-formed, well-structured, semantically-rich websites.

Creating Website Layouts

Creating a website layout is the activity of positioning the various elements that make a web page in a well-structured manner and give appealing look to the website.

You can find, most of the websites on the internet have put their content in multiple rows and columns — formatted like a magazine or newspaper, to give general web users a better reading and writing environment. This can be easily achieved by using the <table>, <div> or <span> tags and adding some styles to them.

HTML Layout Using Tables

Tables are the simplest method for creating layouts in HTML. Generally, this involves the process of putting the content into rows and columns.

The following HTML layout is achieved using a table with 3 rows and 2 columns — the first and last row spans 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 cellpadding="10px;" cellspacing="0" style="font:12px verdana, sans-serif; width:100%;">
  •         <tr>
  •             <td colspan="2" style="background-color:#679BB7;">
  •                 <h1 style="font-size:18px; margin:10px 0;">Tutorial Republic</h1>
  •             </td>
  •         </tr>
  •         <tr style="height:170px;">
  •             <td style="background-color:#bbd2df; width:20%; vertical-align:top;">
  •                 <ul style="list-style:none; padding:0px; margin:0px;">
  •                     <li style="margin-bottom:5px;"><a href="#" style="color:#3d677e;">Home</a></li>
  •                     <li style="margin-bottom:5px;"><a href="#" style="color:#3d677e;">About</a></li>
  •                     <li style="margin-bottom:5px;"><a href="#" style="color:#3d677e;">Contact</a></li>
  •                 </ul>
  •             </td>
  •             <td style="background-color:#f0f0f0; width:80%; vertical-align:top;">
  •                 <h2 style="font-size:16px; margin:0px;">Welcome to our site</h2>
  •                 <p>Here you will learn to create websites...</p>
  •             </td>
  •         </tr>
  •         <tr>
  •             <td colspan="2" style="background-color:#679BB7;">
  •                 <p style="text-align:center; margin:5px;">copyright &copy; tutorialrepublic.com</p>
  •             </td>
  •         </tr>
  •     </table>
  • </body>
  • </html>

— The HTML code above will produce the following output:

 

Warning:The method used for creating layout in the above example is not wrong, but it's not recommended. Avoid tables and inline styles for creating layout.


HTML Layouts Using Div and Span

The HTML <div> (stands for division) element is used for marking out a block of content, or set of other elements inside an HTML document. It can contain further div element if required, but it cannot be contained within an inline element. The <span> element on the other hand is used for marking out sections within a block element or other inline elements.

The following example uses the div elements to create a multiple column layout, producing the same result as in the previous example that uses tables:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  •     <meta charset="UTF-8">
  •     <title>HTML Div Layout</title>
  •     <style type="text/css">
  •         body{
  •             font: 12px verdana, sans-serif; 
  •             margin: 0px;
  •         }
  •         .header{
  •             padding: 10px 0;
  •             background-color: #679BB7; 
  •         }
  •         .header h1{
  •             font-size: 18px; 
  •             margin: 10px;
  •         }
  •         .container{
  •             width: 100%;
  •             background-color: #f0f0f0; 
  •         }
  •         .sidebar{
  •             float: left; 
  •             width: 20%; 
  •             min-height: 170px;
  •             background-color: #bbd2df;
  •         }
  •         .sidebar .nav{
  •             padding: 10px;
  •         }
  •         .nav ul{
  •             list-style: none; 
  •             padding: 0px; 
  •             margin: 0px;
  •         }
  •         .nav ul li{
  •             margin-bottom: 5px; 
  •         }
  •         .nav ul li a{
  •             color: #3d677e;
  •         }
  •         .nav ul li a:hover{
  •             text-decoration: none;
  •         }
  •         .content{
  •             float: left;
  •             width: 80%;
  •             min-height: 170px;
  •         }
  •         .content .section{
  •             padding: 10px;
  •         }
  •         .content h2{
  •             font-size: 16px; 
  •             margin: 0px;
  •         }
  •         .clearfix{
  •             clear: both;
  •         }
  •         .footer{
  •             background-color: #679BB7; 
  •             padding: 10px 0;
  •         }
  •         .footer p{
  •             text-align: center; 
  •             margin: 5px;
  •         }
  •     </style>
  • </head>
  • <body>
  •     <div class="container">
  •         <div class="header">
  •             <h1>Tutorial Republic</h1>
  •         </div>
  •         <div class="wrapper">
  •             <div class="sidebar">
  •                 <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>
  •             <div class="content">
  •                 <div class="section">
  •                     <h2>Welcome to our site</h2>
  •                     <p>Here you will learn to create websites...</p>
  •                 </div>
  •             </div>
  •             <div class="clearfix"></div>
  •         </div>
  •         <div class="footer">
  •             <p>copyright &copy; tutorialrepublic.com</p>
  •         </div>
  •     </div>
  • </body>
  • </html>

— The HTML code above will produce the same output as the previous example:

 

Tip:Better layouts can be created by using DIV, SPAN and CSS. You can change the layout of all the pages of your website by just editing a CSS file. To learn more about CSS, please check out CSS tutorial.


Creating Website Layouts Using HTML5 Structural Elements

HTML5 has introduced new structural elements like <header>, <footer>, <nav>, <section> etc. to define different parts of the web pages in a more semantic way. You can consider these elements as a replacement for commonly used classes such as .header, .footer, .nav, .section etc. The following example uses the new HTML5 structural elements to create the same web page layout what we have created in the previous examples.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  •     <meta charset="UTF-8">
  •     <title>HTML5 Web Page Layout</title>
  •     <style type="text/css">
  •         body{
  •             font: 12px verdana, sans-serif; 
  •             margin: 0px;
  •         }
  •         header{
  •             background-color: #679BB7; 
  •             padding: 10px;
  •         }
  •         header h1{
  •             font-size: 18px; 
  •             margin: 10px 0;
  •         }
  •         .container{
  •             width: 100%;
  •             background-color: #f0f0f0; 
  •         }
  •         .sidebar{
  •             float: left; 
  •             width: 20%; 
  •             min-height: 170px;
  •             background-color: #bbd2df;
  •         }
  •         .sidebar nav{
  •             padding: 10px;
  •         }
  •         nav ul{
  •             list-style: none; 
  •             padding: 0px; 
  •             margin: 0px;
  •         }
  •         nav ul li{
  •             margin-bottom: 5px; 
  •         }
  •         nav ul li a{
  •             color: #3d677e;
  •         }
  •         nav ul li a:hover{
  •             text-decoration: none;
  •         }
  •         .content{
  •             float: left;
  •             width: 80%;
  •             min-height: 170px;
  •         }
  •         .content section{
  •             padding: 10px;
  •         }
  •         section h2{
  •             font-size: 16px; 
  •             margin: 0px;
  •         }
  •         .clearfix:after{
  •             content: ".";
  •             display: block;
  •             height: 0;
  •             clear: both;
  •             visibility: hidden;
  •         }
  •         footer{
  •             background-color: #679BB7; 
  •             padding: 10px;
  •         }
  •         footer p{
  •             text-align: center; 
  •             margin: 5px;
  •         }
  •     </style>
  • </head>
  • <body>
  •     <div class="container">
  •         <header>
  •             <h1>Tutorial Republic</h1>
  •         </header>
  •         <div class="wrapper clearfix">
  •             <div class="sidebar">
  •                 <nav>
  •                     <ul>
  •                         <li><a href="#">Home</a></li>
  •                         <li><a href="#">About</a></li>
  •                         <li><a href="#">Contact</a></li>
  •                     </ul>
  •                 </nav>
  •             </div>
  •             <div class="content">
  •                 <section>
  •                     <h2>Welcome to our site</h2>
  •                     <p>Here you will learn to create websites...</p>
  •                 </section>
  •             </div>
  •         </div>
  •         <footer>
  •             <p>copyright &copy; tutorialrepublic.com</p>
  •         </footer>
  •     </div>
  • </body>
  • </html>

— The HTML code above will also produce the same output as the previous example:

The following table provides a brief overview of new structural elements in HTML5.

Tag Description
<header> Represents the header of a document or a section.
<footer> Represents the footer of a document or a section.
<nav> Defines a section of navigation links.
<section> Defines a section of a document, such as header, footer etc.
<article> Defines an article.
<aside> Defines some content loosely related to the page content.
<details> Represents a widget from which the user can obtain additional information or controls on-demand.
<summary> Defines a summary for the <details> element.

Check out the reference on HTML5 Tags to learn more about new tags.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.