HTML - HTML Layout

HTML Layout

HTML layout refers to structuring and organizing web page content using HTML elements and CSS. A well-structured layout improves readability, accessibility, and user experience.

1) What Is an HTML Layout?

An HTML layout defines how elements like header, navigation, sidebar, content, and footer are arranged on a web page.
It is created using HTML for structure and CSS for styling.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Layout Example</title>
    <style>
        header {background-color: #4CAF50; color: white; padding: 10px; text-align: center;}
        nav {background-color: #333; padding: 10px;}
        nav a {color: white; margin: 10px; text-decoration: none;}
        article {padding: 15px;}
        footer {background-color: #333; color: white; text-align: center; padding: 10px;}
    </style>
</head>
<body>
    <header>
        <h1>My Website</h1>
    </header>
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
    <article>
        <h2>Welcome</h2>
        <p>This is an example of an HTML layout.</p>
    </article>
    <footer>
        <p>© 2025 My Website</p>
    </footer>
</body>
</html>

2) HTML5 Layout Elements

HTML5 introduced semantic elements to define the structure of a web page more clearly.

Tag	Description
`<header>`	Defines the top section of a page or section
`<nav>`	Defines a navigation menu
`<section>`	Defines a group of related content
`<article>`	Defines independent, self-contained content
`<aside>`	Defines sidebar content
`<footer>`	Defines the bottom section of a page or section
`<main>`	Defines the main content of a page

3) Types of HTML Layouts

A) Fixed Layout

Uses fixed width in pixels.
Does not adjust for different screen sizes.
Common for older websites.

Example:

<div style="width:1000px; margin:auto; background:#f2f2f2;">
    <h2>Fixed Layout</h2>
</div>

B) Fluid (Liquid) Layout

Uses percentage-based widths.
Adapts to different screen sizes.

Example:

<div style="width:80%; margin:auto; background:#d4edda;">
    <h2>Fluid Layout</h2>
</div>

C) Responsive Layout

Uses CSS Flexbox or Grid.
Adapts to all devices (mobile, tablet, desktop).

Example using Flexbox:

<style>
.container {
    display: flex;
    flex-wrap: wrap;
}
.box {
    flex: 1;
    min-width: 200px;
    margin: 10px;
    padding: 20px;
    background-color: #ccc;
    text-align: center;
}
</style>
<div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
</div>

D) Grid-Based Layout

Uses CSS Grid for advanced layouts.

Example:

<style>
.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 10px;
}
.box {
    background-color: #f4b400;
    padding: 20px;
    text-align: center;
}
</style>
<div class="container">
    <div class="box">Header</div>
    <div class="box">Content</div>
    <div class="box">Sidebar</div>
</div>

4) Common HTML Layout Structure

HTML5 Semantic Layout

<header>Header</header>
<nav>Navigation</nav>
<main>
    <section>Section</section>
    <article>Article</article>
    <aside>Sidebar</aside>
</main>
<footer>Footer</footer>

5) CSS Techniques for Layouts

Technique	Description	Use Case
Float	Uses `float` to arrange elements	Legacy layouts
Flexbox	Aligns elements in rows/columns	Modern, responsive designs
Grid	Divides layout into rows & columns	Complex layouts
Positioning	Uses `absolute`, `relative`, `fixed`, `sticky`	Specific element positioning
Media Queries	Adjusts layouts for different devices	Responsive design

6) Example of a Complete Responsive Layout

<!DOCTYPE html>
<html>
<head>
    <title>Responsive HTML Layout</title>
    <style>
        * {margin: 0; padding: 0; box-sizing: border-box;}
        body {font-family: Arial;}
        header, footer {background: #333; color: white; padding: 10px; text-align: center;}
        nav {background: #555; padding: 10px; text-align: center;}
        nav a {color: white; margin: 10px; text-decoration: none;}
        main {display: flex; flex-wrap: wrap; padding: 10px;}
        article {flex: 3; padding: 10px; background: #f9f9f9;}
        aside {flex: 1; padding: 10px; background: #eee;}
        @media (max-width: 768px) {
            main {flex-direction: column;}
        }
    </style>
</head>
<body>
    <header>
        <h1>Responsive Layout</h1>
    </header>
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
    <main>
        <article>
            <h2>Main Content</h2>
            <p>This is the main article area.</p>
        </article>
        <aside>
            <h3>Sidebar</h3>
            <p>Extra information goes here.</p>
        </aside>
    </main>
    <footer>
        <p>© 2025 My Website</p>
    </footer>
</body>
</html>

7) Summary

HTML Layout defines the structure of a webpage.
HTML5 semantic elements improve readability and SEO.
Types of layouts:
- Fixed → Uses fixed widths.
- Fluid → Uses percentages.
- Responsive → Works on all devices.
- Grid-based → Best for complex designs.
CSS Flexbox and CSS Grid are the most modern techniques.