高频语义标签使用边界决定可访问性与SEO效果：删掉后不影响主逻辑用aside，图文强归属用figure，datetime/alt/type缺一不可；Chrome Accessibility面板报错即语义断点。
别背标签，先盯住12个高频语义标签的使用边界——记错或漏用它们，Lighthouse 会直接标红“Missing alt”“main not found”“time missing datetime”这类问题，不是浏览器不渲染，而是机器读不懂你。
怎么快速定位该用哪个标签：看内容能不能被整块删掉
这是比查文档更快的现场判断法。浏览器不校验拼写，但语义错位会导致屏幕阅读器跳过主内容、SEO 权重稀释、甚至 CSS main + section 选择器失效。
-
<header></header>：出现在下（全站页眉），也允许嵌套在<article></article>或<section></section>内部（局部标题区）；但别往<nav></nav>里塞<header></header>，它本身已是导航容器 -
<aside></aside>：内容删掉后，主流程逻辑依然完整——比如博客正文旁的作者简介、延伸阅读链接；若删了它导致段落衔接断裂，那它大概率该是<section></section>甚至<article></article> -
<figure></figure>+<figcaption></figcaption>：必须成对出现，且图文有强归属关系；纯装饰图、背景图、图标字体一律不用它，走<img src="" alt="描述性文字">或 CSSbackground-image
哪些属性一漏就出事：datetime、alt、type 是硬门槛
这些不是“可选优化项”，而是语义成立的必要条件。Chrome 的 Accessibility 面板、W3C Validator、Lighthouse 全部会报错。
-
<time></time>不带datetime属性 = 白写：<time>2024-06-15</time>对机器无效；正确写法是<time datetime="2024-06-15">六月十五日</time> -
<img alt="想要掌握HTML怎么进行标签记忆练习 HTML标签速查技巧【心得】" >的alt不能为空字符串或占位符如"图片"；Lighthouse 明确要求“meaningful text alternative”，哪怕写alt="公司Logo，蓝色渐变字母A"也比空着强 -
<button></button>在表单内默认是type="submit"；不加type="button"就点一下可能意外提交整个表单——这个坑连很多老手都踩过
练熟的最快路径：三篇真实源码 + 一次 Accessibility 面板检查
打开任意主流新闻站（BBC、Reuters、财新网），右键「查看页面源代码」，搜索 <main></main>、<article></article>、<time></time>，观察它们怎么嵌套、标题怎么配、datetime 怎么写。看三篇，比背十遍定义管用。
立即学习“前端免费学习笔记（深入）”；
- 练习时关掉所有编辑器自动补全，手敲
<article><header><h2>标题</h2> <time datetime=""></time></header><p>正文</p></article>，强迫自己思考每层意图 - 写完立刻打开 Chrome DevTools → 「Accessibility」面板，红色报错项就是你语义断点所在；重点看 “
mainelement not found”“figurewithoutfigcaption” 这类提示 - 别碰
<div> 嵌套超三层的页面；如果发现某区块没标题、也没独立分发价值，那就老实用 <code><div>，强行套 <code><section></section>反而更错真正卡住人的从来不是记不住
<nav></nav>这个词，而是不确定页脚里一堆友情链接该不该包进<nav></nav>——答案是：除非它是全站主要导航路径，否则不用。语义标签的复杂点，永远落在“上下文判断”上，不在拼写本身。
