侧边栏语义化需区分与：导航链接必须用并加aria-label，补充内容用；嵌套合理、标题连贯、列表统一、当前项用aria-current="page"。

用 `

` 和 `

` 构建语义化侧边栏菜单，关键不在“放哪”，而在“是什么”。`

` 表示内容与主文相关但可独立存在；`

` 则专指导航用途。两者常配合使用，但不能混用或替代。

先分清：什么该放 `

`，什么该放 `

`

侧边栏里如果主要是跳转链接（如“分类目录”“快捷入口”“用户中心”），它本质是导航行为——必须用 `

` 包裹，并加 `aria-label` 说明用途，例如：

• <nav aria-label="文章分类导航"><ul><li><a href="https://www.php.cn/link/36ed6e6ed1415bdbbb65d53883df06b5">前端技术</a></li></ul></nav>
• 若侧边栏含广告、作者简介、延伸阅读、标签云等补充性内容，才适合用 `
  `
• 常见错误：把整个侧边栏都套 `
  `，结果导航部分失去语义；或全用 `

  `，让读屏软件无法识别导航意图

  结构嵌套要合理：`

  ` 可在 `

  ` 内，但别反着来

  当侧边栏同时有导航和辅助内容时，推荐外层 `

  ` 统一语义归属，内部再按功能拆分：

  

  DeepBI DHTML 页面生成器

  生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

  下载

  • 导航区块用 `
    `，并确保每个链接是 ``，不建议用 `

    ` 模拟按钮

    其他模块如“热门标签”“最新更新”，各自用 `

    ` 包裹，并配 `

    ` 标题

    所有列表类内容（菜单项、标签、文章推荐）统一用 `

    ` 或 `

    `，不用 `
    ` 堆砌
    标题层级必须连贯，不能从 `
    ` 跳到 `
    `
    页面大纲不能断层。假设主内容用了 `
    `（文章标题）和 `
    `（小节标题），那么侧边栏里的模块标题就该从 `
    ` 开始：
    立即学习“前端免费学习笔记（深入）”；
    • 错例：<aside><h1>侧边栏</h1>...</aside> —— 破坏整页语义结构
    • 对例：<aside><nav aria-label="分类导航"><h3>分类导航</h3> <ul>...</ul></nav><section><h3>标签云</h3> <ul>...</ul></section></aside>
    • 可用浏览器开发者工具的“可访问性树”视图验证标题是否逐级递进
    别忘了无障碍支持：高亮当前项要用 `aria-current="page"`
    纯靠 CSS 的 `.active` 类容易不同步，尤其刷新或回退时。更可靠的做法是服务端或构建时注入 `aria-current` 属性：
    • HTML 示例：<a href="https://www.php.cn/link/066763a699fbe4dc6205bac5d616162b" aria-current="page">博客首页</a>
    • CSS 响应：a[aria-current="page"] { background: #007bff; color: white; }
    • 这对屏幕阅读器用户至关重要——它会朗读“博客首页，当前页面”，而不仅是视觉变化