html5语义标签的核心是让内容被机器与人共同理解：header、nav、main、article、section、aside、footer各司其职，须严格遵循嵌套规则与使用场景，配合标题层级、time、alt等细节才完整。
HTML5结构标签不是为了“好看”，而是为了让页面真正“被理解”——浏览器、搜索引擎、屏幕阅读器和开发者，都能一眼看懂哪部分是导航、哪部分是正文、哪部分是补充信息。用对标签，比写对样式更关键。
核心语义标签各司其职
每个标签都有不可替代的逻辑角色，不能凭感觉替换：
-
：表示一个“区块的头部”，可以出现在页面顶部，也可以出现在每篇 里（比如文章标题+作者+时间）；一个页面可有多个，但每个都应与其父容器内容直接相关。 - ：只包裹真正起导航跳转作用的链接集合；按钮、图标、搜索框若不提供页面级导航，就不该放进
-
：全页唯一，且不能嵌套在
、 - ：用于能独立存在、可被单独分发或复用的内容，如博客正文、新闻条目、论坛帖子；它自带隐含的语义边界。
- ：按主题组织的一组内容，比如“产品介绍”“客户评价”“技术参数”，需配有标题（h1–h6），否则语义不完整。
- ：与主内容相关但非核心的旁注信息，如侧边栏推荐、作者简介、术语解释；不是所有“在右边的东西”都叫aside。
- ：对应其父元素的尾部，可以是页面级页脚，也可以是某篇文章底部的版权或评论入口。
基础页面骨架要稳
从外到内、按内容流顺序搭建，避免靠CSS强行“挪位置”：
- 第一行必须是
，且html>带<code>lang属性（如lang="zh-CN"）； - 内按自然阅读顺序排列：
<header></header>→<nav></nav>→<main></main>→<aside></aside>（如有）→<footer></footer>； 内部不要直接堆砌段落，而应根据内容粒度使用 或 进一步分组。
嵌套规则不能踩坑
语义层级错乱会削弱标签价值，甚至影响无障碍支持：
绝不能作为 或 和 - 避免连续四层以上语义标签嵌套（如
），会让结构难读、维护困难； - 所有语义标签必须严格闭合，不用自闭合写法（如
<header></header>是无效的）。
配合其他语义细节才完整
结构标签只是起点，搭配细节才能真正“会说话”：
- 每页确保只有一个
（通常在
或首篇 中），用 –
体现内容层级；
- 日期用，让机器可解析；
- 图片必须带
alt属性，图标类图片可为空（alt=""），但不能省略； - 能用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
