Loading...

HTML Layout

Layout is how regions sit on the screen. In modern sites, HTML chooses meaningful regions; CSS places them (rows, columns, gaps).

Direct answer

Build a skeleton with header, nav, main, optional aside, and footer. Style columns with CSS (flexbox/grid come later in CSS courses). Do not rebuild the whole page as a layout table.

Landmark layout skeleton

html
HTML Code 
<body>
<header><h1>News</h1></header>
<div class="row">
<main>
<article><h2>Story</h2><p>Content…</p></article>
</main>
<aside><h2>Related</h2><p>Links…</p></aside>
</div>
<footer><p>Contact</p></footer>
</body>

The div.row here is only a styling hook for a future CSS row. The meaning still sits in main and aside.

Try it

  1. Create header / main / aside / footer landmarks
  2. Put unique article content in main
  3. Add a side note in aside
  4. Sketch on paper where CSS will place columns later

Easy mistakes

  • Giant layout tables for the whole site
  • Skipping main so tools cannot find primary content
  • Nesting landmarks randomly without a clear page story

Summary

  • Landmarks form the layout skeleton
  • CSS handles visual placement
  • Avoid table-based page layouts
  • Keep one clear main region

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
4
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Html Tutorial