HTML中如何用列表元素和超链接组合制作侧边栏-html教程-PHP中文网

侧边栏必须用包裹列表，不可仅用套；提供语义与可访问性支持，明确表达并列导航入口，混用将导致语义缺失、无障碍支持差、SEO弱化。

html中如何用列表元素和超链接组合制作侧边栏

侧边栏用 `nav` 包裹列表，不是随便套 `div`

直接用 div 套 ul 也能显示，但语义错误、无障碍支持差、SEO 友好度低。浏览器和读屏软件会把 nav 当作导航区域识别，ul 则明确表达“一组可并列访问的入口”。

常见错误是写成：

—— 这等于放弃语义，后期维护或改用 JS 控制焦点时会多踩三四个坑。

nav 是语义容器，必须包裹整个导航逻辑块（含标题、列表、可能的搜索框）
列表项 li 内必须用 a 标签，不能只放文字或靠 JS 绑定点击
如果侧边栏有主标题（如“栏目导航”），建议用 h2，不要用 div + CSS 模拟标题

`ul` 里嵌 `a` 的 href 和 target 要按需设，别全写 `#` 或 `_blank`

href 写成 # 看似省事，但会导致页面跳到顶部、破坏滚动位置、影响 history API 使用；全用 _blank 则打乱用户浏览上下文，尤其移动端容易丢失原页。

真实场景中：

站内跳转：用相对路径，如 href="article.html" 或带 hash 的锚点 href="index.html#contact"
外部链接：加 rel="noopener noreferrer" 防安全漏洞，例如 @#@#@#@#@#@#@#@#@#@0
纯 JS 触发动作（如展开子菜单）：用 href="javascript:void(0)" 或 href="#" + event.preventDefault()，但必须配 aria-expanded 等可访问属性

多级侧边栏用嵌套 `ul`，别用 `ol` 或 `dl`

二级菜单本质仍是导航选项集合，不是有序步骤（不用 ol），也不是术语解释（不用 dl）。正确做法是 li 里再包一层 ul，且外层 li 要有明确角色标识。

示例结构：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

<nav aria-label="主菜单"><ul>
<li><a href="home.html">首页</a></li>
    <li>
      <a href="#" aria-expanded="false" aria-haspopup="true">产品</a>
      <ul>
<li><a href="pro-a.html">产品A</a></li>
        <li><a href="pro-b.html">产品B</a></li>
      </ul>
</li>
  </ul></nav>

注意点：

子菜单 ul 必须紧跟在触发它的 li 内部，不能脱离父 li 单独存在
用 aria-haspopup="true" 和 aria-expanded 告诉辅助技术这是可展开项
CSS 控制显隐时，优先用 display: none/block 或 visibility: hidden/visible，避免仅靠 opacity: 0 —— 后者仍占可访问焦点流