HTML Page Layout

Intermediate ~12 min read

Semantic Page Structure

HTML5 introduced semantic elements that describe the purpose of content, making pages more meaningful to browsers, search engines, and screen readers.

Core Layout Elements

<header> - Introductory content, navigation
<nav> - Navigation links
<main> - Main unique content (only one per page)
<footer> - Footer content, copyright, links

HTML

CSS

<header style="background: #1976d2; color: white; padding: 20px;">\n  <h1>My Website</h1>\n  <nav>\n    <a href="#" style="color: white; margin-right: 15px;">Home</a>\n    <a href="#" style="color: white; margin-right: 15px;">About</a>\n    <a href="#" style="color: white;">Contact</a>\n  </nav>\n</header>\n\n<main style="padding: 20px;">\n  <h2>Welcome</h2>\n  <p>This is the main content area.</p>\n</main>\n\n<footer style="background: #333; color: white; padding: 15px; text-align: center;">\n  <p>© 2024 My Website</p>\n</footer>

The Article Element

<article> represents independent, self-contained content that could be distributed separately (blog posts, news articles, comments).

HTML

CSS

<article style="border: 1px solid #ddd; padding: 20px; margin: 10px 0;">\n  <header>\n    <h2>Blog Post Title</h2>\n    <p style="color: #666;">Posted on January 15, 2024</p>\n  </header>\n  <p>This is the article content. Articles represent independent, self-contained content.</p>\n  <footer>\n    <p>Written by: John Doe</p>\n  </footer>\n</article>

Section and Aside

<section> - Thematic grouping of content with a heading
<aside> - Content tangentially related (sidebars, pull quotes)

HTML

CSS

<div style="display: flex; gap: 20px;">\n  <main style="flex: 1;">\n    <section style="background: #e3f2fd; padding: 15px; margin-bottom: 15px;">\n      <h2>Section 1</h2>\n      <p>Sections group related content.</p>\n    </section>\n    <section style="background: #e8f5e9; padding: 15px;">\n      <h2>Section 2</h2>\n      <p>Another thematic section.</p>\n    </section>\n  </main>\n  <aside style="width: 200px; background: #fff3e0; padding: 15px;">\n    <h3>Sidebar</h3>\n    <p>Related links, ads, or extra info.</p>\n  </aside>\n</div>

SEO Benefit: Search engines use semantic elements to better understand your content structure and importance.

Quick Quiz

How many <main> elements should a page have?

One

Multiple

None required

Two

Previous Classes & IDs

Next HTML Entities

Semantic Page Structure

Core Layout Elements

The Article Element

Section and Aside

Quick Quiz

Enjoying these tutorials?