Explain the layout structure of HTML

Last Updated : 16 Jan, 2022

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.

In this article, we will discuss the page layout structure of HTML:

Layout Structure of HTML Page Layout Information:

Header: The part of a front end that is used at the top of the page. <header> tag is used to add a header section in web pages.
Navigation bar: The navigation bar is the same as the menu list. It is used to display the content information using hyperlinks.
Index / Sidebar: It holds additional information or advertisements and is not always necessary to be added to 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 is always put on the bottom of the web pages. The <footer> tag is used to set the footer in web pages.

Example:

HTML

<!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>