HTML
Layout

Webpage layout is the part of designing that deals with the arrangement of visual elements on a page. Page layout is used to make the web pages look better. It establishes the overall appearance to achieve a smooth flow of information and eye movement for maximum effectiveness or impact.

Now-a-days, all modern websites are using CSS and JavaScript based framework to come up with responsive and dynamic websites but it can be created using HTML <table> tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.

Layout Example

Most modern websites and blogs consist of a header, footer, navbar, perhaps another sidebar, and the main content area. Something like this:

Above layout can be marked up as follows:

Copy Code 


<header>Header</header>

<aside>Sidebar</aside>

<div>Content</div>

<footer>Footer</footer>

Example with Code

Copy Code 


<!doctype html>  
<html>

    <head>
        <style>
            body{
                font-family: Segoe UI;
            }

            section {
                width: 80%;
                margin: auto;
            }

            header {
                background-color:black;
                color:white;
                text-align:center;
                padding:5px;   
            }
            aside {
                line-height:30px;
                background-color:#eeeeee;
                height:300px;
                width:173px;
                float:left;
                padding:5px;        
            }

            li{
                list-style: none;
            }
            .content {
                width:350px;
                float:left;
                padding: 0 0 0 30px;     
            }
            footer {
                background-color:black;
                color:white;
                clear:both;
                text-align:center;
                padding:5px;     
            }
        </style>
    </head>

    <body>
        <section>
                
            <header>
                <h1>Header</h1>
            </header>

            <aside>
                <ul>
                    <li>Menu Item 1</li>
                    <li>Menu Item 2</li>
                    <li>Menu Item 2</li>
                </ul>
            </aside>

            <div class="content">
                <h1>PHPDocs</h1>
                <p>PHPDocs is an online learning platform. Learn the programming skills you need for the job you want.</p>
            </div>

            <footer>
                Copyright @phpdocs.com
            </footer>

        </section>
    </body>

</html>