start learning
Image 1

HTML Layout

In HTML, the term layout refers to the structure and arrangement of elements on a webpage. It involves organizing and positioning different components such as headers, navigation menus, content sections, sidebars, and footers to create a visually appealing and well-structured webpage.

HTML provides a set of tags and attributes that allow you to create the layout of a webpage. Here are some commonly used HTML elements for creating a basic layout :

In addition to these elements, HTML provides attributes and techniques for controlling the layout, such as:

CSS (Cascading Style Sheets):

Allows you to apply styles and positioning to HTML elements, enabling precise control over the layout, including dimensions, margins, padding, positioning, and more.

Grid systems:

CSS frameworks like Bootstrap or CSS Grid provide pre-defined grid systems that assist in creating responsive layouts with multiple columns and rows.


A CSS layout model that helps in creating flexible and responsive layouts by distributing space among items within a container and controlling their alignment.

By combining these HTML elements, CSS styles, and layout techniques, you can create well-structured and visually appealing webpages that are responsive and user-friendly.

You can use our free live html editor to test tutorial codes.

Header and Navigation

Inline Styles :

  <h1>My Website</h1>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>

In this example, we have a <header> element containing a website title (<h1>) and a navigation menu (<nav> ) with a list of links (<ul> and <li>). This layout allows users to identify the website and easily navigate through its different sections.

Main Content Section

    <h2>Article Title</h2>
    <p>This is the content of the article.</p>
    <h3>Section Title</h3>
    <p>This is a section of content.</p>

In this example, we use the <main> element to define the main content area of the webpage. Inside, we have an <article> element representing a self-contained article with a title and content. Additionally, we have a <section> element that represents another logical section of content. This layout helps organize and structure the webpage's main content.

Sidebar and Footer

    <!-- Article content here -->
    <h3>Recent Posts</h3>
      <li>Post 1</li>
      <li>Post 2</li>
      <li>Post 3</li>
  <p>© 2023 My Website. All rights reserved.</p>

In this example, we have a <main> element containing an <article> representing the main content. Additionally, we include an <aside> element as a sidebar with recent posts. This layout allows supplementary information to be displayed alongside the main content. Finally, we have a <footer> element at the bottom of the webpage, providing copyright information and other footer content.

These examples demonstrate how different HTML elements can be used to create a basic webpage layout. You can further enhance and customize the layout using CSS styles, such as positioning, dimensions, and responsive design techniques.