应优先用<article>标记可独立存在、能被RSS抓取或转发的内容（如博客正文、用户评论），用<section>组织依赖页面上下文的主题分组（如“安装步骤”），且必须配<h2>及以上标题；误用会误导机器解析。
不符合规范的语义化标签，比不用还危险——它会向浏览器、屏幕阅读器和搜索引擎传递错误信号，比如把导航塞进 <article>，等于告诉机器“这条版权信息是一篇可独立分发的新闻”。
怎么判断该用 <section> 还是 <article>
关键看内容能否脱离当前页面被单独理解或复用。
-
<article>必须能独立存在：博客正文、微博卡片、商品详情页 HTML 片段保存为文件后，不依赖原页面也能看懂 -
<section>是文档内部逻辑分组：比如“安装步骤”“常见问题”这些依附于当前页面才成立的部分，且必须带<h2>–<h6>标题 - 别把整个导航栏包进
<section>：它没标题、不可独立分发，用<nav>才对 -
<article>里可以嵌套<section>（如“代码示例”小节），但<section>不能替代<article>表达独立内容
<main> 和 <aside> 的嵌套边界在哪
<main> 是页面唯一主体区域，它的存在意义就是“这里才是用户真正要读/操作的内容”，所以边界非常严格。
-
<main>不能出现在<header>、<footer>、<nav>或另一个<main>内部 -
<aside>必须与<main>同级或嵌套在<article>里，不能塞进<main>当“侧边栏”——那会稀释主内容权重 - 页脚里的“关于我们”“条款链接”不是
<aside>，那是<footer>的一部分，用普通列表即可 - 如果页面是单页应用（SPA），路由切换时应动态更新
<main>内容，而非用 JS 显隐多个<main>
标题层级错乱会导致什么实际问题
跳级（如 <h1> 后直接 <h4>）或重复 <h1> 不只是结构丑，它会让屏幕阅读器用户彻底迷失上下文。
立即学习“前端免费学习笔记（深入）”；
- 每个页面有且仅有一个
<h1>，代表整页最高主题；子模块用<h2>，子模块里的小节用<h3>，以此类推 - 用 CSS 改变字号不能替代语义层级：把
<p class="title">加粗放大，对 SEO 和无障碍毫无意义 -
<h2>–<h6>必须嵌套在逻辑容器内（如<article>或<section>），不能散落在<body>顶层 - Chrome DevTools → Elements 面板右键元素 → “Inspect Accessibility Properties”，看 Level 是否与预期一致
<img> 的 alt 属性怎么写才算过关
空 alt="" 不等于省略，也不等于随便填；它是一种明确的语义声明：“这张图无文字信息，可跳过”。
- 数据图、截图、带文字的 banner 图，
alt必须描述核心信息（如alt="柱状图：2025年Q2各渠道转化率，微信渠道达38%"） - 纯装饰图（背景花纹、分割线）才用
alt=""；写成alt="decorative"或留空不写，都会被屏幕阅读器读出来，反而干扰 -
<img>在链接内时，alt应描述链接目标（如<a href="/blog"><img src="icon.png" alt="进入博客列表"></a>） - SVG 图标若用
<img>引入，同样需要alt；若内联 SVG，则用<title>和aria-hidden控制
最常被忽略的一点：语义标签不是写完就生效。<button> 没加 type="button" 会触发表单提交，<time> 的 datetime 格式错一位（如 "2026-08-25T18:48" 缺少秒或时区），机器就无法解析——语义必须从属性值开始精确。
