HTML · Chapter 28 of 45

HTML Layout Techniques

Modern HTML layouts use semantic structural elements like <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer> combined with CSS Flexbox or Grid for positioning.

These semantic tags replace older approaches that relied purely on generic <div> containers, improving both accessibility and code readability.

Syntax

<header>...</header><main>...</main><footer>...</footer>

Semantic layout tags

<header> holds intro content or navigation, <main> holds the primary unique content, <aside> holds tangential content like sidebars, and <footer> holds closing info like copyright.

CSS for positioning

Flexbox (display:flex) and Grid (display:grid) are the modern CSS tools for arranging these semantic sections visually on the page.

Example 1 (html)

<header><h1>My Site</h1></header>
<main><p>Main content here.</p></main>
<footer><p>&copy; 2024</p></footer>

Output

My Site
Main content here.
© 2024

A basic semantic page layout with header, main, and footer.

Example 2 (html)

<div style="display:flex;">
  <nav>Menu</nav>
  <main>Content</main>
</div>

Output

Menu  Content

Flexbox arranges nav and main side-by-side.

Key points

Semantic tags like header/main/footer describe layout meaning.
<main> should contain the page's unique primary content, used once per page.
Flexbox and Grid are the standard CSS layout tools.
Semantic layout improves accessibility and SEO.

💡 Note: Avoid nesting a <main> inside another <main> — there should only be one per page.

HTML Layout Techniques

Semantic layout tags

CSS for positioning

Key points

📝 Quick Quiz