Table of contents

Introduction

Understanding HTML Layouts

2.1.

Layout Components

Techniques for Creating HTML Layouts

3.1.

1. Using CSS Float Property

3.2.

2. Using Flexbox

3.3.

3. Using CSS Grid

HTML Layout Elements

HTML Layout Example

CSS Layout Techniques

8.1.

1. CSS Float

8.2.

2. CSS Flexbox

8.3.

3. CSS Grid

Frequently Asked Questions

9.1.

What is an HTML layout?

9.2.

How do I create a basic HTML layout?

9.3.

What are the benefits of using Flexbox for layouts?

10.

Conclusion

Last Updated: Dec 20, 2024

Easy

HTML Layout

Author Pallavi singh

Do you think IIT Guwahati certified course can help you in your career?

Yes

Introduction

HTML (Hypertext Markup Language) layout is used to structure and organize the content of a web page. It helps developers arrange elements like headers, footers, navigation, and sections for a clear and user-friendly design.

In this article, we'll discuss HTML layouts, their key components, and how you can create them.

Understanding HTML Layouts

An HTML layout refers to how elements are arranged on a web page. It focuses on organizing content in a way that is both visually appealing and easy to navigate. In the past, developers used tables to create layouts, but today, they rely on modern techniques like Flexbox and CSS Grid for more flexible and responsive designs.

HTML provides several elements that are commonly used to define the layout & structure of a webpage, like:

<div>: Defines a division or section of the page. It's a generic container used to group other elements.
<header>: Represents the introductory content of a page or section, often including a logo, heading & navigation.
<nav>: Contains a set of navigation links for the webpage.
<main>: Specifies the main content area of the page, distinct from header, footer & sidebars.
<article>: Defines an independent, self-contained piece of content like a blog post or news story.
<section>: Represents a standalone section of the page that contains thematically grouped content.
<aside>: Holds content that is tangentially related to the main content, like sidebars or call-out boxes.
<footer>: Contains information that typically goes at the bottom of a page or section, such as copyright info, contact details & related links.

Layout Components

An HTML layout consists of several components that work together to create the structure of a webpage. The most common components include:

Header: The top section of the page, typically containing the website's logo, navigation menu, or contact information.
Navigation: Usually takes the form of a menu that allows the users to navigate across the various pages of the given website.
Main Content: The middle part of a webpage, which includes major information.
Sidebar: An optional component, often found on the left or right of the main content, containing additional links or information.
Footer: The bottom section of the page, where copyright details, terms of service, and other important information are located.

Each component plays a role in organizing the content for the user and making the page functional.

Techniques for Creating HTML Layouts

There are several ways of creating layouts in HTML. Below are some of the most popular methods:

1. Using CSS Float Property

