HTML LAYOUT

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 have seen most websites on the internet usually display their content in multiple rows and columns, formatted like a magazine or newspaper to provide the users a better reading and writing environment. This can be easily achieved by using the HTML tags, such as <table><div><header><footer><section>, etc. and adding some CSS styles to them.

HTML Table Based Layout

Table provides the simplest way for creating layouts in HTML. Generally, this involves the process of putting the contents such as text, images, and so on into rows and columns.

The following layout is created using an HTML table with 3 rows and 2 columns — the first and last row spans both columns using the table’s colspan attribute:

Example

<!DOCTYPE HTML>
<html>
<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;"></h1>
            </td>
        </tr>
        <tr valign="top" 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 © AFRIPORTALNETWORK.COM</p>
            </td>
        </tr>
    </table>
</body>
</html>
Result

HTML Div Based Layout

Using the <div> elements is the most common method of creating layouts in HTML. The <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 other div elements if required.

The following example uses the div elements to create a multiple column layout. It will produce the same result as in the previous example that uses table element:

EXAMPLE
<!DOCTYPE HTML>
<html>
<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></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 clas="footer">
            <p>COPYRIGHT © AFRIPORTALNETWORK.COM</p>
        </div>
    </div>
</body>
</html>
Result

Using the HTML5 Structural Elements

HTML5 has introduced the new structural elements such as <header><footer><nav><section>, etc. to define the different parts of a web page 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 layout that we have created in the previous examples.

EXAMPLE
<!DOCTYPE HTML>
<html>
<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></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 © AFRIPORTALNETWORK.COM</p>
        </footer>
    </div>
</body>
</html>
Result

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

Tag Description
<header> Represents the header of a document or a section.
<footer> Represents the footer of a document or a section.
<nav> Represents a section of navigation links.
<section> Represents a section of a document, such as header, footer etc.
<article> Represents an article, blog post, or other self-contained unit of information.
<aside> Represents some content loosely related to the page content.

The HTML link Element

The <link> element defines the relationship between the current document and an external documents or resources. A common use of link element is to link to external style sheets.

EXAMPLE
<head>
    <title>LINKING TO STYLE SHEETS</title>
    <link type="text/css" rel="stylesheet" href="style.css">
</head>

The HTML style Element

The <style> element is used to define embedded style information for an HTML document. The style rules inside the <style> element specify how HTML elements render in a browser.

EXAMPLE
<head>
    <title>INTERNAL STYLE SHEET</title>
    <style>
        body { background-color: yellowgreen; }
        h1 { color: red; }
        P { color: green; }
    </style>
</head>
Result

The HTML meta Element

The <meta> element provides metadata about the HTML document. Metadata is a set of data that describes and gives information about other data.