Semantic HTML5, SEO fundamentals, alt texts, progressive enhancement, SPA considerations, device capability detection, and user context awareness. Good HTML is the foundation of accessibility, SEO, and resilient UI. Use when building any web UI, reviewing markup quality, or optimising for search and

Semantic HTML and SEO Good HTML is not just markup — it is the contract between your content, search engines, assistive technologies, and the browser. Semantic HTML, correct metadata, and progressive enhancement make UI resilient, findable, and accessible by default. Semantic HTML5 Use the element that describes the content's meaning, not just its appearance. Document structure Headings One <h1 per page — the primary topic. Headings form an outline: do not skip levels ( h1 → h3 without h2 ). Interactive elements Never use <div or <span as interactive elements without full ARIA annotation — and even then, prefer the native element. Images and Alt Text Every <img needs an alt attribute. What goes in it depends on context. Image type Alt text Informative (product photo, chart) Describe content: alt="Red leather sofa, three seater" Functional (icon button, logo link) Describe function: alt="Go to homepage" Decorative Empty: alt="" — screen readers skip it Complex (chart, diagram) Short alt + longer description nearby or in <figcaption SEO Fundamentals Title and description Title: 50–60 characters. Most important keyword first. Description: 120–160 characters. Shown in search results — write for the human, not the algorithm. Canonical URL Prevents duplicate content penalties when the same page is accessible via multiple URLs. Open Graph (social sharing) OG image: 1200×630px. Appears when the URL is shared on Slack, LinkedIn, Twitter, iMessage. Structured Data (JSON LD) Machine readable content enables rich search results. Common types: Product , Article , BreadcrumbList , FAQPage , Organization , SiteLinksSearchBox . Progressive Enhancement Build in layers. The core content and function must work without JavaScript. Enhance with CSS. Enhance further with JS. In practice: Forms must submit via native <form action without JS — JS can intercept and enhance with fetch Navigation links must be real <a href — JS can add transitions Content must be in the HTML — JS can enhance with lazy load or personalisation Images must have src — JS can add lazy loading via loading="lazy" (now native) SPA Considerations Single page applications break browser defaults that SEO and accessibility depend on. Fix them explicitly. Server side rendering or static generation Client rendered HTML is not reliably indexed by search engines. Use SSR (Next.js, Nuxt, SvelteKit) or static generation for any content that needs to be found. Title and meta updates Update document.title and meta tags on every route change. Use the framework's <Head component or equivalent. Focus management On route change, move focus to the new page's <h1 or <main — screen readers do not detect SPA navigation automatically. Scroll restoration Restore scroll position to top on navigation, or to the saved position on back navigation. Browser default scroll restoration is disabled in SPAs. History API Use pushState / replaceState so back/forward navigation and bookmarking work correctly. Device Capabilities and User Context Design and code should adapt to what the device and user can actually do. Client side storage as a personalization tool localStorage , sessionStorage , and other browser capabilities (cookies, IndexedDB, media/permission queries) are legitimate tools for tailoring the experience — last view mode, chosen locale, a dismissed banner, an in progress draft, a returning user's context. Guardrails: Personalise from real understanding, not a guess. What to persist and pre fill safely usually needs customer testing — a wrong assumption in stored state is worse than a neutral default. Scope and consent. sessionStorage for one session, localStorage across sessions; never store anything sensitive client side; honour consent. Re validate every 2–3 years. Needs drift; a personalization that fit at launch becomes friction. Revisit, ideally with fresh testing. Input method detection Pointer precision Network conditions User preferences Review Checklist [ ] One <h1 per page, headings form a logical outline [ ] Semantic elements used: <main , <nav , <header , <footer , <article , <section [ ] Every <img has a meaningful alt or alt="" for decorative images [ ] <title is unique per page, 50–60 characters, keyword first [ ] <meta name="description" present and 120–160 characters [ ] Open Graph tags present on all shareable pages [ ] <link rel="canonical" on pages accessible via multiple URLs [ ] Structured data (JSON LD) on product, article, and FAQ pages [ ] Forms work without JavaScript [ ] SPA updates document.title and meta tags on route change [ ] SPA moves focus on route change [ ] Hover states scoped to @media (hover: hover) [ ] Touch targets ≥ 44px on @media (pointer: coarse) [ ] Images use loading="lazy" below the fold [ ] prefers reduced motion respected

semantic-html-and-seo