正确选择是<footer>配合<ul>使用，页脚友情链接不应放入<nav>，因其不满足主导航语义；需确保链接含有效href且避免非链接内容混入，动态渲染时须保证DOM加载后存在真实链接节点。
<footer> 是正确选择，但必须配合 <nav> 或 <ul> 使用，不能单独靠 <footer> 传递导航语义。
页脚友情链接不是“主导航”，别硬塞进 <nav>
很多开发者看到“链接集合”就下意识用 <nav>，但页脚友情链接不符合 <nav> 的语义门槛：它不承担“站点级、重复性、主要跳转路径”功能。搜索引擎和屏幕阅读器会识别其为辅助信息，而非主导航区域。硬套 <nav> 不仅无效，还可能稀释顶部主导航的语义权重。
- ✅ 正确做法：
<footer>内部用<ul>包裹链接，结构清晰、语义合理 - ❌ 常见错误：
<footer><nav><ul>...</ul></nav></footer>—— 多余嵌套，且未加aria-label区分用途 - ⚠️ 特殊情况：若页脚含多个独立链接组（如“合作伙伴”“友情链接”“法律条款”），可用多个
<nav>，但每个都必须带aria-label，例如<nav aria-label="合作伙伴">
<footer> 里放链接，为什么不能只写 <div>？
<footer> 明确告诉浏览器和辅助技术：“这是页面底部区域”，对 SEO 和可访问性有基础信号价值；而 <div> 完全无此含义。但要注意：<footer> 本身不表示“这里有导航链接”，它只是容器。真正让链接被识别为“可跳转集合”的，是内部的 <ul> + <a href> 结构。
- 链接必须带有效
href，空链接（href="#"）、伪链接（href="javascript:void(0)"）会被读屏器跳过 - 避免在页脚
<footer>中混入非链接内容（如搜索框、登录表单），否则破坏语义纯粹性 - 如果页脚链接指向外部站点，建议加
rel="noopener"和rel="nofollow"（视 SEO 策略而定）
要不要给页脚链接加 aria-label？
不需要统一加，除非你用了 <nav>。纯 <footer><ul> 结构中，每个链接自身已有明确文本（如“百度”“GitHub”），屏幕阅读器能自然朗读。只有当你把页脚链接放进 <nav> 时，才必须加 aria-label，否则多个 <nav> 会让读屏器无法区分用途——比如用户听到两次“导航”，却不知道哪个是顶部菜单、哪个是页脚。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐写法：
<footer><ul><li><a href="https://example.com">示例公司</a></li></ul></footer> - ✅ 若必须用
<nav>：<nav aria-label="页脚友情链接"><ul>...</ul></nav> - ❌ 错误写法：
<footer aria-label="页脚导航">...</footer>——<footer>不支持aria-label作为导航标识
最容易被忽略的是：页脚链接的语义有效性，不取决于你用了什么标签，而取决于 DOM 加载完成时，document.querySelectorAll('footer a[href]') 是否能真实返回节点。动态渲染（如 CSR 页面）中，若链接靠 JS 异步插入，首屏 DOM 为空，那再标准的结构也白搭。
