应使用HTML5语义化标签替代div堆砌，如<header><nav><main><article><section><aside><footer>，确保结构清晰、SEO友好、可访问性强；标题需严格嵌套不跳级；<main>须唯一且为<body>直系子元素，符合WCAG 2.1 AA标准。
用语义化标签替代 div 堆砌
HTML5 提供了 <header>、<nav>、<main>、<article>、<section>、<aside>、<footer> 等语义化标签，它们不是“可选装饰”，而是浏览器和辅助技术识别内容角色的依据。滥用 <div> 会导致结构扁平、SEO 削弱、屏幕阅读器无法正确导航。
- 一个页面通常只应有一个
<main>，且不能嵌套在<article>或<aside>内 -
<section>必须有明确的主题（通常带<h2>–<h6>），否则不如用<div> -
<nav>仅用于主要导航链接集合；页脚链接、面包屑、分页控件不属于<nav> - 避免
<section>套<section>而无实质层级关系——这时更可能是<article>或普通容器
标题层级必须严格嵌套且不可跳级
HTML 标题 <h1>–<h6> 不是样式标签，而是文档大纲的骨架。跳级（如 <h1> 后直接 <h3>）会让大纲解析器（如 Chrome 的“文档大纲”面板、NVDA 屏幕阅读器）丢失结构逻辑，影响可访问性和 SEO。
- 每个
<section>、<article>、<aside>可有自己的<h1>（在 HTML5 outline algorithm 中成立），但实践中仍推荐统一用<h2>开始以兼容旧工具 -
<h1>应全页唯一，代表页面核心主题；<h2>是一级子主题，<h3>是其下细分，依此类推 - 用浏览器开发者工具的“Accessibility”或“Elements > Outline”视图实时验证大纲是否连贯
确保 <body> 直接子元素反映真实内容流
很多模板习惯把所有内容塞进一个顶层 <div id="app"> 或 <div class="wrapper">，这人为打断了 HTML 的天然块级流和语义继承。搜索引擎与无障碍工具依赖 <body> 下的直接子元素判断内容优先级和区域划分。
-
<header>、<nav>、<main>、<aside>、<footer>应作为<body>的直系子元素（顺序按视觉/逻辑流排列） - 若需布局包裹，用 CSS Grid / Flex 容器替代 DOM 层级包裹；例如给
<main>加最大宽度，直接在其上设max-width，而非套一层<div class="container"> - 检查
document.body.children在控制台输出，确认没有无关的包裹<div>
用 <main> 显式标出核心内容区域
很多人以为 <main> 是锦上添花，其实它是 WCAG 2.1 AA 级可访问性要求：键盘用户按 Ctrl+Alt+I（或特定快捷键）跳转到主要内容，依赖的就是 <main> 标签。没有它，辅助技术只能靠启发式猜测，极易出错。
立即学习“前端免费学习笔记（深入）”；
-
<main>内不应包含重复性内容（如站点导航、侧边栏广告、页脚链接）——这些属于<nav>、<aside>、<footer> - 同一页面不可出现多个
<main>；若存在多个独立内容区块（如仪表盘多卡片），用<article>包裹各卡片，整体仍由一个<main>包围 - 服务端渲染时注意：若
<main>被框架模板动态替换，需确保最终 HTML 中该标签真实存在且非空