Float property is one of the older methods for positioning content in HTML. This property allows elements to be placed on the left or right, and other content will wrap around them. This method is not flexible, and it may cause some problems with the layout in some cases.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Float Layout Example</title>
    <style>
        .container {
            width: 100%;
        }
        .left {
            width: 30%;
            float: left;
            background-color: lightblue;
        }
        .right {
            width: 70%;
            float: left;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">Left Sidebar</div>
        <div class="right">Main Content</div>
    </div>
</body>
</html>

Output

Explanation:

In this example, the .left and .right divs are floated to the left, creating a layout with two sections: a sidebar on the left and main content on the right.

2. Using Flexbox

Flexbox is a more modern technique that provides better flexibility and alignment of items in a container. It allows for easy creation of complex layouts without the need for floats.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Layout Example</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
        }
        .left {
            width: 30%;
            background-color: lightcoral;
        }
        .right {
            width: 65%;
            background-color: lightyellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">Sidebar</div>
        <div class="right">Main Content</div>
    </div>
</body>
</html>

Output

Explanation:

With Flexbox, the .container is set to display: flex, which automatically arranges its child elements (.left and .right) side by side. The justify-content: space-between ensures that there’s space between the two components.

3. Using CSS Grid

CSS Grid is a two-dimensional layout system that allows for more complex layouts than Flexbox. It is ideal when you need precise control over both rows and columns.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Layout Example</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 30% 70%;
            gap: 10px;
        }
        .left {
            background-color: lightseagreen;
        }
        .right {
            background-color: lightgoldenrodyellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">Left Sidebar</div>
        <div class="right">Main Content</div>
    </div>
</body>
</html>

Output

Explanation:

CSS Grid allows for the layout to be divided into columns and rows. In this example, we use grid-template-columns: 30% 70% to create a layout where the sidebar takes 30% of the width and the main content takes 70%.

HTML Layout Elements

Several HTML elements help in building the layout of a webpage:

<header>: Defines the header section of a webpage, usually containing navigation links, logos, or site titles.
<nav>: This is the navigation block, and this is used to define a navigation menu.
<article>: This represents independent content in a document.
<section>: This defines sections in a webpage, such as groups of content or articles.
<footer>: Represents the footer section, usually containing metadata, copyright, and links.

Here is an example of combining some of these elements into a basic layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Layout with Semantic Tags</title>
    <style>
        header, footer {
            background-color: #4CAF50;
            color: white;
            text-align: center;
            padding: 10px;
        }
        nav {
            background-color: #333;
            color: white;
            padding: 10px;
        }
        article, section {
            margin: 20px;
            padding: 15px;
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>
    <header>
        <h1>Website Header</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <article>
        <section>
            <h2>Article Heading</h2>
            <p>This is a section inside an article.</p>
        </section>
    </article>
    <footer>
        <p>Copyright &copy; 2024</p>
    </footer>
</body>
</html>

Output

HTML Layout Example

Let’s combine the previous components into a complete layout example that uses both Flexbox and semantic HTML elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Complete HTML Layout Example</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
        }
        header, footer {
            background-color: #333;
            color: white;
            padding: 10px;
            text-align: center;
        }
        main {
            display: flex;
            gap: 20px;
            flex: 1;
        }
        article, aside {
            padding: 15px;
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>
    <header>
        <h1>Website Header</h1>
    </header>
    <main class="container">
        <article>
            <h2>Main Content</h2>
            <p>This is where the main content goes.</p>
        </article>
        <aside>
            <h3>Sidebar</h3>
            <p>This is the sidebar.</p>
        </aside>
    </main>
    <footer>
        <p>Footer Information</p>
    </footer>
</body>
</html>

Output

While HTML provides the basic structure, CSS is used to control the visual layout of webpage elements. Let’s discuss some commonly used CSS layout techniques:

CSS Layout Techniques

1. CSS Float

The float property allows elements to be positioned to the left or right of their containing block, with other content wrapping around them. It's often used for creating multi-column layouts or positioning images within text.

Example:

.left {
  float: left;
  width: 50%;
}


.right {
  float: right;
  width: 50%;
}

2. CSS Flexbox

Flexbox is a powerful layout model that allows you to create flexible and responsive designs. It provides a way to distribute space among items in a container, control their alignment, and reorder them as needed.

Example:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.item {
  flex: 1;
  margin: 10px;
}

3. CSS Grid

CSS Grid is a two-dimensional layout system that lets you create complex grid-based designs. It allows you to define rows and columns, and then place elements into the grid cells using grid lines and areas.

Example:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}


.grid-item {
  background-color: #f1f1f1;
  padding: 20px;
}

These are just a few examples of CSS layout techniques. There are many more, such as positioning, display properties, and responsive design techniques using media queries.

Frequently Asked Questions

What is an HTML layout?

An HTML layout is the organization of elements on a page. It involves how text, images, navigation, and other content is structured with HTML and CSS.

How do I create a basic HTML layout?

You can make a simple HTML layout using CSS properties such as Flexbox or Grid. These help in organizing content into sections, like headers, navigation, main content, and footers.

What are the benefits of using Flexbox for layouts?

Flexbox offers a flexible and responsive layout system. It automatically adjusts the space between items and aligns them efficiently, which makes it ideal for creating layouts that work well on various screen sizes.

Conclusion

In this article, you learned how to make HTML layouts using various techniques like floats, Flexbox, and CSS Grid. We also looked at some essential HTML layout elements that help in structuring a webpage. Understanding these methods and examples makes you better at creating responsive and well-organized webpages for your projects and interviews.

Live masterclass

Microsoft SDE Roadmap: Use AI Tools to Succeed

by Pranav Malik

19 May, 2025

01:30 PM

518+ registered

Break into MAANG Data Analyst roles from Non-Tech Profession

by Abhishek Soni

20 May, 2025

01:30 PM

436+ registered

SDE LinkedIn & Naukri Hacks to Get More Recruiter Calls

by Shantanu Shubham

21 May, 2025

01:30 PM

325+ registered

Amazon Data Analyst: Advanced Excel & AI Interview Tips

by Megna Roy

22 May, 2025

01:30 PM

312+ registered

Microsoft SDE Roadmap: Use AI Tools to Succeed

by Pranav Malik

19 May, 2025

01:30 PM

518+ registered

Break into MAANG Data Analyst roles from Non-Tech Profession

by Abhishek Soni

20 May, 2025

01:30 PM

436+ registered

View more events