构建网页 UI 或审查标记质量时，用语义化 HTML…

在编写或审查任何 Web UI 标记时，通过语义化 HTML、正确的元数据、渐进增强、SPA 修复和设备/用户上下文适配，让页面默认可访问、可被搜索引擎收录且健壮。

适用场景

解决思路

1. 使用描述内容含义而非外观的语义元素：<header> 用于站点页眉/logo/主导航，<nav> 用于导航链接，<main> 用于主内容（每页一个），<article> 用于自包含内容（博客文章、产品卡片、新闻条目），<section> 用于带标题的主题分组，<aside> 用于侧边栏/标注等关联内容，<footer> 用于页脚/次级链接/版权。
2. 标题层级：每页仅一个 <h1> 表示主题，标题形成大纲，不要跳级（如 h1 直接到 h3 而缺少 h2）。
3. 交互元素使用原生标签：<button> 用于点击动作，<a href> 用于导航到 URL，<input> 用于数据输入，<select> 用于选项选择，<details>/<summary> 用于原生折叠面板；不要用 <div> 或 <span> 充当交互元素，即使加 ARIA 也应优先原生元素。
4. 每个 <img> 必须有 alt 属性：信息性图片描述内容（如 alt="Red leather sofa, three-seater"），功能性图片描述功能（如 alt="Go to homepage"），装饰性图片用 alt="" 让屏幕阅读器跳过，复杂图表用简短 alt 加附近或 <figcaption> 中的详细描述。
5. 设置 <title>：50–60 字符，最重要的关键词在前，格式如「产品名 — 简短描述 | 品牌」。
6. 设置 <meta name="description">：120–160 字符，用一两句话说明页面是什么、面向谁、能找到什么，为人类而非算法而写。
7. 在可通过多个 URL 访问的页面上添加 <link rel="canonical" href="https://example.com/the-definitive-url"> 以避免重复内容惩罚。
8. 添加 Open Graph 标签：og:title、og:description、og:image（1200×630px）、og:url、og:type，以及 Twitter/X 的 twitter:card（summary_large_image）、twitter:title、twitter:image，确保 URL 在 Slack、LinkedIn、Twitter、iMessage 分享时正确展示。
9. 在产品、文章、FAQ 等页面添加 JSON-LD 结构化数据（<script type="application/ld+json">），常用类型包括 Product、Article、BreadcrumbList、FAQPage、Organization、SiteLinksSearchBox。
10. 渐进增强分层构建：第 1 层 HTML 保证内容可读、链接可用、表单可提交；第 2 层 CSS 负责布局、排版、视觉设计；第 3 层 JS 负责交互、动画、动态内容。
11. 具体实践：表单必须能通过原生 <form action> 在无 JS 时提交（JS 可拦截并用 fetch 增强）；导航链接必须是真实 <a href>（JS 可加过渡）；内容必须在 HTML 中（JS 可加懒加载或个性化）；图片必须有 src（可用原生 loading="lazy" 懒加载）。
12. SPA 必须使用 SSR（Next.js、Nuxt、SvelteKit）或静态生成，因为客户端渲染的 HTML 无法被搜索引擎可靠索引。
13. SPA 在每次路由变化时更新 document.title 和 meta 标签，使用框架的 <Head> 组件或等价方案。
14. SPA 在路由变化后将焦点移到新页面的 <h1> 或 <main>（如 document.querySelector('h1')?.focus()），因为屏幕阅读器不会自动检测 SPA 导航。
15. SPA 在导航时恢复滚动到顶部，或在后退导航时恢复到保存位置，因为 SPA 中浏览器默认滚动恢复被禁用。
16. SPA 使用 pushState/replaceState，使前进/后退导航和书签功能正常工作。
17. 将 localStorage、sessionStorage、cookies、IndexedDB、媒体/权限查询等客户端存储作为个性化工具，用于记住上次视图模式、所选语言、已关闭的横幅、进行中的草稿、回访用户上下文。
18. 客户端存储护栏：基于真实理解而非猜测进行个性化（持久化和预填什么通常需要客户测试，错误的存储状态比中性默认值更糟）；区分作用域与同意（sessionStorage 用于单次会话，localStorage 跨会话，绝不在客户端存储敏感信息，遵守同意）；每 2–3 年重新验证（需求会漂移，上线时合适的个性化会变成摩擦，最好用新测试重新审视）。
19. 用 @media (hover: hover) 限定悬停状态（鼠标或触控板），用 @media (hover: none) 处理触屏设备（无悬停、更大目标，如 .btn { min-height: 44px; }）。
20. 用 @media (pointer: coarse) 为粗指针触屏增大目标尺寸（.interactive { min-height: 44px; min-width: 44px; }），用 @media (pointer: fine) 为精确鼠标使用较小目标。
21. 网络条件优化：首屏以下图片用 loading="lazy"；用 <picture> 提供现代格式并回退（<source srcset="image.avif" type="image/avif">、<source srcset="image.webp" type="image/webp">、<img src="image.jpg" alt="...">）。
22. 尊重用户偏好：@media (prefers-reduced-motion: reduce) 禁用动画，@media (prefers-color-scheme: dark) 切换暗色令牌，@media (prefers-contrast: more) 提高对比度，@media (forced-colors: active) 适配 Windows 高对比度模式。
23. 按审查清单逐项检查：每页一个 <h1> 且标题形成逻辑大纲；使用 <main>/<nav>/<header>/<footer>/<article>/<section> 语义元素；每个 <img> 有有意义的 alt 或装饰性 alt=""；<title> 每页唯一、50–60 字符、关键词在前；<meta name="description"> 存在且 120–160 字符；所有可分享页面有 Open Graph 标签；多 URL 页面有 <link rel="canonical">；产品/文章/FAQ 页面有 JSON-LD 结构化数据；表单无 JS 可用；SPA 路由变化时更新 document.title 和 meta 标签；SPA 路由变化时移动焦点；悬停状态限定在 @media (hover: hover)；@media (pointer: coarse) 下触控目标 ≥ 44px；首屏以下图片用 loading="lazy"；尊重 prefers-reduced-motion。