应使用语义化标签优化工具类网站结构：用划分独立功能单元（如JSON格式化），每个含标题和核心交互区；仅放强相关辅助说明；替代JS实现展开收起。

用

划分功能区块，别套 了

工具类网站的功能页（比如 JSON 格式化、Base64 编码、正则测试）本质是多个独立操作单元的集合。每个单元有明确目的：输入 → 处理 → 输出。用

替代无语义 ，既让屏幕阅读器能识别模块边界，也方便后续用 CSS 选择器批量控制样式或 JS 绑定事件。

常见错误是把整个页面包进一个

，或者在不该分块的地方硬切——比如把「输入框 + 按钮」和「结果预览」拆成两个

，反而割裂了操作流。正确做法是按用户任务划分：一个转换工具就是一个

，内部用

写标题，

放表单与结果区。

• 必须带
  或更高级标题（不能缺）
• 同一页面中避免嵌套
  ，平级并列更利于 SEO 和辅助技术解析
• 如果某工具需多步（如“上传→配置→执行”），优先用
  +
  管理表单分组，而非新增

只包核心交互区，导航和页脚不塞进去

工具页常犯的结构错误：把顶部导航栏、左侧菜单、页脚全塞进

。这会让 AT（辅助技术）误判“所有内容都是主要功能”，实际用户真正要操作的只是中间那一块文本域和按钮。

应严格限定为当前工具的核心容器——比如 JSON 格式化页里，就是包含 、、

 结果输出的父容器。导航和全局操作（如切换主题、语言）属于站点级结构，归