Semantic HTML — Allowed

This unit follows Phase 1 and introduces meaningful page structure before CSS.

Learning goal

Choose HTML elements for the meaning and relationship of their content, not for their default appearance. Document pages that will ship publicly with basic metadata.

HTML tags allowed

Everything from ./phase1-allowed.html, plus:

a
p
nav
main
section
article
aside
footer
figure
figcaption
link (in <head> for rel="icon" and rel="canonical")
meta (in <head> for name="description" and Open Graph / Twitter properties)

Attributes allowed

On html: lang
On a: href
On landmarks and sections: id, aria-label, aria-labelledby
On img: src, alt, width, height
On meta: name, content, property
On link: rel, href
Phase 1 control attributes remain available

Semantic rules

Use one visible main for the page’s unique primary content.
Keep repeated site navigation, page headers, and page footers outside main.
Use section for a thematic group that normally has a heading.
Use article when the content could stand independently or be reused elsewhere.
Use aside for complementary content, not merely because something appears in a sidebar.
header and footer may describe the whole page or the nearest section/article.
Use nav for major groups of navigation links, not every isolated link.
Give multiple navigation regions distinct accessible names.
Use figure with figcaption when media and its caption form one referenced unit.
Keep div when no semantic element accurately describes the group.
Prefer native HTML meaning over adding a redundant ARIA role.
Maintain a logical heading hierarchy that describes the document.
Public pages should include a unique title, meta description, favicon, and Open Graph tags; add canonical when URL variants exist.
If help appears on multiple pages, keep it in the same relative order (Consistent Help).

Not allowed