真正要记的是12个高频语义标签，如、、、、、、、、、、、，它们影响可访问性、SEO和CSS行为。
哪些 HTML 标签真得记？哪些根本不用背
浏览器不校验拼写错误的标签，但写错 <div> 和 <code><span></span> 的语义、乱用 <section></section> 或 <article></article>，会在可访问性、SEO、甚至 CSS 选择器行为上悄悄出问题。真正要“记”的不是全部 100+ 个标签，而是那 12 个高频、有明确语义边界、且容易被误用的。
常见错误现象：<div> 嵌套 5 层解决布局、用 <code><p></p> 包按钮、把 <h1></h1> 当作加大字体的样式工具。
-
<header></header>/<footer></footer>：每个独立内容块（比如一篇文章）都能有自己的<header></header>，不只页面顶部才用 -
<time></time>必须带datetime属性才有机器可读价值，光写<time>2024-06-15</time>是无效的 -
<button></button>默认是type="submit"，表单里不加type="button"就可能意外提交
怎么靠结构和场景反推标签，而不是硬背
与其记“<aside></aside> 是侧边栏”，不如记住：“当一段内容可以被整块删掉，不影响主流程理解时，它大概率该用 <aside></aside>”。这是语义的本质——描述内容和上下文的关系。
使用场景举例：
立即学习“前端免费学习笔记（深入）”；
- 博客正文里的作者介绍卡片 →
<aside></aside>（补充信息，非主线） - 导航菜单包裹在
<nav></nav>里，但页脚一堆链接不一定用<nav></nav>（除非它是主要导航路径） - 表格数据必须用
<table>，用 <code><div> + CSS Grid 模拟表格结构 → 屏幕阅读器无法识别行列关系 <h3> <code><main></main>和<section></section>容易混淆的三个判断点这两个标签都表示“内容区块”，但层级和意图完全不同。混淆后最直接的影响是辅助技术跳过主内容，或搜索引擎降权。
判断依据：
- 一个页面只能有一个
<main></main>，且它不能出现在<article></article>、<aside></aside>、<nav></nav>、<header></header>、<footer></footer>内部 -
<section></section>必须有标题（<h2></h2>–<h6></h6>），否则语义断裂；没有标题就该考虑用<div> <li>如果区块只是视觉分组（比如背景色不同），没独立主题，别强行套 <code><section></section> - 打开任意新闻网站，右键「查看页面源代码」，搜
<article></article>，看它里面怎么组织<header></header>、<time></time>、<figure></figure>—— 看三篇，比背十遍定义管用 - 写完 HTML 后，用 Chrome 开发者工具的「Accessibility」面板检查，红色报错项基本就是你用错/漏用的语义标签
- VS Code 装插件
Auto Rename Tag，改<main></main>会自动同步闭合标签，减少拼写焦虑
HTML 标签记不住？先停掉所有“记忆法”练习
人脑对抽象符号的记忆效率极低，但对“这个位置该放什么”有很强模式识别能力。真正卡住你的不是记不住
<figure></figure>，而是不确定图片配文字说明时，该用<figure></figure>+<figcaption></figcaption>，还是<div> + <code><p></p>。实操建议：
复杂点在于：语义不是非黑即白的规则，而是一套协作约定。你写对了
<time datetime="2024-06-15"></time>，但后端返回的时间格式是"15 Jun 2024"，前端还得做转换——标签只是起点，不是终点。 - 一个页面只能有一个
