表示页面唯一核心内容区，不可嵌套于其他语义标签内；是带标题的主题区块，可重复嵌套；为可独立分发的内容单元；表主内容附属信息，与位置无关；和提升机器可读性。
HTML语义化不是“锦上添花”，而是页面结构的底层契约——用对标签，浏览器、搜索引擎、屏幕阅读器才能正确理解你写的到底是什么。错用 <div> 套娃，等于主动放弃可访问性、SEO 和长期维护权。
<h3>什么时候该用 <code><main></main> 而不是 <section></section>
<main></main> 表示文档中**唯一**的、与当前页面直接相关的核心内容区域；<section></section> 是按主题组织的通用区块，可嵌套、可重复。
- 一个页面只能有一个
<main></main>，且不能出现在<article></article>、<aside></aside>、<footer></footer>、<header></header>或<nav></nav>内部 -
<section></section>必须有明确的主题（通常带<h2></h2>–<h6></h6>），纯装饰性容器或仅用于样式布局的分组，不该用它 - 常见误用：
<section class="hero-banner"></section>—— 如果里面没有标题、也不承载独立主题信息，就只是视觉容器，应改用<div> <h3> <code><article></article>的边界在哪<article></article>代表能**独立存在、可被单独分发或重用**的内容单元，比如一篇博客、一条新闻、一个用户评论、甚至一个微博卡片。- 判断标准：把它复制粘贴到另一个网站，是否仍能自解释？是否自带时间、作者、标题等元信息？
- 嵌套是允许的：一个
<article></article>里可以有多个<section></section>，也可以包含其他<article></article>（如评论列表中的每条评论） - 反例：
<article><h3>关于我们</h3> <p>我们是一家公司...</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></article>—— “关于我们”是页面固定板块，不具独立分发价值，应改用<section></section>
<aside></aside>不等于“右边栏”<aside></aside>描述的是**与主内容相关但可分离**的附属信息，和位置无关。它可以出现在左侧、内联、甚至文档末尾。- 典型场景：侧边栏的“推荐阅读”、文章内的术语注释（
<aside><small>WebAssembly 是一种二进制指令格式...</small></aside>）、作者简介卡片 - 错误用法：
<aside><nav>...</nav></aside>—— 导航属于全局结构，应使用<nav></nav>，而非塞进<aside></aside> - 兼容性注意：IE 不支持
<aside></aside>的语义解析（但不影响渲染），辅助技术依赖其语义，别为兼容旧 IE 牺牲结构
为什么
<time></time>和<mark></mark>容易被忽略这两个标签不改变视觉，却在机器可读性上起关键作用：
<time></time>提供标准化时间戳，<mark></mark>标记上下文相关的高亮，而非强调。-
<time datetime="2026-08-25">今天</time>让搜索引擎和日历工具识别真实日期，比写“2026年8月25日”更可靠 -
<mark></mark>应用于搜索结果中匹配关键词、文章中需临时突出的片段，不是替代<strong></strong>或<em></em>的样式工具 - 遗漏后果：时间信息无法被聚合分析，高亮逻辑无法被自动化脚本提取，可访问性树中缺失语义节点
真正难的不是记住每个标签怎么写，而是在写第一行 HTML 前，先问一句：“这段内容，在脱离样式后，还剩下什么含义？”
