Platform under construction

HTML Layout

Intermediate

Semantic HTML

Learn Semantic HTML with practical examples for structure, layout semantics, metadata, embedded content, scripts, accessibility, SEO and live practice.

<article>
  <h2>Standalone lesson</h2>
</article>

HTML structure and layout

Semantic HTML describes what content is, not only where it appears.

Semantic HTML means choosing elements that express meaning. A nav is navigation. A button is an action. An article is standalone content. A footer closes a section or page.

Semantic markup improves accessibility, SEO, maintainability and collaboration. It gives the browser more truth about the document.

The goal is not to use every semantic element everywhere. The goal is to choose the most honest element for the content.

header

Introductory content for a page or section.

nav

Navigation links.

main

Primary page content.

section and article

Thematic sections and standalone content.

Syntax and structure

Choose elements by role and meaning.

If an element name describes the content honestly, it is often better than a generic div.

Semantic article card

<article class="lesson-card">
  <h2>HTML Tables</h2>
  <p>Learn how tabular data works.</p>
  <a href="/html/tables.php">Open lesson</a>
</article>

Meaning hidden in classes only

<div class="article">
  <div class="title">HTML Tables</div>
  <div class="text">Learn how data works.</div>
</div>

Rules that matter

Structure should stay readable before the design layer is applied.

Layout-focused HTML is strongest when meaning, grouping, metadata and behavior hooks all have a clear reason to exist.

Use real controls

Use button for actions and a for navigation.

Use headings for structure

A large bold div is not a heading.

Use landmarks deliberately

header, nav, main, aside and footer create useful page regions.

Avoid semantic theatre

Do not use section or article when a simple div is more honest.

Keep structure predictable

Future developers should understand the page without reading all CSS.

Validate assumptions

If you cannot explain why an element fits, reconsider it.

Production thinking

HTML structure affects design, accessibility, SEO and long-term maintenance.

Why does this matter?

This matters because the best HTML is honest. It lets people, browsers and machines understand the page before visual design is applied.

Accessibility

Semantic elements give assistive technology useful roles and navigation points without extra ARIA.

Production note

Semantic HTML makes components easier to test, style and refactor because the markup says what it is.

SEO note

Search engines reward clear content and structure. Semantic HTML supports that clarity without keyword tricks.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

Add a nav with two links.
Change article to section and explain which one fits better.
Add a button for an action and a link for navigation.

Practice assignment

Do this before moving to the next lesson.

Rewrite a div-based component with semantic elements.
Explain the role of every semantic element.
Remove one semantic element that does not actually add meaning.

HTML CSS

Live preview

Self-check

Before you continue, prove that you own this lesson.