<main>必须唯一且直接位于body下，不得嵌套于article、nav等容器内；header/footer可多层复用但须匹配上下文；section需有标题，article应为独立内容单元；nav仅用于导航链接，aside限于关联性弱的补充信息。
主流网站实际用的 HTML5 语义化结构长什么样
不是教科书里的理想结构，而是真实生产环境里你打开 DevTools 就能看到的结构。主流站点（如 GitHub、MDN、Shopify）基本都采用 <header> + <nav> + <main> + <aside> + <footer> 这套组合，但关键在于它们如何“混用”和“降级”。
常见现象：很多页面在 <main> 里嵌套多个 <section>，每个 <section> 再包一层 <article> 或 <div>；<aside> 不一定在右侧，有时是弹窗侧边栏或移动端抽屉；<nav> 可能不止一个（顶部主导航 + 底部页脚导航 + 文章内目录）。
-
<header>通常只包裹 logo、主标题、搜索框，不包含导航——导航单独用<nav> - 大量使用
role="banner"、role="navigation"等 ARIA 属性补足语义，尤其当结构因 CMS 或框架限制无法严格按规范写时 -
<main>必须且只能出现一次，且不能被<article>、<aside>、<nav>、<header>、<footer>包裹——这是 WCAG 和搜索引擎明确要求的
为什么 <div> 依然满天飞，而不是全换语义标签
语义标签不是银弹。真实项目里 <div> 仍占 DOM 节点总量 60% 以上，原因很实在：
- 布局需要：Flex/Grid 布局容器本身无语义，硬套
<section>会误导辅助技术——此时<div class="grid-container">更准确 - 复用组件：React/Vue 组件模板中，根节点常为
<div>，因为语义由父上下文决定，子组件不该越权声明 - 兼容兜底：老版本 Safari 对
<main>的 focus 行为支持不一致，部分团队仍用<div role="main">保稳 - CMS 输出限制：WordPress、Shopify 主题编辑器导出的 HTML 常固定输出
<div class="content">，强行改标签可能破坏 JS 绑定逻辑
<head> 里哪些 meta 标签真正在影响 SEO 和渲染
别再堆砌无用 meta。实测有效且被主流爬虫/浏览器真正读取的只有这几个：
立即学习“前端免费学习笔记（深入）”；
-
<meta charset="utf-8">：必须，缺它中文直接乱码 -
<meta name="viewport" content="width=device-width, initial-scale=1">：移动端渲染基石，漏掉会导致页面缩放异常 -
<title>：唯一强制 SEO 字段，长度建议 50–60 字符，过长会被截断 -
<meta name="description" content="...">：Google 会用于摘要展示，但不影响排名权重 -
<link rel="canonical" href="...">：解决重复内容问题，电商详情页、分页页必备 -
<meta name="robots" content="index,follow">：默认值，仅当需禁止收录时显式写noindex
像 keywords、author 这类 meta 已被所有主流搜索引擎忽略，写了纯属占体积。
容易被忽略的结构陷阱：嵌套错误与可访问性断裂
最隐蔽的问题不是标签没用对，而是“用对了但嵌套错”：
-
<h1>到<h6>必须严格层级递进，跳级（如<h2>后直接<h4>）会让屏幕阅读器丢失结构感知 -
<main>里不能出现<header>或<footer>—— 这些属于页面级语义，子区域该用<section>+<h2>起头 -
<nav>必须含至少一个链接，空<nav></nav>会被部分 AT（辅助技术）跳过，等同于删除该区域 - 用
<button>模拟链接却没加role="link"和tabindex="-1"，键盘用户无法用 Enter 触发跳转
结构不是写完就完事，得用 Chrome 的 Lighthouse「Accessibility」审计跑一遍，重点看「Heading levels」和「Document language」两项是否报错。
