应优先使用语义化标签：<header>明确标识页头并提升可访问性与SEO，<article>用于独立可分发内容，<section>用于有主题但不独立的分组，避免滥用<div>和ARIA，精简DOM层级。
什么时候该用 <header> 而不是 <div class="header">
浏览器和屏幕阅读器完全不知道 <div class="header"> 是页头——它只是个无语义的盒子。而 <header> 明确告诉辅助技术“这是页面或区块的标题区域”，同时被搜索引擎识别为内容权重较高的结构节点。
- 每个页面最多一个顶层
<header>（在<body>直接子级），用于包裹网站 logo、主导航等全局头部内容 -
<section>或<article>内部可以再嵌套<header>，比如一篇博客的标题与作者信息 - 别给
<header>加多余 class，如class="header-wrapper"；它的语义已足够，CSS 可直接写header { } - 如果只是加个背景色或 padding 就套一层
<div>，那根本不需要任何标签——用 CSS 的padding或background解决就行
<section> 和 <article> 到底怎么选
关键看内容是否能独立存在、被单独引用或分发。这不是视觉分块工具，而是内容建模指令。
-
<article>适用于可自包含、可复用的内容单元：博客正文、新闻条目、用户评论、商品卡片 -
<section>用于有明确主题但不具备完整独立性的分组：「关于我们」「服务流程」「客户评价」这类页面内组织单元 - 每个
<section>应至少带一个<h2>~<h6>标题，否则语义失效；没有标题时，用<div>更诚实 - 别把整个
<main>里所有区块都塞进<section>——这会让结构信号过载，反而稀释重点
嵌套超过三层时，第一反应不该是加 class，而是删标签
DOM 深度每增加一层，就多一次 JS 遍历开销、一次 CSS 选择器匹配成本，还可能让屏幕阅读器迷失上下文。
- 检查开发者工具里元素的层级：如果看到
<div><div><div><p>这类结构，优先考虑能否用<section><h2>或<article><header>替代 - CSS 中启用
display: contents可让父容器“视觉消失”但保留 DOM 结构逻辑（注意：IE 不支持，Edge 79+、Chrome 65+、Firefox 63+ 支持） - 动态插入 HTML 时，避免拼接字符串套娃：
innerHTML += '<div><div>' + text + '</div></div>'；改用DocumentFragment或模板字符串 +insertAdjacentHTML - 用 BEM 命名替代深层选择器：把
.card .content .title改成.card__title，HTML 就不用堆三层<div>来满足样式需求
ARIA 不是语义补丁，加了 role="navigation" 的 <div> 依然不是导航
ARIA 只能补充已有语义的细节，不能凭空赋予语义。强行用 ARIA 伪装结构，对可访问性是负优化。
立即学习“前端免费学习笔记（深入）”；
-
<div onclick="jump()" aria-label="跳转到首页">首页</div>—— 屏幕阅读器会读出“跳转到首页”，但它不是链接，键盘无法聚焦，也无法被Tab访问 - 正确做法是直接用
<a href="/">首页</a>，或至少用<nav><a>…</a></nav> - 只有当原生标签无法表达意图时才用 ARIA：比如自定义下拉菜单需加
role="menu"和aria-expanded，但前提是它已经用<div role="menu">包裹了真实按钮与列表 - 滥用
tabindex="0"让非交互元素可聚焦，常导致焦点顺序错乱，比不加更难用
<div> 前停半秒：它承载的是样式、行为，还是内容含义？如果是前两者，大概率不该出现在 HTML 里。 
