Page Layout in HTML

Src and alt in HTML Semantic Elements in HTML

HTML layout refers to the way in which elements are arranged on a webpage.

It involves the use of various HTML elements and CSS to structure and style content, ensuring that it is displayed in an organized and visually appealing manner.

Common Elements Used in HTML Layout

<header>: Defines a header for a document or a section.
<nav>: Defines a set of navigation links.
<section>: Defines a section in a document.
<article>: Defines independent, self-contained content.
<aside>: Defines content aside from the content it is placed in (like a sidebar).
<footer>: Defines a footer for a document or a section.
<div>: Defines a division or a section in an HTML document, often used as a container for other elements.

Example of a Basic HTML Layout

Below is an example of a simple HTML layout for a blog page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Blog</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header, footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 1em 0;
        }
        nav {
            background-color: #444;
            color: white;
            text-align: center;
            padding: 1em 0;
        }
        nav a {
            color: white;
            margin: 0 1em;
            text-decoration: none;
        }
        .container {
            display: flex;
            flex-wrap: wrap;
            margin: 2em;
        }
        .main {
            flex: 3;
            padding: 1em;
        }
        .aside {
            flex: 1;
            padding: 1em;
            background-color: #f4f4f4;
        }
        .article {
            background-color: #e2e2e2;
            padding: 1em;
            margin-bottom: 1em;
        }
    </style>
</head>
<body>

<header>
    <h1>My Blog</h1>
</header>

<nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
</nav>

<div class="container">
    <div class="main">
        <section class="article">
            <h2>Blog Post 1</h2>
            <p>This is the first blog post content.</p>
        </section>
        <section class="article">
            <h2>Blog Post 2</h2>
            <p>This is the second blog post content.</p>
        </section>
    </div>
    <aside class="aside">
        <h2>About Me</h2>
        <p>This is some information about the blog author.</p>
    </aside>
</div>

<footer>
    <p>&copy; 2024 My Blog</p>
</footer>

</body>
</html>

Example Explanation -

<header>: Contains the main title of the blog.
<nav>: Contains navigation links for the website.
.container: A flex container that wraps the main content and the sidebar.
.main: The main content area that holds multiple blog posts.
.aside: A sidebar containing additional information, such as the author bio.
<footer>: Contains the footer information.

CSS Layout Techniques

The example uses basic CSS for layout:

Flexbox: The .container uses flexbox to create a flexible layout that adjusts the main content and sidebar.
Background Colors and Padding: Used to visually separate different sections.

This layout ensures that the content is structured and easily navigable, providing a good user experience.