html5语义化结构要求标签精准表达内容角色：header、nav、main、footer构成基础骨架且边界严格；article用于可独立传播内容，section用于主题分组；aside表关联侧边信息，figure/figcaption专用于图文；time和连续heading保障可访问性与seo。
HTML5页面结构不是把标签堆上去，而是让每个标签承担明确的内容角色。语义化和功能定义本就是一体两面——标签选对了，结构自然清晰，机器能理解，人也容易维护。
header、nav、main、footer：基础骨架不能错
这四个标签构成页面最底层逻辑框架，缺一不可，且有严格使用边界：
- header 不只是顶部横条，它可出现在页面级或 article/section 内部，只要包裹该区块的标题、logo 或简介即可
- nav 专用于主导航，比如顶部菜单、侧边分类入口；页内锚点链接或面包屑导航一般不用 nav，避免语义过载
- main 必须唯一，且不能嵌套在 article、aside、footer 中；它是主体内容的直接容器，里面可以放多个 article 或 section
- footer 同样可多层存在，页面底部用一次，每篇 article 底部也可配一个 footer 放发布时间、作者、标签等元信息
article 与 section：区分“独立”和“主题分组”
这两个最容易混用，关键看内容是否具备传播性与完整性：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用 article 包裹能单独被 RSS 抓取、被分享、被搜索引擎列为独立结果的内容，例如博客正文、新闻稿、用户评论
- 用 section 划分同一主题下的不同子模块，比如商品页里的「参数详情」「用户评价」「售后说明」——它们合起来才构成完整信息，拆开意义不全
- article 内部可以包含多个 section，但 section 里不应塞进另一篇完整文章；无标题的纯内容区块，优先考虑 div 而非 section
aside 和 figure：侧边与图文的精准表达
它们不是装饰性标签，而是传递特定关系的语义信号：
- aside 表示与主内容相关但可移除不影响主线的信息，如侧边栏作者介绍、同类文章推荐、广告位；若内容与当前 article 强绑定（比如某段代码的注释），应放在 article 内部而非 aside
- figure 和 figcaption 是一对，专为图像、图表、代码块等“插图类内容”设计；figcaption 必须是 figure 的直接子元素，用来说明该图的用途或来源，不是随便加个 p 就行
time 标签与 heading 层级：细节决定可访问性质量
语义化不只是大结构，时间标记和标题顺序直接影响屏幕阅读器体验和 SEO 权重：
- 所有日期、时间都该用 time 标签，并带上 datetime 属性，比如 ，便于机器解析和跨平台同步
- heading 必须连续使用：h1 → h2 → h3，不能跳级；一篇文章中 h1 只出现一次（通常是文章标题），内部小节用 h2，子项用 h3，这样大纲工具和辅助技术才能正确生成导航树
- 避免用 CSS 把 h2 显示成小字号来“假装”是普通文本——视觉样式不能覆盖语义层级
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
