Semantic HTML Layouts
Building accessible, meaningful page structures that search engines and screen readers actually understand. Covers landmark roles, heading hierarchy, and sectioning elements.

These guides grew out of problems we kept running into across different builds — the same semantic markup mistakes that broke screen reader navigation, the same typography choices that looked fine on desktop but fell apart on phones, the same caching headers that worked in staging but caused stale content in production. Rather than solving each one from scratch every time, we documented what worked and what failed.
Each guide covers a focused topic with practical checklists, field-tested observations from real deployments, and a short FAQ addressing the questions that came up most often. They are written for theme authors, front-end developers, and site owners who need to make confident decisions without wading through reference documentation. The goal is not to replace official specs — it is to translate them into patterns you can apply immediately.
You will notice these guides lean heavily on first-hand experience rather than theoretical best practices. Where a technique worked reliably across browsers and content types, we say so. Where it broke under specific conditions, we explain what went wrong and what we use instead. If you are building layouts, shipping themes, or optimising an existing site, start with whichever topic matches your current challenge.
Building accessible, meaningful page structures that search engines and screen readers actually understand. Covers landmark roles, heading hierarchy, and sectioning elements.
Type scales, line height, measure, and the small decisions that determine whether readers finish an article or abandon it halfway. Tested across devices and content types.
From sprite sheets to inline SVG — implementing scalable icons that stay crisp at every size, load efficiently, and remain accessible to assistive technology.
Speed fundamentals for static and dynamic sites. Edge caching, asset hashing, render-blocking resources, and the performance tradeoffs that actually matter in production.
Anatomy of a well-organized theme — template hierarchy, action and filter hooks, file conventions, and the structural patterns that separate maintainable themes from fragile ones.