用途
该技能面向 Web UI 构建、标记审查与搜索优化场景，强调 HTML 不只是标记，而是内容、搜索引擎、辅助技术与浏览器之间的契约。语义化 HTML、正确的元数据与渐进增强能让 UI 默认具备韧性、可发现性与可访问性。
语义化 HTML5
核心原则是使用描述内容含义的元素，而非仅描述外观。
文档结构标签包括：
<header>：站点页眉、Logo、主导航<nav>：导航链接<main>：页面主要内容，每页一个<article>：自包含内容，如博客文章、产品卡片、新闻条目<section>：带标题的主题分组<aside>：间接相关内容，如侧栏、标注<footer>：站点页脚、次级链接、版权
标题方面，每页一个 <h1> 表示主题，标题形成大纲且不得跳级（h1 后直接 h3 而不经过 h2 是不允许的）。交互元素应使用原生元素：<button> 用于可点击操作，<a href> 用于导航到 URL，<input> 用于用户数据录入，<select> 用于选项选择，<details>/<summary> 用于原生展开/折叠。绝不要将 <div> 或 <span> 用作交互元素，除非有完整的 ARIA 标注，即便如此也应优先使用原生元素。
图片与替代文本
每个 <img> 都需要 alt 属性，内容取决于上下文：信息性图片（产品照片、图表）描述内容，如 alt="Red leather sofa, three-seater"；功能性图片（图标按钮、Logo 链接）描述功能，如 alt="Go to homepage"；装饰性图片留空 alt=""，屏幕阅读器会跳过；复杂图片（图表、示意图）使用简短 alt 加邻近的更长描述或 <figcaption>。示例代码中信息性图片写作 <img src="sofa.jpg" alt="Red leather sofa, three-seater">，装饰性图片写作 <img src="divider.svg" alt="">，带说明的图片则结合 <figure> 与 <figcaption> 使用。
SEO 基础
标题与描述：<title>Product Name — Short descriptor | Brand</title>，标题 50–60 字符，最重要关键词在前；描述 120–160 字符，面向人类而非算法撰写。
Canonical URL 使用 <link rel="canonical" href="https://example.com/the-definitive-url">，防止同一页面通过多个 URL 访问时的重复内容处罚。
Open Graph 用于社交分享，包含 og:title、og:description、og:image、og:url、og:type，以及 Twitter/X 的 twitter:card、twitter:title、twitter:image。OG 图片尺寸 1200×630px，出现在 Slack、LinkedIn、Twitter、iMessage 分享时。资料还提到卡片标题应使用读者的说法，而非文章的洞见；信息流不提供上下文，需要文章才能理解的句子对浏览的陌生人而言是混乱的。适配平台应按模式而非色调调整：在浅色信息流中深色卡片读起来像广告横幅，解决办法是在该平台自身底色上使用浅色卡片，而非更暖的藏青或更柔的蓝；色调微调在平台界面组件旁不可见，只是白白往返。色调调整应在模式正确之后进行。
结构化数据（JSON-LD）启用富搜索结果，示例包含 @context、@type、name、description、image 与 offers（含 price、priceCurrency）。常见类型有 Product、Article、BreadcrumbList、FAQPage、Organization、SiteLinksSearchBox。
渐进增强
分层构建：第 1 层 HTML，内容可读、链接可用、表单可提交；第 2 层 CSS，布局、排版、视觉设计；第 3 层 JS，交互、动画、动态内容。
实践中：表单必须在无 JS 时通过原生 <form action> 提交，JS 可拦截并用 fetch 增强；导航链接必须是真实的 <a href>，JS 可添加过渡；内容必须在 HTML 中，JS 可用懒加载或个性化增强；图片必须有 src，JS 可通过 loading="lazy" 添加懒加载（现为原生）。
SPA 注意事项
单页应用破坏了 SEO 与可访问性所依赖的浏览器默认行为，需显式修复：
- 服务端渲染或静态生成：客户端渲染的 HTML 不能被搜索引擎可靠索引，任何需要被发现的内容应使用 SSR（Next.js、Nuxt、SvelteKit）或静态生成。
- 标题与元标签更新：每次路由变化时更新
document.title与元标签，使用框架的<Head>组件或等价物。 - 焦点管理：路由变化时将焦点移至新页面的
<h1>或<main>，屏幕阅读器不会自动检测 SPA 导航，示例代码为document.querySelector('h1')?.focus();。 - 滚动恢复：导航时将滚动位置恢复到顶部，返回导航时恢复到保存位置；SPA 中浏览器默认滚动恢复被禁用。
- History API：使用 pushState / replaceState 使前进/后退导航与书签正常工作。
设备能力与用户上下文
设计和代码应适应设备与用户实际能做到的事。
客户端存储作为个性化工具：localStorage、sessionStorage 及其他浏览器能力（cookie、IndexedDB、媒体/权限查询）是定制体验的正当工具，如上次查看模式、所选语言区域、已关闭的横幅、进行中的草稿、回访用户的上下文。护栏包括：基于真实理解而非猜测进行个性化，持久化和预填充什么通常需要客户测试，存储状态中的错误假设比中性默认更糟；范围与同意，sessionStorage 用于单次会话、localStorage 跨会话，绝不在客户端存储敏感信息，尊重同意；每 2–3 年重新验证，需求会漂移，发布时合适的个性化会变成摩擦，应重新审视，最好配合新的测试。
输入方式检测：@media (hover: hover) 用于悬停状态（鼠标或触控板），@media (hover: none) 用于触屏设备（无悬停、更大目标）。指针精度：@media (pointer: coarse) 用于手指触控，增大目标尺寸；@media (pointer: fine) 用于鼠标，可使用较小目标。指针精度也可用于选择默认行为，而不仅是目标尺寸。可从 JavaScript 用 matchMedia('(pointer: fine)') 读取同一查询，但当交互模型不同时应使用各事件的 pointerType：鼠标上的点击切换与指针平移，触屏上的捏合与双击。绝不从视口宽度推断输入类型，混合设备会打破猜测。
网络条件：使用 loading="lazy" 懒加载首屏以下图片；使用 <picture> 提供现代格式及回退，如 <source srcset="image.avif" type="image/avif">、<source srcset="image.webp" type="image/webp">、<img src="image.jpg" alt="...">。
用户偏好：@media (prefers-reduced-motion: reduce) 禁用动画；@media (prefers-color-scheme: dark) 切换深色模式令牌；@media (prefers-contrast: more) 增加对比度；@media (forced-colors: active) 适配 Windows 高对比度模式。
审查清单
资料末尾提供一份审查清单，包括：每页一个 <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）；表单无 JavaScript 可工作；SPA 在路由变化时更新 document.title 与元标签；SPA 在路由变化时移动焦点；悬停状态限定在 @media (hover: hover)；触控目标在 @media (pointer: coarse) 下至少 44px；首屏以下图片使用 loading="lazy"；尊重 prefers-reduced-motion。
限制
资料未提供该技能的具体收费、价格、平台支持范围或安装命令信息。