html5语义标签是为浏览器、辅助工具和开发者明确内容意图的“语言”。用对了，网页结构自然清晰，阅读体验提升靠逻辑而非样式堆砌；和锚定页面级元信息，非视觉位置限定；唯一且不可替代，须包裹真正主要内容；强调可独立分发，强调主题分组；仅用于导航意图，需避免混入功能控件。
HTML5语义标签不是装饰，而是为浏览器、辅助工具和开发者明确内容意图的“语言”。用对了，网页结构自然清晰，阅读体验提升不靠样式堆砌，而靠逻辑本身。
用<header></header>和<footer></footer>锚定页面边界
它们不等于“顶部横幅”或“底部版权栏”，而是承载页面级的元信息。一个页面可有多个<section></section>，每个都可以自带<header></header>（如文章标题+作者+时间）和<footer></footer>（如编辑说明、相关链接）。避免把导航栏硬塞进<header></header>——如果它属于整站而非当前内容块，更适合放在<nav></nav>中独立声明。
-
<header></header>内不宜嵌套另一个<header></header>，语义会冲突 -
<footer></footer>不必总在视觉底部；屏幕阅读器按DOM顺序读取，位置不影响其语义作用
<main></main>是唯一且不可替代的核心容器
每个页面最多一个<main></main>，它代表该页独一无二的主要内容。不能把它当“样式盒子”滥用——比如把侧边栏、广告位或全局导航放进<main></main>，会误导辅助技术判断主次。若页面是仪表盘，<main></main>应包裹数据视图区，而非整个网格布局。
- 跳过
<main></main>直接写<h1></h1>，可能让屏幕阅读器误判标题归属 - 服务端渲染时，确保
<main></main>始终存在且不为空——空<main></main>比不用更伤体验
<article></article>与<section></section>的关键区分点
<article></article>强调“可独立分发”，比如一篇博客、一条新闻、一个用户评论；<section></section>强调“主题分组”，比如“技术细节”“性能对比”“用户反馈”。一个<article></article>里可以有多个<section></section>，但反过来不行——不能用<section></section>包裹整篇新闻，那它就该是<article></article>。
- 重复出现的内容块（如商品卡片列表）每个都该用
<article></article>，而非外层套个<section></section>再统一写标题 - 没有标题的
<section></section>语义薄弱，建议补上<h2></h2>~<h6></h6>，否则可能被忽略
让<nav></nav>真正服务于导航意图
不是所有链接集合都是<nav></nav>。主导航、面包屑、页内锚点跳转才适用；页脚的“关于我们”“联系方式”虽是链接，但属于联系信息而非导航路径，更适合放在<footer></footer>里普通段落中。一个页面可有多个<nav></nav>，例如顶部主导航 + 文章内目录导航，用aria-label区分用途更稳妥。
-
<nav></nav>内避免放搜索框或登录入口——它们是功能控件，不是导航项 - 移动端下拉菜单的DOM结构仍应保持线性，不能因CSS隐藏就省略
<nav></nav>包裹
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
