Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

Output:

layout structure of HTML


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!