Prev Next

HTML Layout

HTML layout involves structuring your page content using elements like <header>, <nav>, <section>, <aside>, and <footer>. These semantic elements give meaning to different parts of the page, improving accessibility and SEO. Use CSS for positioning and advanced layouts.

Key Topics

Semantic Layout Elements

Example: Using HTML5 semantic tags for common layout sections.

<header>Site Header</header>
<nav>Navigation Links</nav>
<section>Main Content</section>
<aside>Sidebar Information</aside>
<footer>Page Footer</footer>

Layout Example

This example shows a basic semantic layout. A full code sample is provided below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Layout Example</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
    <section>
        <h2>Welcome</h2>
        <p>This is the main content area.</p>
    </section>
    <aside>
        <p>Additional info or ads can go here.</p>
    </aside>
    <footer>
        <p>Copyright 2023</p>
    </footer>
</body>
</html>

Explanation: The semantic elements convey the purpose of each section. This improves readability, maintainability, and helps search engines understand the structure of your webpage.

Key Takeaways

  • Use semantic elements to structure layouts logically.
  • <header>, <section>, <article>, <aside>, and <footer> improve clarity and accessibility.
  • Combine semantic HTML with CSS for advanced layouts (e.g., Flexbox, Grid).
  • Semantic layouts are easier to maintain and enhance SEO.
  • Think about content structure first, then apply styling and positioning.
Prev Next