« Previous Next »

Layouts in HTML

HTML layouts organize content for better presentation and usability. With CSS, you can create layouts that enhance the structure and flow of the content. Below are some popular layout techniques and examples of each.

Why Use Layouts?

Layouts help display information in a structured, easy-to-read format. They also help create responsive designs that adjust well on various screen sizes, from desktops to mobile devices.

Examples of Layouts in HTML

1. Single-Column Layout

This layout places all content in a single vertical column, useful for mobile or simple web pages.

Basic Code Examples

          
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Welcome To My Layouts Page</title>
        </head>
        <body> 
          <div>
            <h2>Single Column</h2>
            <p>This is a single-column layout example. All content is stacked vertically.</p>
          </div>
        </body>
      </html>

Output

                    
          
            Single Column
            This is a single-column layout example. All content is stacked vertically.

2. Two-Column Layout (Table-based)

In the absence of CSS, tables can be used to simulate a two-column layout. Each cell represents a column.

Basic Code Examples

          
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Welcome To My Layouts Page</title>
        </head>
        <body>
          <table border="1" cellpadding="10">
            <tr>
              <td>
                <h3>Sidebar</h3>
                <p>This is the sidebar area.</p>
              </td>
              <td>
                <h3>Main Content</h3>
                <p>This is the main content area.</p>
              </td>
            </tr>
          </table>           
        </body>
      </html>

Output

                    
          
            
             
               Sidebar
               This is the sidebar area.
             
             
               Main Content
               This is the main content area.

3. Multi-Column Layout (Nested Tables)

A multi-column layout can be created by nesting tables within cells. This approach divides content into multiple sections.

Basic Code Examples

          
        <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Welcome To My Ifarme Page</title>
          </head>
          <body>
            <table border="1" cellpadding="10">
              <tr>
                <td>
                  <h3>Column 1</h3>
                  <p>Content for the first column.</p>
                </td>
                <td>
                  <h3>Column 2</h3>
                  <p>Content for the second column.</p>
                </td>
                <td>
                  <h3>Column 3</h3>
                  <p>Content for the third column.</p>
                </td>
              </tr>
            </table>    
          </body>
        </html>

Output

                      
            
              
               
                 Column 1
                 Content for the first column.
               
               
                 Column 2
                 Content for the second column.
               
               
                 Column 3
                 Content for the third column.

4. Header and Footer Layout

This layout includes a header, content section, and footer arranged vertically.

Basic Code Examples

          
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Welcome To My Ifarme Page</title>
        </head>
        <body>
          <div>
            <h2>Header</h2>
            <p>This is the header section, usually containing a logo and navigation links.</p>
          </div>
          <div>
            <h2>Main Content</h2>
            <p>This is the main content area where the bulk of the content goes.</p>
          </div>
          <div>
            <h2>Footer</h2>
            <p>This is the footer section, typically containing copyright or contact information.</p>
          </div>    
        </body>
      </html>

Output

                    
          
            Header
            This is the header section, usually containing a logo and navigation links.
          
          
            Main Content
            This is the main content area where the bulk of the content goes.
          
          
            Footer
            This is the footer section, typically containing copyright or contact information.

Conclusion

HTML layouts provide basic structural elements to arrange content meaningfully. This layout foundation helps create a coherent and navigable webpage.

« Previous Next »