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