English العربية Português Japanese

HTML Layout

Web page layout determines what a page "looks like" — where the header goes, how the navigation bar is arranged, and how the content area and sidebar are positioned. Good layout makes pages clear, readable, and adaptable to various screens.

What Is HTML Layout

HTML layout divides a web page into several functional areas: header, navigation bar (nav), main content area (main), sidebar (aside), and footer. In the early days, <div> combined with CSS was commonly used to achieve layout:

HTML 
<!DOCTYPE html>
<html>
<head>
<style>
  body { margin: 0; font-family: sans-serif; }
  .header { background: #4a90d9; color: #fff; padding: 20px; text-align: center; }
  .nav { background: #333; color: #fff; padding: 10px; text-align: center; }
  .nav a { color: #fff; margin: 0 10px; text-decoration: none; }
  .container { display: flex; }
  .main { flex: 3; padding: 20px; background: #f4f4f4; }
  .sidebar { flex: 1; padding: 20px; background: #e4e4e4; }
  .footer { background: #333; color: #fff; padding: 15px; text-align: center; }
</style>
</head>
<body>
  <div class="header"><h1>My Website</h1></div>
  <div class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </div>
  <div class="container">
    <div class="main"><h2>Main Content</h2><p>This is the main content area of the page.</p></div>
    <div class="sidebar"><h3>Sidebar</h3><p>Place ads or related links here.</p></div>
  </div>
  <div class="footer">&copy; 2025 My Website</div>
</body>
</html>
▶ Try It Yourself

The example above uses <div> with class and style to implement a classic "header-content-footer" layout, where the middle section is further divided into a main content area and a sidebar. The downside of this approach is that the HTML tags themselves can't express what each area represents — all sections use <div>, making the semantics unclear.

Semantic Layout

HTML5 introduced semantic tags, replacing <div> with meaningful tags:

HTML 
<!DOCTYPE html>
<html>
<head>
<style>
  body { margin: 0; font-family: sans-serif; }
  header { background: #4a90d9; color: #fff; padding: 20px; text-align: center; }
  nav { background: #333; color: #fff; padding: 10px; text-align: center; }
  nav a { color: #fff; margin: 0 10px; text-decoration: none; }
  .container { display: flex; }
  main { flex: 3; padding: 20px; background: #f4f4f4; }
  aside { flex: 1; padding: 20px; background: #e4e4e4; }
  footer { background: #333; color: #fff; padding: 15px; text-align: center; }
</style>
</head>
<body>
  <header><h1>My Website</h1></header>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </nav>
  <div class="container">
    <main>
      <section>
        <h2>Latest Articles</h2>
        <p>This is the article content.</p>
      </section>
    </main>
    <aside>
      <h3>Related Links</h3>
      <p>Sidebar content.</p>
    </aside>
  </div>
  <footer>&copy; 2025 My Website</footer>
</body>
</html>
▶ Try It Yourself
💡 Semantic Layout vs Div Layout: Semantic tags are more friendly to search engines (SEO) and assistive technologies (screen readers). Search engines prioritize analyzing content inside <main>, and screen readers can directly jump to <nav>. The code is also clearer — you know what each area does just by looking at the tag names, without needing to guess from class names.

Introduction to Flexbox

display: flex is a flexible layout model provided by CSS3 that allows child elements to automatically align horizontally or vertically. You just need to set display: flex on the container, and the child elements will "line up" automatically. Here's a horizontal navigation bar built with Flexbox:

HTML 
<!DOCTYPE html>
<html>
<head>
<style>
  nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    background: #333;
  }
  nav ul li a {
    display: block;
    padding: 14px 24px;
    color: #fff;
    text-decoration: none;
  }
  nav ul li a:hover {
    background: #575757;
  }
</style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>
▶ Try It Yourself
💡 Flexbox and Grid are the core of modern CSS layout. Flexbox excels at one-dimensional arrangement (horizontal or vertical), while Grid excels at two-dimensional layouts (controlling rows and columns simultaneously). It's recommended to systematically study CSS tutorials after learning HTML to master these two powerful tools.

Common Flexbox properties include justify-content (horizontal alignment), align-items (vertical alignment), and gap (spacing). The navigation bar above uses just one line — display: flex — to turn list items from vertical to horizontal arrangement, which is very concise.

📖 Summary

📝 Exercises

  1. Personal Homepage Layout: Use semantic tags to build a personal homepage including header (site title), nav (navigation links), main (self-introduction + portfolio section), aside (contact info), and footer (copyright notice). Use display: flex to make the navigation bar horizontal.
  2. Three-Column Layout: Use <div> to implement a left-center-right three-column layout where the center column is adaptive and the left and right columns are fixed at 200px. (Hint: use Flexbox's flex property to control proportions)
← Previous: HTML Semantics Next: HTML Responsive Images →
100%