HTML Layout

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 :

• <header> : Represents the introductory section of a webpage, typically containing the site logo, site title, and main navigation.
• <nav> : Defines a section of navigation links, often used to create menus or navigation bars.
• <main> : Indicates the main content area of a webpage, such as articles, blog posts, or the primary focus of the page.
• <section> : Defines a logical section within a document, allowing you to divide your content into meaningful blocks.
• <article> : Represents a self-contained composition or article that can be independently distributed or reusable within a document.
• <aside> : Represents content that is tangentially related to the main content, often used for sidebars or additional information.
• <footer> : Represents the footer section of a webpage, typically containing copyright information, links to legal notices, or contact details.

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.

Inline Styles :

Edit Copy Hide

<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.

Edit Copy Hide

<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.

Edit Copy Hide

<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.