html5语义化布局要求用标签名表达内容角色，main必须唯一且与header、nav等同级；section需带标题，article用于可独立传播内容；aside表示附属内容，header/footer可嵌套但须分清层级。
HTML5语义化布局的核心，是用标签本身表达内容角色，而不是靠class名“假装”有结构。浏览器、屏幕阅读器和搜索引擎只认标签名，不读class；语义错位不仅影响可访问性，还会拖累SEO和Lighthouse评分。
main必须唯一且平级
<main></main>代表整页唯一核心内容区域，规范强制要求：
- 整个文档中只能出现一次
- 不能嵌套在
<header></header>、<footer></footer>、<aside></aside>、<nav></nav>或另一个<main></main>内部 - 应与
<header></header>、<nav></nav>、<aside></aside>、<footer></footer>并列于下 - 内部可包含
<article></article>、<section></section>等，但不可包裹导航栏或侧边栏
section和article分工明确
<section></section>是带标题的主题分组，<article></article>是可独立传播的内容单元——两者不能混用：
-
<section></section>必须含<h2></h2>–<h6></h6>，例如「产品参数」「用户评价」；无标题就等于<div> <li> <code><article></article>用于博客正文、新闻条目、微博卡片等能脱离页面被单独引用、RSS推送的内容 -
<article></article>内可嵌套<section></section>（如文章的子章节），但<section></section>内若放多条评论，每条评论应为<article></article>，而非再套<section></section> - 适合：文章页右侧的「作者简介」「延伸阅读」「术语解释」
- 不适合：全站左侧导航（该用
<nav></nav>）、无关广告（降级为<div role="complementary">）、通用客服入口 <li> <code><aside></aside>必须与<main></main>同级，不可包在<main></main>里——三栏视觉布局可用CSS Grid/Flex实现，但语义层级不能妥协 - 页面级
<header></header>通常含网站logo、主导航；区块级<header></header>则放该文章的标题、作者、时间 - 页面级
<footer></footer>放版权信息；<article></article>内的<footer></footer>可放编辑记录、标签、分享链接 - 避免把搜索框、登录入口硬塞进
<header></header>——它们更适配<form></form>或<nav></nav>中的辅助导航
aside不是“右边那个盒子”
<aside></aside>语义是“附属内容”，关键看是否与当前上下文相关且可独立存在：
header/footer可复用但需分清层级
<header></header>和<footer></footer>既可用于整个页面，也可用于<article></article>或<section></section>内部：
