HTML Layouts & Elements In Details

HTML Layouts

HTML Layout refers to the process of structuring and organizing the content on a web page. It involves creating a visual hierarchy of the different elements on the page and arranging them in a way that makes the content easy to read and navigate.

HTML provides a range of layout elements and techniques that web developers can use to structure their web pages. These include using headings, paragraphs, lists, and tables to organize content, as well as CSS layout techniques like flexbox and CSS grid to create more complex layouts.

The goal of HTML Layout is to create a well-organized and visually appealing web page that is easy for users to navigate and understand. A well-designed layout can help to improve the user experience and make it more likely that users will engage with the content on the page.

HTML Layouts Elements

HTML provides several layout elements that you can use to structure the content on your web page.Here are some commonly used HTML layout elements:

  1. <header>: The <header> element is used to define the header section of a web page. It typically contains the page’s logo, navigation menu, and other important information.
  2. <nav>: The <nav> element is used to define the navigation section of a web page. It typically contains links to other pages on the website.
  3. <main>: The <main> element is used to define the main content section of a web page. It typically contains the primary content of the page, such as articles, images, and videos.
  4. <section>: The <section> element is used to define a section of a web page. It can be used to group related content together, such as a group of articles or a set of images.
  5. <aside>: The <aside> element is used to define a section of a web page that is not directly related to the main content. It typically contains additional information, such as a sidebar or a call-to-action.
  6. <footer>: The <footer> element is used to define the footer section of a web page. It typically contains copyright information, contact details, and links to social media profiles.

These are just a few of the many layout elements available in HTML. You can use these elements to structure your web page in a way that makes it easy to navigate and understand.

Various layout elements are described:

HTML <header>

The <header> element in HTML is used to define the header section of a web page. It typically contains the page’s logo, navigation menu, and other important information.

Example of <header> element
<!DOCTYPE html>
<html>
  <head>
    <title>My Devsenv Page</title>
  </head>
  <body>
    <header  style="background-color: hsl(0, 3%, 6%); padding: 5px;  height: 100%; width: 100%">
      <img src="https://i.ibb.co/7JhTXfn/banner.png" alt="banner" border="0">
      <h2 style="font-size: 30px; color: white;text-align: center;">Wellcome my webpage</h2>
	</header>
  </body>
</html>
Live Preview
banner

Wellcome my webpage

HTML <nav>

The <nav> element in HTML is used to define a section of a web page that contains navigation links, such as a menu or a list of links to other pages.

Example of <nav> element
<!DOCTYPE html>
<html>
  <head>
    <title>My Devsenv Page</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </body>
</html>
Output:
nav-img

HTML <main>

The <main> element in HTML is used to define the main content of a web page. It should contain content that is unique to the page, and not shared by other pages on the website.

Example of <main> element
<!DOCTYPE html>
<html>
  <head>
    <title>My Devsenv Page</title>
  </head>
  <body>
      <h1>Welcome to My Web Page</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </body>
</html>
Live Preview

Welcome to My Web Page

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

In this example, the <main> element contains the primary content of the web page, including a heading and a paragraph of text.

HTML <section>

The <section> element in HTML is used to define a section of a web page. It is typically used to group together related content, such as a group of articles or a section of a long article.

Example of <section> element
<!DOCTYPE html>
<html>
<head>
  <title>My Devsenv Page</title>
</head>
<body>
      <header>
      <img src="https://i.ibb.co/7JhTXfn/banner.png" alt="banner" border="0">
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <h2>Featured Articles</h2>
        <article>
          <h3>Article 1</h3>
          <p>Lorem ipsum dolor sit amet</p>
        </article>
        <article>
          <h3>Article 2</h3>
          <p>My devsenv website</p>
        </article>
      </section>
      <section>
        <h2>Latest News</h2>
        <article>
          <h3>News Article 1</h3>
          <p>Now I am learning HTML</p>
        </article>
        <article>
          <h3>News Article 2</h3>
          <p>Hello, My website is very easy to learning html</p>
        </article>
      </section>
    </main>
</body>
</html>
Live Preview
banner

Featured Articles

Article 1

Lorem ipsum dolor sit amet

Article 2

My devsenv website

Latest News

News Article 1

Now I am learning HTML

News Article 2

Hello, My website is very easy to learning html

HTML <aside>

The <aside> element in HTML is used to define content that is not directly related to the main content of a web page, but is still considered supplementary or additional information.

