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.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>Page Layout</title>
    <style>
        .head1 {
            font-size:40px;
            color:#009900;
            font-weight:bold;
        }
        .head2 {
            font-size:17px;
            margin-left:10px;
            margin-bottom:15px;
        }
        body {
            margin: 0 auto;
            background-position:center;
            background-size: contain;
        }
      
        .menu {   
            position: sticky;
            top: 0;
            background-color: #009900;
            padding:10px 0px 10px 0px;
            color:white;
            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;
            padding-top:20px;
            padding-bottom:50px;
            text-align:center;
            font-size:30px;
            font-weight:bold;
        }
        .body_sec {
            margin-left:20px;
        }
    </style>
</head>
  
<body>
      
    <!-- Header Section -->
    <header>
        <div class="head1">GeeksforGeeks</div>
        <div class="head2">A computer science portal for geeks</div>
    </header>
      
    <!-- 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>
        </div>
    </div>
      
    <!-- Body section -->
    <div class = "body_sec">
        <section id="Content">
            <h3>Content section</h3>
        </section>
    </div>
      
    <!-- Footer Section -->
    <footer>Footer Section</footer>
</body>
</html>                    

chevron_right


Output:
page layout



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.