友情链接应使用,因其是有明确主题、需标题标识的独立内容区块;不可用(仅限主导航)或(仅限与主内容强相关的辅助信息)。

友情链接该用 <nav></nav> 还是 <aside></aside>?
友情链接不是主导航,也不属于主内容的辅助信息,所以既不该硬塞进 <nav></nav>,也不该放进 <aside></aside>。它本质是“次要导航链接集合”,但语义上不承担页面核心导航职责——比如底部一排“关于我们|加入我们|合作伙伴|友情链接”,其中只有前三个是用户主动跳转的核心路径,最后这个“友情链接”是外部站点导出关系,不具备内部导航功能。
为什么 <nav></nav> 是常见误用点
很多开发者看到“一堆链接”就条件反射套 <nav></nav>,但 HTML5 规范明确限定:<nav></nav> 仅用于“主要的导航区块”,比如顶部菜单、侧边栏目导航、分页控件。友情链接通常出现在页脚或侧边栏底部,作用是展示关联站点而非引导用户浏览本站结构。
- 搜索引擎会把
<nav></nav>内链接视为主站重要入口,错误使用可能稀释权重 - 屏幕阅读器会为
<nav></nav>添加“导航区域”提示,对友情链接这种弱交互场景反而造成干扰 - W3C 验证器虽不报错,但语义校验工具(如 axe、Lighthouse)会标记为“可疑导航用途”
更规范的做法:用 <section></section> + 标题 + 列表
友情链接是按主题组织的内容块,有明确目的(展示合作/关联站点),且必须带标题说明其意图。符合 <section></section> 的定义前提:“有主题、可命名、非装饰性”。
- 必须包含一个
<h2></h2>–<h6></h6>标题,例如<h3>友情链接</h3> - 内部用
<ul></ul>或<ol></ol>包裹链接,不用<div> 或 <code><p></p> - 避免嵌套在
<nav></nav>或<aside></aside>里——它就是独立的主题区块 - 如果出现在页脚,可放在
<footer></footer>内部,但不要让它变成<footer></footer>的子<nav></nav>
示例结构:
<section><h3>友情链接</h3>
<ul>
<li><a href="https://example-a.com">网站A</a></li>
<li><a href="https://example-b.com">网站B</a></li>
</ul></section>
什么时候才考虑用 <aside></aside>
仅当友情链接和当前主内容强相关、且可被移除而不影响主信息完整性时才适用。例如一篇介绍“前端开源生态”的文章,在文末列出“Vue 官网|React 官网|Svelte 官网”作为延伸参考——这时它算辅助性引用,可用 <aside></aside>。但绝大多数企业站、博客站底部的通用友情链接,不符合这个条件。
真正容易被忽略的是标题的强制性:没 <h3></h3> 的 <section></section> 和乱用 <div class="links"> 没本质区别,语义就断在第一步了。</div>











