HTML | Layout

Page layout is the part of graphic design 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, relative importance, and relationships between the graphic elements to achieve a smooth flow of information and eye movement for maximum effectiveness or impact.

page layout

Page Layout Information:

  • Header: The part of a front end which is used at the top of the page. <header> tag is used to add header section in web pages.
  • Navigation bar: The navigation bar is same as menu list. It is used to display the content information using hyperlink.
  • Index / Sidebar: It holds additional information or advertisements and is not always necessary to be added into the page.
  • Content Section: The content section is the main part where content is displayed.
  • Footer: The footer section contains the contact information and other query related to web pages. The footer section always put on the bottom of the web pages. The <footer> tag is used to set the footer in web pages.


<!DOCTYPE html>
    <title>Page Layout</title>
        .head1 {
        .head2 {
        body {
            margin: 0 auto;
            background-size: contain;
        .menu {   
            position: sticky;
            top: 0;
            background-color: #009900;
            padding:10px 0px 10px 0px;
            margin: 0 auto;
            overflow: hidden;
        .menu a {
            float left;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 20px;
        .menu-log {
            right: auto;
            float: right;
        footer {
            width: 100%;
            bottom: 0px;
            background-color: #000;
            color: #fff;
            position: absolute;
        .body_sec {
    <!-- Header Section -->
        <div class="head1">GeeksforGeeks</div>
        <div class="head2">A computer science portal for geeks</div>
    <!-- Menu Navigation Bar -->
    <div class="menu">
        <a href="#home">HOME</a>
        <a href="#news">NEWS</a>
        <a href="#notification">NOTIFICATIONS</a>
        <div class="menu-log">
            <a href="#login">LOGIN</a>
    <!-- Body section -->
    <div class = "body_sec">
        <section id="Content">
            <h3>Content section</h3>
    <!-- Footer Section -->
    <footer>Footer Section</footer>

page layout

This article is attributed to GeeksforGeeks.org

You Might Also Like

leave a comment



load comments

Subscribe to Our Newsletter