Layout & Semantics

Page Layout

A "layout" is how a page's sections are arranged — header, sidebar, main content, footer.

<body>
  <header>Top navigation</header>
  <div class="layout">
    <aside class="sidebar">Side navigation</aside>
    <main class="content">Page content</main>
  </div>
  <footer>Bottom footer</footer>
</body>

This maps directly onto the CSS classes: a .layout wrapper holding the sidebar and <main class="content"> side by side.

• Flexbox — great for one-dimensional layouts (a row or column), like this site's sidebar + content split
• CSS Grid — better for two-dimensional layouts (rows AND columns), like a card gallery

Responsive Design

A responsive page adapts to any screen size — desktop, tablet, mobile.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

@media (max-width: 800px) {
  .layout { flex-direction: column; }
}

• Always include the viewport meta tag — without it, mobile browsers fake a desktop-width screen
• @media queries let CSS change based on screen width
• This site's own stylesheet stacks the sidebar above the content below 800px width

Semantic Elements

A semantic element clearly describes its meaning — unlike a plain <div>, which says nothing about what's inside.

<header>Site logo and navigation</header>
<nav>Main navigation links</nav>
<main>The primary content of the page</main>
<article>A self-contained piece of content</article>
<section>A themed group of content</section>
<aside>Sidebar / related content</aside>
<footer>Copyright, links, contact info</footer>

Why bother: better SEO, screen readers can jump to "navigation" or "main content" directly, and other developers understand your code faster.