HTML Layout

❮ Prev Next ❯

HTML provides several elements and techniques to create a structured layout for web pages. Here are some of the most commonly used ones:

The<head> and <nav> Element

The <head>element is used to create a container for introductory content, such as a logo or navigation links, typically at the top of the web page.

The <nav>element is used to create a container for navigationlinks, such as a menu or a list of links to different pages on the website.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
    <header>
      <img src="../../images/logo/logo.png" alt="Company Logo">
      <nav>
        <a href="home.html">Home</a>
        <a href="about.html">About</a>
        <a href="contact.html">Contact</a>
      </nav>
    </header>
    </body>
</html>

The<section>and<article>Element

The <section>element is used to create a container for content that is thematically related, such as a group of blog posts or a product listing.

The <article>element is used to create a container for content that is independent and self-contained, such as a blog post or a news article

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
    <section>
      <h2>Latest Blog Posts</h2>
      <article>
        <h3>Blog Post 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </article>
      <article>
        <h3>Blog Post 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </article>
    </section>
    </body>
</html>

The<aside>Element

The <aside>element is used to create a container for content that is related to the main content, but not central to it, such as a sidebar or an advertisement.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
    <section>
      <h2>Latest Blog Posts</h2>
      <article>
        <h3>Blog Post 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </article>
      <article>
        <h3>Blog Post 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </article>
      <aside>
        <h3>Advert</h3>
        <img src="../../images/logo/logo.png" alt="Advertisement Picture">
      </aside>
    </section>
    </body>
</html>

The<footer>Element

The <footer>element is used to create a container for content that appears at the bottom of the web page, such as copyright information or contact details.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
    <section>
      <h2>Latest Blog Posts</h2>
      <article>
        <h3>Blog Post 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </article>
      <article>
        <h3>Blog Post 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </article>
      <aside>
        <h3>Advert</h3>
        <img src="../../images/logo/logo.png" alt="Advertisement Picture">
      </aside>
      </section>
      <footer>
        <p>copyright:© 2023 Company Name</p>
        <p>Contact Us: 123 Main Street, Anytown, USA</p>
      </footer>
    </body>
</html>

CSS Techniques:

CSS can be used to create more complex layouts by applying various techniques, such as using floats, flexbox, and grid systems.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
    <style>
    .container{
      width :100%;
      overflow :hidden;
    }
    .left{
      width :70%;
      float :left;
    }
    .right{
      width :30%;
      float :right;
    }
    </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
    <div class="container">
      <div class="left">Left column content goes here</div>
      <div class="right">right column content goes here</div>
    </div>
    </body>
</html>

This code creates a basic two-column layout using CSS floats. The outer <div> element has a class of "container", which is used to set the width of the entire container and hide any overflow.

Inside the container, there are two<div>elements with classes of "left" and "right" The left column has a width of 70% and is floated to the left, while the right column has a width of 30% and is also floated to the left.

This technique can be used to create many different types of layouts, such as three-column layouts or responsive layouts that adjust based on screen size.

CSS Grid:

CSS Grid is a powerful layout tool that allows you to create complex layouts with ease. It is a two-dimensional grid system that allows you to create rows and columns and place elements within them.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
    <style>
    .grid-container{
      display :grid;
      grid-template-columns :repeat(3, 1fr);
      grid-template-rows :repeat(2, 1fr);
      gap :10px;
    }
    .grid-item{
      background-color :#ddd;
      padding :20px;
      text-align :center;
      font-size :30px;
    }
    </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
    <div class="grid-container">
      <div class="grid-item">1</div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
      <div class="grid-item">5</div>
      <div class="grid-item">6</div>
    </div>
    </body>
</html>

The CSS Flexbox:

Flexboxis another layout technique that allows you to create flexible and responsive layouts. It is a one-dimensional layout system that allows you to arrange elements in rows or columns.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
    <style>
    .flex-container{
      display :flex;
      flex-wrap :wrap;
      justify-content :space-between;
      align-items :center
    }
    .flex-item{
      background-color :#ddd;
      padding :20px;
      text-align :center;
      font-size :30px;
      width :30%;
      margin-bottom :10px;
    }
    </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
    <div class="flex-container">
      <div class="flex-item">1</div>
      <div class="flex-item">2</div>
      <div class="flex-item">3</div>
      <div class="flex-item">4</div>
      <div class="flex-item">5</div>
      <div class="flex-item">6</div>
    </div>
    </body>
</html>

These are just a few examples of HTML layout elements and techniques. There are many other ways to create layouts using HTML and CSS, depending on your specific needs and preferences. Lets us see how to make a web page Responsive in the next chapter.

❮ Prev Next ❯