Semantic HTML

Thu, 09 Apr 2026 00:00:00 +0000

ASW’s 02-semantic.css layer styles native HTML elements directly. Write valid semantic HTML; it looks right without adding any attributes or classes.

Typography

Headings

All six heading levels are styled with distinct sizes, weights, and colours drawn from ASW tokens.

<h1>Page Title</h1>
<h2>Section Heading</h2>
<h3>Subsection</h3>
<h4>Group Header</h4>
<h5>LABEL</h5>        <!-- uppercase, spaced -->
<h6>MICRO LABEL</h6>  <!-- uppercase, spaced, smaller -->

h5 and h6 receive text-transform: uppercase and letter-spacing to serve as section labels rather than structural headings. Headings following content elements get extra top margin (--type-space-top) automatically.

HTML Landmark Elements

Sat, 11 Apr 2026 00:00:00 +0000

The full set: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, plus the newer <search>.

Each maps to an implicit ARIA landmark role, which is what makes them meaningful to screen readers and search engines — not just visual styling hooks.

`<header>`

Introductory content for its nearest sectioning ancestor. At the top level of <body> it maps to the banner landmark — the site identity zone. Inside an <article> or <section> it’s just a local header with no landmark role.

Semantic-Html on ASW — Agentic Semantic Web

Semantic HTML

Typography

Headings

HTML Landmark Elements

<header>

`<header>`