Example of <aside> element
<!DOCTYPE html>
<html>
  <head>
    <title>My Devsenv Page</title>
  </head>
  <body>
        <header>
          <img src="https://i.ibb.co/7JhTXfn/banner.png" alt="banner" border="0">
          <nav>
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </nav>
        </header>
        <main>
          <section>
            <h2>Featured Articles</h2>
            <article>
              <h3>Article 1</h3>
              <p>Lorem ipsum dolor sit amet</p>
            </article>
            <article>
              <h3>Article 2</h3>
              <p>My devsenv website</p>
            </article>
          </section>
          <section>
            <h2>Latest News</h2>
            <article>
              <h3>News Article 1</h3>
              <p>Now I am learning HTML</p>
            </article>
            <article>
              <h3>News Article 2</h3>
              <p>Hello, My website is very easy to learning html</p>
            </article>
          </section>
          <aside>
            <h2>About the Author</h2>
            <p>Akash is a software Engineer</p>
          </aside>
  </body>
</html>
Live Preview
banner

Featured Articles

Article 1

Lorem ipsum dolor sit amet

Article 2

My devsenv website

Latest News

News Article 1

Now I am learning HTML

News Article 2

Hello, My website is very easy to learning html

In this example, the <aside> element contains information about the author of the content on the web page. This information is not directly related to the main content of the web page, but is still considered supplementary or additional information.

HTML <footer>

The <footer> element in HTML is used to define a footer for a web page or a section within a web page. It typically contains information about the author, copyright, contact information, or other related links.

Example of <footer> element
<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
      <header>
        <img src="https://i.ibb.co/7JhTXfn/banner.png" alt="banner" border="0">
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      </header>
      <main>
        <h1>Welcome to my web page</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna et mi suscipit luctus. Nunc rutrum, sem in iaculis consequat, lectus mauris aliquet nulla, sit amet malesuada ex nibh eu velit.</p>
      </main>
      <footer>
        <p>© 2023 My webpage</p>
        <nav>
          <ul>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Terms of Use</a></li>
          </ul>
        </nav>
      </footer>
  </body>
</html>
Live Preview
banner

Welcome to my web page

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna et mi suscipit luctus. Nunc rutrum, sem in iaculis consequat, lectus mauris aliquet nulla, sit amet malesuada ex nibh eu velit.

In this example, the <footer> element contains the copyright information and related links for the web page.

HTML Layout Techniques

HTML provides several layout techniques that you can use to structure the content on your web page. Here are some commonly used HTML layout techniques:

  1. Tables: Tables are a simple way to create a grid of rows and columns to organize your content. You can use the <table>, <tr>, <td>, and <th> tags to create a table.
  2. Flexbox: Flexbox is a powerful layout technique that allows you to create flexible and responsive layouts. You can use the CSS display:flex property to create a flex container and the flex-direction, justify-content, and align-items properties to control the layout of the flex items.
  3. CSS Grid: CSS Grid is a newer layout technique that allows you to create complex grid layouts with ease. You can use the display:grid property to create a grid container and the grid-template-columns, grid-template-rows, and grid-gap properties to control the layout of the grid items.
  4. Floats: Floats are an older layout technique that are still commonly used today. You can use the float property to position elements to the left or right of the parent container and create column-based layouts.
  5. Positioning: Positioning is a powerful layout technique that allows you to precisely position elements on your web page. You can use the position property to set an element’s position to static, relative, absolute, or fixed, and the top, right, bottom, and left properties to control the element’s position.

HTML Tables layouts

HTML tables are used to display data in a tabular format. They can be used to organize and present information in a clear and organized way. Here’s an example of how to create a simple table in HTML:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Tables layouts</title>
</head>
<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
    <tr>
      <td>Jahangir</td>
      <td>25</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Jamy</td>
      <td>22</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>Rony</td>
      <td>30</td>
      <td>Male</td>
    </tr>
  </table>
</body>
</html>
Output:
table-layout

In this example, we have created a simple table with three columns: Name, Age, and Gender. The first row contains the column headers, which are defined using the <th> element. The subsequent rows contain the data, which is defined using the <td> element.

