HTML Basics

HTML Layout

A good page layout divides content into clear regions. HTML5 provides semantic elements that describe each region, making pages easier to build, style, and read.

Semantic Layout Elements

Instead of using plain div elements everywhere, HTML5 offers named containers that describe their purpose. Search engines and assistive technology understand them better.

Element	Represents
<header>	Top area with logo, title, or intro content
<nav>	A block of navigation links
<main>	The main unique content of the page
<section>	A thematic grouping of content
<article>	A self-contained piece, like a blog post
<aside>	Side content such as ads or related links
<footer>	Bottom area with copyright or contact info

A Typical Page Layout

Semantic page structure

<body>
  <header>
    <h1>My Website</h1>
    <nav><a href="/">Home</a> <a href="/about">About</a></nav>
  </header>

  <main>
    <article>
      <h2>Latest Post</h2>
      <p>Some content here.</p>
    </article>
    <aside>Related links</aside>
  </main>

  <footer>&copy; 2026 My Website</footer>
</body>

ℹ️

Use only one <main> element per page. Semantic layout elements do not add any visual style by themselves; you use CSS to arrange them into columns and rows.

HTML Layout

Semantic Layout Elements

A Typical Page Layout

Ready to use your HTML skills?