Footer 标签应放置页面底部的辅助性内容，版权信息和站点地图属于典型且推荐的使用场景；版权信息需用 <small> 或 <p> 语义化包裹，站点地图须用 <nav> 和 <ul><li> 组织并添加 ARIA 属性，广告、订阅表单等非全局性内容不应放入 <footer>。

Footer 标签应放置页面底部的辅助性内容，版权信息和站点地图属于典型且推荐的使用场景，但需注意语义结构与可访问性规范。

版权信息应嵌套在 Footer 内，推荐用 <small> 或 <p> 包裹

版权年份和公司名称属于低优先级、全局性信息，适合放在 footer 中。避免直接写纯文本，建议用语义化标签包裹：

• 使用 <small> 表示次要文字（如 “© 2024 示例公司”），符合 HTML5 对该元素“附属或旁注内容”的定义
• 若版权段落含多个句子（如包含许可声明），用 <p> 更合适
• 避免用 <div> 或 <span> 替代，以免削弱语义

站点地图（Sitemap）链接应以列表形式组织，兼顾 SEO 与键盘导航

页脚中的站点地图不是 XML 文件，而是面向用户的快捷导航入口，通常以链接列表呈现：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 用 <nav aria-label="页脚导航"> 包裹整个链接区域，提升屏幕阅读器识别度
• 链接分组建议用 <ul><li>，每组可加 <h3> 作小标题（如“产品”“支持”“公司”）
• 避免堆砌过多链接（一般不超过 12–15 个），优先放用户高频路径（隐私政策、服务条款、联系方式等）

Footer 不等于“所有底部内容”，需区分主次与逻辑归属

以下内容虽常出现在视觉底部，但不一定适合放入 <footer>：

立即学习“前端免费学习笔记（深入）”；

• 页面末尾的广告横幅、订阅表单——更适合独立 <section> 或 <aside>
• 某篇文章底部的作者信息——应属于该 <article> 的内部 <footer>，而非整个页面的 <footer>
• 多列布局中“关注我们”社交图标——若属全站通用，可放 footer；若仅针对当前内容，则语义不符

响应式与可访问性不可忽略

页脚在移动端常折叠或简化，但语义结构不能丢失：

• 用 CSS 控制显示方式（如 flex-wrap、max-width），不改变 HTML 结构
• 确保所有链接有足够对比度（至少 4.5:1），小字号版权文字也不例外
• 为站点地图中的每组链接提供明确的 aria-labelledby 或 aria-label，避免屏幕阅读器仅读出“列表”而无上下文