HTML 语义化标签对照
页面结构该用哪个标签
REFERENCE · 12 ROWS
| 标签 | 用途 | 注意 |
|---|---|---|
| header | 页头或区块头部 | 可多处使用 |
| nav | 导航链接组 | 主要导航加 aria-label |
| main | 页面主内容 | 每页只能一个 |
| article | 独立完整内容 | 文章、卡片 |
| section | 主题分区 | 通常带标题 |
| aside | 侧边栏内容 | 相关推荐 |
| footer | 页脚 | 可多处使用 |
| h1-h6 | 标题层级 | 不跳级 |
| figure/figcaption | 图片与说明 | |
| time | 时间 | datetime 属性 |
| details/summary | 折叠面板 | 无需 JS |
| dialog | 对话框 | showModal() |
HOW TO USE
怎么用HTML 语义化标签对照
- 打开HTML 语义化标签对照,表格已按主题整理好。
- 在右上角输入关键词可即时筛选,不用上下翻找。
- 需要写文档时点「复制为 Markdown」,直接粘到笔记里。
HTML 语义化标签对照是什么
页面结构该用哪个标签。HTML 语义化标签对照按表格整理 12 条常用对照,打开即可查,无需翻文档。
它属于「参考速查」下的「速查表」分类。命令、语法、快捷键的常用速查。 同类工具还包含 HTTP 请求方法对照表、Git 常用命令速查、正则表达式语法速查 等,可以在分类页一次看全。
适用场景
- 处理与「HTML语义化」相关的任务时可以直接用。
- 处理与「标签」相关的任务时可以直接用。
- 处理与「header」相关的任务时可以直接用。
- 处理与「main」相关的任务时可以直接用。
- 处理与「article」相关的任务时可以直接用。
表格说明
本表共 12 行 3 列,内容按常用程度排序。 表格支持关键词筛选,复制出的 Markdown 可直接用于文档、Wiki 或技术博客。
隐私说明
本工具在浏览器内运行,输入内容不会发送到服务器,也不会被记录。 关闭或刷新页面后,输入即被清空。