html5语义标签的核心是明确内容角色而非样式：1. main必须唯一且直接承载核心内容；2. header/footer可多层复用但须匹配父元素主题；3. nav仅包含导航链接；4. article表示独立可分发内容，section需配合标题表达主题分组；5. aside须与邻近内容有逻辑关联。
HTML5语义标签不是为了“画框”，而是为了“说清角色”。它们不改变默认样式，但直接定义内容在页面中的逻辑位置与功能归属——header 是入口，nav 是路径，main 是目的地，article 是独立单元，section 是主题分组，aside 是补充说明，footer 是收尾。用对了，结构自然清晰；用错了，再漂亮的CSS也救不了混乱的骨架。
main 必须唯一且居中承载核心内容
main 标签代表页面真正要传达的信息主体，一个文档里只能有一个，也不能嵌套在 article、aside、header、nav 或 footer 里面。它通常紧跟在 header 和 nav 之后，包裹所有用户最关心的内容，比如博客正文、商品列表或表单主体。如果页面有多个独立内容块（如首页展示三篇不同文章），每篇用 article 包裹，全部放在 main 内；不要把 main 拆成几个，也不要把它塞进 section 里当普通容器。
header 和 footer 可多层复用，但需匹配上下文
页面级 header 放网站 logo 和主导航；article 里的 header 则放该文章的标题、作者、发布时间；section 的 header 可以是小节标题（必须含 h1–h6）。同样，页面底部的 footer 写版权信息，而某篇教程末尾的 footer 可以放“相关资源”或“打印版本”链接。关键不是数量，而是每个 header/footer 是否真实服务于其直接父元素的主题。
nav 只包导航链接，不包装饰性元素
nav 的本质是“可跳转的路径集合”。里面适合放 ul/li 结构的 a 标签，或带 role="navigation" 的语义化菜单。如果某个区域只有图标按钮但没 href 或没跳转逻辑，或者混入搜索框、登录状态提示，那就不是 nav 的职责——用 div + aria-label 更准确。一个页面可以有多个 nav（如顶部主导航 + 页脚快速链接 + 文章内目录），但每个都得名副其实。
section 和 article 的区别在于“是否自足”
article 表示能单独存在、被转载或 RSS 订阅的内容单元，比如一篇新闻、一条微博、一个产品卡片；它自带隐含的独立语义。section 则是主题性分组，没有独立分发价值，比如“用户评论区”“技术参数表”“相关推荐”，必须配合标题（h1–h6）才能明确“这一节讲什么”。不要用 section 替代 article 来包裹完整博文，也不要用 article 去套一个没有标题和作者的纯列表项。
aside 要与所在内容保持语义关联
aside 不等于“右边那块空白”。它必须和紧邻的 article 或 section 有逻辑联系：可能是该文章的术语解释、延伸阅读、作者简介，或是某组数据的来源说明。如果侧边栏放的是全站广告、无关推荐或通用客服入口，它就不该用 aside，而应放在 body 下独立区域，或用 div + aria-labelledby 明确作用域。放在 main 内的 aside，必须是对 main 内容的补充，而非干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
