Demon Tech Roadmap

HTML

HTML Layout Elements

HTML layout elements define the structure of a web page.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

HTML uses semantic elements to divide a page into logical sections. Elements like `

`, `

Syntax

1<!-- layout syntax -->
2<header>Top bar</header>
3<main>Core content</main>
4<footer>Bottom bar</footer>

Example

1<!-- this builds a page layout -->
2<!DOCTYPE html>
3<html lang="en">
4  <head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Layout</title>
8  </head>
9  <body>
10    <header><h1>Site Logo</h1></header>
11    <nav><a href="#">Home</a></nav>
12    <main><p>Content here.</p></main>
13    <footer><p>Copyright 2026</p></footer>
14  </body>
15</html>

Try it Yourself

Hands-on Practice

Modify the code below to see how it affects the output. This is the best way to learn!

Interactive Editor

1234567891011121314151617181920

Live Preview

Key Points

Semantic tags name page sections clearly.
The `
` tag holds the logo and nav.
The `
` tag contains the primary content.
The `
` tag sits at the bottom.

Up Next

Continue your journey with the next topic.

Go to HTML Responsive ❯