We can also add some styles to the table to make it look more visually appealing. Here’s an example:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Tables layouts</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
  
    th, td {
      padding: 8px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
  
    th {
      background-color: #f2f2f2;
    }
  
    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
    <tr>
      <td>Jahangir</td>
      <td>25</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Jamy</td>
      <td>22</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>Rony</td>
      <td>30</td>
      <td>Male</td>
    </tr>
  </table>
</body>
</html>
Live Preview
Name Age Gender
Jahangir 25 Male
Jamy 22 Female
Rony 30 Male

In this example, we have added some CSS styles to the table to give it a more polished look. The border-collapse property is used to collapse the borders between cells, making the table look more compact. The width property is used to make the table span the full width of its container.

The padding property is used to add some space around the content of each cell, and the text-align property is used to align the content of the cells to the left.

The border-bottom property is used to add a horizontal line between each row, and the background-color property is used to add alternating colors to the rows, making it easier to read the data in the table.

Html Flexbox layouts

HTML flexbox is a powerful layout system that allows you to easily create flexible and responsive layouts. It provides a simple way to align and distribute elements within a container, without having to rely on floats, positioning, or other complicated layout techniques.

Here’s an example of how to create a simple flexbox layout in HTML:

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

In this example, we have created a container element with three child elements. We can use CSS to turn this container into a flexbox and control the layout of the child elements:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Flexbox layouts</title>
  <style>
    .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      color: white;
      text-align: center;
      line-height: 100px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>
</body>
</html>
Output:
flexbox-img

In this CSS code, we have set the display property of the container element to flex, which turns it into a flex container. We have also set the justify-content property to space-between, which distributes the child elements evenly along the main axis of the flex container. The align-items property is set to center, which centers the child elements along the cross axis.

We have also added some styles to the child elements using the .box class. These styles set the width, height, and background color of the boxes, as well as some text formatting properties to make the text inside the boxes centered and vertically aligned.

Html CSS Grid layouts

HTML CSS Grid is another powerful layout system that allows you to create complex layouts using a grid of rows and columns. It provides a flexible and intuitive way to control the placement of elements on a webpage.

Here’s an example of how to create a simple grid layout in HTML:

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
</div>

n this example, we have created a container element with six child elements. We can use CSS grid to turn this container into a grid and control the layout of the child elements:

<!DOCTYPE html>
<html>
<head>
  <title>HTML CSS Grid layouts</title>
  <style>
    .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      color: white;
      text-align: center;
      line-height: 100px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
     <div class="box">Box 4</div>
    <div class="box">Box 5</div>
  </div>
</body>
</html>
Live Preview
gird-img

In this CSS code, we have set the display property of the container element to flex, which turns it into a flex container. We have also set the justify-content property to space-between, which distributes the child elements evenly along the main axis of the flex container. The align-items property is set to center, which centers the child elements along the cross axis.

Html floats layouts

HTML floats are a layout technique that allows you to position elements side by side within a container. This technique is commonly used to create multi-column layouts, such as magazine-style websites.

Here’s an example of how to create a simple float-based layout in HTML:

<div class="container">
  <div class="left-column">Left column content</div>
  <div class="right-column">Right column content</div>
</div>

In this example, we have created a container element with two child elements. We can use CSS floats to position these elements side by side:

<!DOCTYPE html>
<html>
<head>
  <title>Html floats layouts</title>
  <style>
    .container {
      overflow: hidden;
    }
  
    .left-column {
      float: left;
      width: 50%;
      background-color: aqua;
    }
  
    .right-column {
      float: right;
      width: 50%;
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left-column">Left column content</div>
    <div class="right-column">Right column content</div>
  </div>
</body>
</html>
Live Preview
Left column content
Right column content

In this CSS code, we have set the float property of the left-column and right-column elements to left and right, respectively. We have also set the width of both columns to 50% so that they take up equal space within the container and background-color of columns aqua and green. Finally, we have added the overflow property to the container element and set it to hidden to ensure that the columns stay within the container.

Html Positioning layouts

HTML positioning is a layout technique that allows you to precisely control the position of elements on a webpage. It can be used to create complex layouts and design elements that are difficult to achieve with other layout techniques.

  1. Static positioning: This is the default positioning for HTML elements. Elements with static positioning are positioned according to the normal flow of the document.
  2. Relative positioning: Elements with relative positioning are positioned relative to their normal position in the document flow. You can use the top, bottom, left, and right properties to adjust the position of the element relative to its normal position.
  3. Absolute positioning: Elements with absolute positioning are positioned relative to their nearest positioned ancestor element. If there is no positioned ancestor, the element is positioned relative to the document body. You can use the top, bottom, left, and rightt properties to adjust the position of the element.
  4. Fixed positioning: Elements with fixed positioning are positioned relative to the viewport and do not move when the user scrolls the page. You can use the top, bottom, left, and right properties to adjust the position of the element.

Here’s an example of how to create a simple positioned element in HTML:

<div class="container">
  <div class="positioned-element">Positioned element</div>
</div>

In this example, we have created a container element with a child element. We can use CSS positioning to position the child element within the container:

<!DOCTYPE html>
<html>
<head>
  <title>Html Positioning layouts</title>
  <style>
    .container {
      position: relative;
      width: 300px;
      height: 200px;
      background-color: lightgray;
    }
  
    .positioned-element {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: red;
      color: white;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="positioned-element">Positioned element</div>
  </div>
</body>
</html>
Live Preview
position-img

In this CSS code, we have set the position property of the container element to relative, which allows us to position the child element relative to the container. We have also set the width, height, and background-color properties to create a visual container for the positioned element.

We have set the position property of the child element to absolute, which allows us to position it within the container. We have used the top and left properties to center the element within the container, and the transform property to adjust its position precisely. Finally, we have added some styles to the child element to give it a background color, text color, and padding.

Overall, HTML positioning is a powerful tool for creating precise layouts and design elements on a webpage. It can be tricky to work with, however, and can cause issues with other layout elements on the page. As such, it is best used sparingly and in combination with other layout techniques such as CSS Grid and Flexbox.

Previous
HTML Links - In Depth details with Practical example of HTML Links