HTML Tutorial

HTML LAYOUT

HTML Layout

HTML layout refers to the structure and organization of content on a web page. You can create layouts using HTML tags and CSS for styling and positioning elements.

Common Layout Tags

<header> – Top section, usually for logo or navigation
<nav> – Contains navigation links
<main> – Main content area
<section> – Used to group related content
<article> – For self-contained content (like a blog post)
<aside> – Sidebar or additional info
<footer> – Bottom section, usually for copyright or contact info

Example Layout

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Layout Example</title>
  </head>
  <body>

    <header>
      <h1>My Website</h1>
    </header>

    <nav>
      <a href="#">Home</a> |
      <a href="#">About</a> |
      <a href="#">Contact</a>
    </nav>

    <main>
      <section>
        <h2>Welcome</h2>
        <p>This is the main section of the page.</p>
      </section>

      <aside>
        <p>This is a sidebar.</p>
      </aside>
    </main>

    <footer>
      <p>Copyright © 2025</p>
    </footer>

  </body>
</html>

Layout with CSS

CSS is used to style and position layout elements. You can use techniques like Flexbox or Grid for responsive and modern layouts.

Tips

Use semantic tags for better accessibility and SEO
Use CSS for layout control instead of tables
Keep layout simple and mobile-friendly

Conclusion

HTML layout tags provide a clean structure to your website. Combined with CSS, they create responsive and organized pages.

🌟 Enjoyed Learning with Us?

Help others discover Technorank Learning by sharing your honest experience.
Your support inspires us to keep building!

Leave a Google Review

Topics