必须且只能出现一次，是页面唯一主内容容器，不得嵌套在内；强调可独立分发，仅作依赖上下文的逻辑分组。
看 <main></main> 是否被正确使用
很多开发者知道 <main></main> 存在，但实际项目里常被忽略或滥用。它必须且只能出现一次（页面级），且不能嵌套在 <article></article>、<aside></aside>、<footer></footer>、<header></header>、<nav></nav> 内——否则会破坏辅助技术对“主内容”的识别逻辑。常见错误包括：<main></main> 包裹整个 ，或在多个卡片组件里重复写 <main></main>。真正有经验的人会先画信息流图，再决定 <main></main> 的边界。
检查 <section></section> 和 <article></article> 的嵌套关系
这两个标签最容易混淆。关键区别在于独立性：<article></article> 必须能脱离当前页面被单独分发（比如 RSS 订阅、转发到社交平台），而 <section></section> 只是主题分组，没有发布语义。常见反模式包括：用 <section></section> 包裹单篇博客（该用 <article></article>）；或把用户评论区整个塞进一个 <article></article>（每条评论才应是独立 <article></article>）。正确嵌套示例：<section><h2>产品列表</h2>
<article><h3>产品A</h3></article><article><h3>产品B</h3></article></section>。
观察 <time></time> 和 <figure></figure> 是否出现在合适位置
这类细节型标签的使用频率，直接反映开发者是否关注可访问性和结构严谨性。<time></time> 不只是美化日期，它的 datetime 属性会被屏幕阅读器朗读为标准时间格式，也影响 SEO 时间权重。如果文章发布时间仍用纯文本 <p>2026年8月25日</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5117" title="HTML Extract"><img
src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="overflowclass">HTML Extract</a>
<p class="overflowclass">使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p>
</div>
<a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>，说明没考虑机器可读性。<figure></figure> 也不是“有图就包”，它要求图文强关联且可独立理解（比如图表+说明文字），若只是装饰性头图，用 <img> 加 aria-hidden="true" 更合适。
验证 <nav></nav> 是否只用于主导航链路
<nav></nav> 的语义非常明确：仅包裹网站级或文档级的主要导航区块。常见误用包括：<nav></nav> 包裹面包屑（该用 <ol></ol> + aria-label="breadcrumb"）、页内锚点跳转菜单（属于 <section></section> 内部导航，不需 <nav></nav>）、甚至分页控件（应为 <div role="navigation"> 或自定义 ARIA）。真正老练的开发者会先问：“这个导航是否能让用户在不看上下文的情况下，快速切换到其他一级内容区域？”——答案是否定的，就不该用 <code><nav></nav>。
语义化不是贴标签比赛，而是持续做判断：这个内容对人意味着什么？对机器意味着什么？最容易被忽略的，其实是那些“看起来没问题”的地方——比如用 <section></section> 替代 <div> 却没配标题，或给 <code><article></article> 加了 id 却没考虑它可能被跨域引用时的唯一性冲突。
