start learning
Image 1
32016

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.

Flexbox:

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 :


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

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


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

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


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

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.

×