Layout Components

Layouts	Descriptions
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.
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.
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.

Example: In this example we defines a page layout with a header, navigation menu, body section, and footer. It includes CSS styling for elements like headings, menu, and footer, enhancing visual appeal and user experience.

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">
            w3wiki
        </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:

HTML Layout Example Output

HTML Layout

HTML layouts are the backbone of web pages, structuring content for user-friendly navigation. They ensure organized presentation and enhance user experience. This guide explores elements and techniques vital for crafting effective HTML layouts.

Tags:

#HTML-Basics #HTML #Web Technologies

Understanding HTML Layouts

Techniques for Creating HTML Layouts

Layout Components

HTML Layout

Similar Reads

Contact Us