HTML | Layout

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. 
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:  
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.
SumitBM
ysachin2314
hardikkoriintern
harsh464565
aditiyadav20102001
HTML-Basics
Picked
CSS
HTML
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property