浏览器窗口如桌面：顶部用放标题/logo，底部用放版权，主要内容在唯一中，侧边用放相关推荐，导航用包链接；须有标题，非万能分块。

按页面“功能区”直接对应标签名

别背列表，把浏览器窗口当成一张实体桌面：顶部放什么？底部放什么？主要内容在哪？侧边常挂啥？导航栏长什么样？每个区域的英文名和标签名基本一致，记住了位置就记住了标签。

常见错误是把 <section></section> 当成万能分块标签，结果全页堆满——它其实表示“有标题的主题区块”，比如“产品介绍”“用户评价”这种带明确主题的段落；而 <div> 才是无语义的通用容器。 <ul> <li> <code><header></header>：只用于页眉或节头部（如一篇文章开头），不是所有带 logo 的盒子都该用它

<main></main>：整个页面只能出现一次，且不能嵌套在 <article></article> 或 <aside></aside> 里

<nav></nav>：专指“主导航链接集合”，面包屑、页脚链接、文章内跳转目录都不算

<aside></aside>：内容必须和主文相关但可独立存在，比如博客侧边的“同类文章推荐”，不是广告位或登录框

用“是否需要被屏幕阅读器朗读”来验证

语义化最实在的检验方式，不是看代码多漂亮，而是打开系统自带的语音朗读（macOS VoiceOver / Windows Narrator），听它怎么读你的结构。如果它把一段广告说成“导航”，或把整页 <div> 都念作“组”，说明语义错了。 <p>例如：<code><time datetime="2026-08-25">今天</time> 会被读成“二零二六年八月二十五日”，而普通 <span></span> 就只念“今天”——这对视障用户理解发布时间很关键。

• <figure></figure> + <figcaption></figcaption> 组合，会让屏幕阅读器把图和说明当一个整体播报
• <mark></mark> 会触发强调语气，适合标注搜索关键词或高亮重点句
• <blockquote></blockquote> 和 <q></q> 区别明显：前者整段引用需换行缩进，后者内联短引，不改变布局

警惕 H5 新增标签的“假语义”陷阱

有些标签看似语义清晰，实际浏览器支持弱或语义被滥用。比如 <main></main> 在旧版 Safari 中不触发焦点跳转，<dialog></dialog> 直到 2024 年才在所有主流浏览器稳定支持，盲目使用反而增加兼容性负担。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

更隐蔽的是 <section></section> 和 <article></article> 的混淆：一篇新闻稿用 <article></article> 没问题，但把它套在“关于我们”“联系方式”这种静态页面区块上，就属于语义漂移——这些更适合 <section></section>，因为它们没有独立分发价值。

• 不要为了“用新标签”而替换 <div>，先问：这个区块是否会被 RSS 抓取？是否可能单独被搜索引擎索引？ <li> <code><footer></footer> 不等于“页脚区域”，它可以出现在 <article></article> 内部，表示该文章的作者信息或更新时间
• <address></address> 只用于联系信息，且仅限当前页面/文章的作者/拥有者，不是公司地址全集

日常写 HTML 时快速选标签的检查清单

每次写结构前花三秒扫一遍这四条，比查文档还快：

• 这是整个页面的顶部？→ 用 <header></header>；只是某篇文章的标题栏？→ 还是 <header></header>（语义按上下文，不是按全局）
• 这块内容能不能抽出来单独发微博/微信公众号？→ 能 → <article></article>；不能 → <section></section>
• 这段文字有没有机器可读的时间/人名/地点？→ 有 → 优先用 <time></time>、<cite></cite>、<data></data>
• 这个盒子纯粹为了加 margin/padding 或 JS 挂载点？→ 老实用 <div>，别硬套语义标签 <p>真正难的不是记住标签名，而是判断内容在信息架构中的真实角色。同一个 <code><nav></nav> 在首页可能是主导航，在文章页可能只是“上一篇/下一篇”，但只要它是链接集合且起导航作用，就成立。