应使用语义化标签优化工具类网站结构：用划分独立功能单元（如JSON格式化），每个含标题和核心交互区；仅放强相关辅助说明；替代JS实现展开收起。
用 <section></section> 划分功能区块，别套 <div> 了
<p>工具类网站的功能页（比如 JSON 格式化、Base64 编码、正则测试）本质是多个独立操作单元的集合。每个单元有明确目的：输入 → 处理 → 输出。用 <code><section></section> 替代无语义 <div>，既让屏幕阅读器能识别模块边界，也方便后续用 CSS 选择器批量控制样式或 JS 绑定事件。
<p>常见错误是把整个页面包进一个 <code><section></section>，或者在不该分块的地方硬切——比如把「输入框 + 按钮」和「结果预览」拆成两个 <section></section>，反而割裂了操作流。正确做法是按用户任务划分：一个转换工具就是一个 <section></section>，内部用 <header></header> 写标题，<main></main> 放表单与结果区。
-
<section></section> 必须带 <h2></h2> 或更高级标题（不能缺）
- 同一页面中避免嵌套
<section></section>，平级并列更利于 SEO 和辅助技术解析
- 如果某工具需多步（如“上传→配置→执行”），优先用
<fieldset></fieldset> + <legend></legend> 管理表单分组，而非新增 <section></section>
<main></main> 只包核心交互区，导航和页脚不塞进去
<section></section> 必须带 <h2></h2> 或更高级标题（不能缺）<section></section>，平级并列更利于 SEO 和辅助技术解析<fieldset></fieldset> + <legend></legend> 管理表单分组，而非新增 <section></section>
<main></main> 只包核心交互区，导航和页脚不塞进去工具页常犯的结构错误：把顶部导航栏、左侧菜单、页脚全塞进 <main></main>。这会让 AT（辅助技术）误判“所有内容都是主要功能”，实际用户真正要操作的只是中间那一块文本域和按钮。
<main></main> 应严格限定为当前工具的核心容器——比如 JSON 格式化页里，就是包含 <textarea></textarea>、<button></button>、<pre class="brush:php;toolbar:false;"></code> 结果输出的父容器。导航和全局操作（如切换主题、语言）属于站点级结构，归 <code><nav></code> 和 <code><header></code> 管理。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>一个页面只能有一个 <code><main></code>，且不可嵌套在 <code><article></code> 或 <code><aside></code> 内</li>
<li>若页面支持多工具切换（如 Tab 切换不同转换器），每个 Tab 面板应独立包裹 <code><main></code>，配合 <code>aria-hidden</code> 控制显隐</li>
<li>服务端渲染时注意：动态加载的工具模块，插入 DOM 后需检查 <code><main></code> 是否仍唯一</li>
</ul>
<H3><code><aside></code> 放辅助说明，不是放广告位的借口</H3>
<p>很多工具站把右侧广告、推广链接塞进 <code><aside></code>，这是对语义的滥用。<code><aside></code> 的本意是承载与当前功能相关但非必需的补充信息，比如「JSON 格式化」页里的：RFC 7159 链接、缩进空格数说明、常见错误示例列表。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11499" title="cn-json-diff"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20cf0281539.jpg" alt="cn-json-diff" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11499" title="cn-json-diff">cn-json-diff</a>
<p>比较两个 JSON 文件并显示差异。支持嵌套结构、数组及值变更。纯 Python 标准库实现，无需 API 密钥。</p>
</div>
<a href="/xiazai/skill11499" title="cn-json-diff" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p>它该出现在 <code><main></code> 旁，且内容必须和当前 <code><section></code> 强相关。用错会导致搜索引擎降权（被识别为无关干扰内容），也会让键盘用户跳过关键功能直接落到广告上。</p>
<ul>
<li>广告、合作伙伴链接请用普通 <code><div></code> + <code>role="complementary"</code>（若必须保语义）</li>
<li><code><aside></code> 内禁止放置需要用户主动操作的控件（如按钮、表单），否则会破坏焦点流</li>
<li>移动端折叠时，<code><aside></code> 建议用 CSS <code>display: none</code> 隐藏，而非移除 DOM —— 屏幕阅读器仍可访问其语义</li>
</ul>
<H3><code><details></code> + <code><summary></code> 替代手写展开收起逻辑</H3>
<p>工具页高频需求：隐藏高级选项、错误详情、使用说明。别再用 JS 控制 <code>display</code> 或 class 切换——原生 <code><details></code> 语义清晰、自带 ARIA 属性、默认可聚焦、支持键盘（Space/Enter）展开，且无需监听点击事件。</p>
<p>例如正则测试工具里，“匹配详情”面板就该用 <code><details></code> 包裹，<code><summary></code> 写“查看 12 个匹配项”。注意：不要在 <code><summary></code> 里放 <code><button></code>，它本身已是可交互元素；也不要用 <code><details open></code> 默认展开，除非该信息对首次使用用户绝对必要。</p>
<ul>
<li><code><details></code> 不支持 CSS 动画过渡（<code>height</code> 无法 transition），需用 JS 补充动画时，保留原生行为作兜底</li>
<li>服务端渲染时，<code>open</code> 属性值必须是布尔属性（写 <code>open</code> 即 true，不能写 <code>open="true"</code>）</li>
<li>若需在展开后自动滚动到内容顶部，监听 <code>toggle</code> 事件比监听 <code>click</code> 更可靠（兼容键盘触发）</li>
</ul>
<pre class="brush:php;toolbar:false;"><details>
<summary>错误详情（3 个）</summary>
<pre class="brush:php;toolbar:false;">SyntaxError: Unexpected token '}'</pre>
<p>第 5 行，缺少逗号</p>
工具页结构容易陷入“为了语义而语义”的陷阱——比如给每个按钮外层加 <code><section></section>，或把 loading 状态单独提成 <aside></aside>。记住：HTML5 标签的价值在于降低理解成本，而不是增加嵌套层数。用户打开页面第一眼看到的是功能是否可用，不是你的 DOM 多规范。
