Skip to content
Related Articles

Related Articles

HTML | Layout

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Medium
  • Last Updated : 15 Jun, 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.
 

page layout

  • divs have a special class/id associated with them.
            <div class = "header"> ..... </div>
            <div class = "section"> ..... </section>
            <div class = "footer"> ..... </footer>

Page Layout Information: 

  • Header: The part of the front end which is used at the top of the page. <header> tag is used to add a header section on web pages.s

Syntax:

            <header>
                <h1> ----- </h1>
                <h2> ----- </h2>
                ----------------
                ----------------
            </header>
  • Navigation bar: The navigation bar is the same as the menu list. It is used to display the content information using hyperlinks. <nav> tag is used to add the nav section(nav elements) in web pages.

Syntax:

            <nav>
                <ul>
                    <li> ..... </li>
                    <li> ..... </li>
                </ul>
            </nav>
  • 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 central part where content is displayed.<main> tag is used to add the main content of the webpages.
  • 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 sets the footer on web pages.

Syntax:

            <footer>
                .....
            </footer>

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 -->
    <nav 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>
      </nav>
      
    <!-- Body section -->
    <main class = "body_sec">
        <section id="Content">
            <h3>Content section</h3>
        </section>
      </main>
      
    <!-- Footer Section -->
    <footer>Footer Section</footer>
</body>
</html>


Output: 
 

page layout

Supported Browser:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari

HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!