HTML5推荐用footer元素添加版权信息，可嵌套small标签增强语义，或用role="contentinfo"的div、p标签、JavaScript动态注入等方式实现，兼顾可访问性、SEO与维护性。
如果您希望在网页底部显示版权信息，HTML5 提供了语义化的方式通过 footer 元素进行标注，也可直接使用普通文本配合段落或 div 实现。以下是几种符合 HTML5 规范的添加方法：
一、使用 footer 标签包裹版权文字
footer 元素是 HTML5 中专用于定义页面或区块底部内容的语义化标签，适用于整个页面底部的版权申明，有助于提升可访问性和 SEO 识别度。
1、在 HTML 文件的 </body> 标签前插入 <footer></footer> 标签对。
2、在 <footer> 标签内部添加版权文字，例如：© 2024 Your Company. All rights reserved.
立即学习“前端免费学习笔记（深入）”；
3、可选：为 footer 添加 class 或 id，便于后续 CSS 样式控制，如 class="site-footer"。
二、在 footer 中嵌入 small 标签标注版权
small 元素在 HTML5 中被明确定义为“附属细则”，常用于版权说明、法律条款等次要但需保留的信息，与 footer 组合使用更符合语义规范。
1、编写结构：<footer><small>© 2024 Your Name. All rights reserved.</small></footer>
2、确保 <small> 标签未被 CSS 设置为 display: none 或 font-size: 0。
3、验证浏览器渲染效果，确认文字可见且位于页面最底部区域。
三、使用 div 模拟 footer 并添加版权文本
当页面已存在多个 footer 或需避免语义冲突时，可用带 role="contentinfo" 的 div 替代，仍保持 ARIA 可访问性支持。
1、插入代码：<div role="contentinfo">© 2024 Website Owner</div>
2、为该 div 设置 CSS 样式，例如 text-align: center; 和 padding: 1rem 0; 以增强视觉呈现。
3、检查屏幕阅读器是否能正确播报该区域为“contentinfo”角色。
四、在 body 底部直接插入版权段落
对于简单静态页面，无需复杂语义结构时，可在 body 结束前用 p 标签直接声明版权，保证信息可见性与基础合规性。
1、定位到 HTML 文件末尾，在 </body> 上方添加：<p style="text-align:center;font-size:0.875rem;">© 2024 Your Site. Unauthorized use prohibited.</p>
2、确认该段落在所有主内容之后渲染，无遮挡或溢出问题。
3、检查移动端视口下文字是否自动换行且未被截断。
五、通过 JavaScript 动态注入版权信息
适用于多页面共用同一 HTML 模板头尾，或需根据当前年份自动更新版权年份的场景。
1、在 <footer> 标签中预留空 span，例如：<span id="copyright-year"></span>
2、在页面底部 script 标签内执行：document.getElementById('copyright-year').textContent = '© ' + new Date().getFullYear() + ' Your Brand';
3、确保脚本位于 footer 闭合标签之后或使用 defer 属性防止执行时机过早。
