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