SEMANTIC11 min25 XP

Semantic Layout

Learn Semantic Layout with live examples, interactive editor, and Shiv AI code review.

Semantic HTML Layout

Semantic HTML uses tags that describe their meaning — not just their appearance. HTML5 introduced layout tags like <header>, <nav>, <main>, <article>, <aside>, and <footer> to replace meaningless <div> soup.

Complete Semantic Page Layout

Example 1 — Real Page Structure

<body>

  <!-- Site-wide header with logo and navigation -->
  <header>
    <a href="/">CIWeb</a>
    <nav aria-label="Main navigation">
      <a href="/">Home</a>
      <a href="/courses">Courses</a>
    </nav>
  </header>

  <!-- Main content area -->
  <main>

    <!-- A self-contained blog post -->
    <article>
      <h1>Learn HTML in 22 Lessons</h1>
      <p>HTML is the foundation...</p>

      <!-- Section within the article -->
      <section>
        <h2>Why Learn HTML?</h2>
        <p>HTML is used by every website...</p>
      </section>
    </article>

    <!-- Sidebar with related content -->
    <aside>
      <h2>Related Courses</h2>
      <ul>
        <li><a href="/css">CSS Course</a></li>
      </ul>
    </aside>

  </main>

  <!-- Site-wide footer -->
  <footer>
    <p>&copy; 2026 CIWeb. All rights reserved.</p>
  </footer>

</body>

CIWebHome | Courses

Learn HTML in 22 Lessons
HTML is the foundation...

Why Learn HTML?
HTML is used by every website...

Related
• CSS Course

This is the actual structure of CIWeb.in — header, nav, main, article, section, aside, footer. Google reads this and understands each part instantly.

Semantic Tags Reference

HTML5 Semantic TagsUse these, not div

<header>Top of page or section. Contains logo, site title, navigation.

<nav>Navigation links. Use for main menu, breadcrumbs, page links.

<main>Primary content of the page. Only one main per page. Skip navigation links target this.

<article>Self-contained, reusable content. Blog posts, news articles, product cards, comments.

<section>Groups related content with a heading. Chapters, tabs, feature groups.

<aside>Content tangentially related to main content. Sidebars, callouts, related links.

<footer>Bottom of page or section. Copyright, links, contact info.

<address>Contact information for the nearest article or page author.

Semantic HTML = Better Google Ranking

When Google crawls your page, semantic tags are ranking signals. A page with proper header, nav, main, article, footer structure gets crawled and understood faster than one with only divs. Google knows what is navigation, what is the main article, and what is a sidebar — which helps it rank your content accurately.

article vs section vs div

article: makes complete sense on its own (could be shared or syndicated). section: groups related content, needs context of the surrounding page. div: has zero semantic meaning — use only when no semantic tag fits.

Before HTML5 — The Div Soup Era

Before 2014, every page looked like div.header, div.nav, div.content, div.sidebar, div.footer. Developers used CSS class names to describe purpose. HTML5 semantic tags replaced this entirely. Modern code uses actual nav, header, main, footer — which any browser, screen reader, or search engine understands without a class name.

Prev Next Lesson

Coding Infinite Report Bug Certificate

CIWeb HTML Course • 22 Lessons • Free

Explain with Analogies

Shiv AI explains this lesson using real-life analogies. No code — just clear examples.

Click the Explain tab to generate analogies.

index.html

Live Preview

Write code then click Deep Analyze

What is the difference between article and section?

ExplanationAn article makes complete sense on its own and can be reused anywhere (blog post, news article, comment). A section groups related content that needs the context of the surrounding page.

Build Challenge

Semantic Blog Page

Build a complete semantic page with header (with nav), main, article (with sections), aside, and footer.

Requirements (6 to pass)

header with nav

main

article

section

aside

footer

solution.html

Preview

Community Wall

Lesson 10

0/500

0/20 lines