HTML5语义化标签如<header>、<nav>、<main>、<article>、<aside>、<footer>可明确标识内容类别，其中<main>是唯一主内容区，比<body>更精准；<div>和<span>无语义，不可用于过滤。
HTML 文档结构本身不提供“内容过滤”能力，<html>、<head>、<body> 这类标签只是容器，不带语义过滤逻辑。真正能用于内容分类与隔离的，是 HTML5 引入的语义化结构标签，它们让机器（如爬虫、无障碍工具、JS 脚本）能区分“导航”“主内容”“侧边栏”“页脚”等区域。
哪些标签能明确标识内容类别？
浏览器和 JS 不会自动过滤，但你可以用这些标签作为选择器或语义锚点做手动过滤：
-
<header>：通常含 logo、站点标题、顶部导航，适合提取品牌信息或跳过重复头部 -
<nav>：专用于导航链接集合，可安全剔除或单独处理 -
<main>：文档中唯一、不可嵌套的主内容区，最接近“正文过滤目标” -
<article>：独立可分发的内容单元（如博客正文、新闻稿），常嵌套在<main>内 -
<aside>：与主内容相关但非核心的补充信息（如广告、推荐、作者简介） -
<footer>：页脚，常含版权、备案号、次要链接，多数场景需排除
注意：<div> 和 <span> 没有语义，不能用于分类过滤；靠 class 或 id 区分仍是弱信号，不如原生语义标签可靠。
为什么用 <main> 比用 <body> 更准？
<body> 包含所有可见内容，包括页眉、导航、页脚——它只是渲染容器，不是语义分区。而 <main> 是 W3C 明确规定的“文档主要主题所在”，且每个页面只允许一个（WAI-ARIA 也要求如此）。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用
document.querySelector('main')直接取主内容，比写document.body.children[2]或靠 class 名（如.content）稳定得多 - 若页面没写
<main>，不要硬补——可能破坏原有语义；优先检查是否有<article>或通过role="main"属性 fallback - 某些 CMS 输出的 HTML 会把
<main>套在<div>外层，这时仍以<main>为准，内部<div>只是样式载体
过滤时容易忽略的兼容性陷阱
IE11 及更早版本不识别 <main> 等语义标签，但不影响 DOM 结构——JS 仍能查到，只是默认无样式。真正的问题在以下两点：
- 部分旧版屏幕阅读器（如 JAWS 16 之前）不将
<main>当作导航快捷键目标，需额外加role="main" -
<aside>在某些 RSS 解析器里被误判为正文，因为其内容常含文字+链接，建议配合aria-label显式标注用途（如aria-label="related articles"） - 搜索引擎对
<section>的权重判断模糊，它只是“节”，不是“主内容”，别把它当<main>替代品
语义标签不是开关，而是契约：你写了 <main>，就得确保里面真装的是主内容；否则过滤逻辑再准，结果也是错的。
