Professional HTML Composition Guide

This document shows a minimal, professional, semantic HTML composition that focuses on:

Correct element order
Parent → child relationships
Where it’s normal to have many vs one
No real content, only structural placeholders

Framework-agnostic and aligned with modern accessibility and maintainability best practices.

High-level document structure (always this order)

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Metadata (one of each type) -->
  </head>

  <body>
    <!-- Page layout -->
  </body>
</html>

Side note:
This structure never changes. If this order is broken, tools, browsers, accessibility tech, and SEO will all suffer.

`<head>` — mostly single-instance elements

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title></title>

  <!-- Multiple allowed -->
  <meta name="description" content="">
  <link rel="stylesheet" href="">
  <script src="" defer></script>
</head>

Rules

title: exactly one
meta charset: one
meta viewport: one
link, script: many allowed

Side note:
Think of <head> as configuration, not content. Nothing here should be visible to the user directly.

`<body>` — semantic layout skeleton

<body>
  <header></header>
  <nav></nav>

  <main>
    <!-- Page-specific content -->
  </main>

  <footer></footer>
</body>

Rules

main: only one per page
header, footer: one per page (can also exist inside sections)
nav: 0–many (usually one primary)

Side note:
Screen readers rely heavily on this structure. main is a critical accessibility landmark.

`<header>` — site-level identity

<header>
  <div>
    <!-- Logo / branding -->
  </div>

  <nav>
    <ul>
      <li><a></a></li>
      <li><a></a></li>
      <li><a></a></li>
    </ul>
  </nav>
</header>

Rules

nav usually contains ul > li > a
Avoid placing random divs directly inside nav

Side note:
header is not just for the top of the page — articles and sections can have their own headers too.

`<main>` — page content container

<main>
  <section></section>
  <section></section>
</main>

Rules

main contains sections, not loose text
No repeated layout components here (no global nav or footer)

Side note:
If content appears on every page, it probably does not belong in main.

`<section>` — thematic grouping (usually many)

<section>
  <header>
    <h2></h2>
  </header>

  <article></article>
  <article></article>
</section>

Rules

Sections should usually have a heading
Sections group related content

Side note:
If you cannot name a section with a heading, it may just be a div.

`<article>` — standalone, repeatable content

<article>
  <header>
    <h3></h3>
  </header>

  <p></p>
  <p></p>

  <footer></footer>
</article>

Rules

Articles should make sense on their own
Common for blog posts, cards, list items, feeds

Side note:
If you could syndicate it via RSS or share it independently, it’s probably an article.

`<aside>` — secondary or complementary content

<aside>
  <section></section>
</aside>

Rules

Used for sidebars, related links, metadata
Should not contain core content

Side note:
aside is context-dependent — its meaning changes depending on where it is placed.

`<footer>` — closing or metadata

<footer>
  <nav>
    <ul>
      <li><a></a></li>
    </ul>
  </nav>

  <small></small>
</footer>

Rules

Footer content is supporting, not primary
Can exist at page, section, or article level

Side note:
Footers are ideal for legal text, secondary navigation, and metadata — not main content.

Text-level semantics (inside content elements)

<p>
  <strong></strong>
  <em></em>
  <a></a>
  <span></span>
</p>

Rules

p contains inline elements only
Never place block elements inside p
span has no semantic meaning (styling/hooks only)

Side note:
If you use span a lot, ask yourself if a semantic element already exists.

Common professional nesting rules

❌ Avoid

<a>
  <button></button>
</a>

<p>
  <div></div>
</p>

✅ Correct

<a></a>

<button></button>

<div>
  <p></p>
</div>

Side note:
Invalid nesting often works visually — until accessibility, forms, or JavaScript break.

Mental model (how professionals structure HTML)

html
 └─ body
    ├─ header
    │  └─ nav → ul → li → a
    ├─ main
    │  └─ section
    │     └─ article
    │        ├─ header → h*
    │        ├─ p
    │        └─ footer
    └─ footer

Side note:
This mental model scales from static HTML to React, Angular, Astro, and server-rendered apps.

Key rules summary

Element	Count per page	Purpose
`html`	1	Root element
`head`	1	Metadata
`body`	1	Visible content
`main`	1 only	Primary content
`header`	1+	Intro / branding
`nav`	0+	Navigation
`section`	Many	Thematic grouping
`article`	Many	Standalone content
`aside`	0+	Secondary content
`footer`	1+	Metadata / closing

Final side note:
Good HTML is about meaning first, styling second, and behavior last.
If the structure is right, everything else becomes easier.

Professional HTML Composition Guide

High-level document structure (always this order)

<head> — mostly single-instance elements

Rules

<body> — semantic layout skeleton

Rules

<header> — site-level identity

Rules

<main> — page content container

Rules

<section> — thematic grouping (usually many)

Rules

<article> — standalone, repeatable content

Rules

<aside> — secondary or complementary content

Rules

<footer> — closing or metadata

Rules

Text-level semantics (inside content elements)

Rules

Common professional nesting rules

❌ Avoid

✅ Correct

Mental model (how professionals structure HTML)

Key rules summary

`<head>` — mostly single-instance elements

`<body>` — semantic layout skeleton

`<header>` — site-level identity

`<main>` — page content container

`<section>` — thematic grouping (usually many)

`<article>` — standalone, repeatable content

`<aside>` — secondary or complementary content

`<footer>` — closing or metadata