html语义标签的核心价值在于无样式、无脚本甚至无屏幕时仍能被正确理解，搜索引擎和辅助技术依赖其明确语义判断内容权重与结构。
HTML结构标签的语义价值，不在于让页面看起来更整齐，而在于让内容在没有CSS、没有JavaScript、甚至没有屏幕的时候，依然能被正确理解。
为什么搜索引擎会优先抓取 <article></article> 里的文字
爬虫不是靠视觉“看”网页，而是靠解析标签语义来判断内容权重。<article></article> 明确告诉它：“这段是独立、完整、可分发的内容”，比如一篇博客或新闻稿；而包裹同样内容的 <div class="post">，对爬虫来说只是个空盒子——它得额外读 class 名、上下文、甚至 CSS 文件才能猜意图。实际 SEO 数据显示，用 <code><article></article> + <h1></h1> + <time datetime></time> 组合的页面，核心关键词收录速度平均快 1.7 天。
常见错误现象：
- 把整页内容塞进一个
<div id="wrapper">，再靠 class 模拟所有结构 <li>用 <code><section></section>替代<article></article>包裹用户评论（评论是独立内容块，应属<article></article>） - 在
<nav></nav>里放搜索框或登录按钮（<nav></nav>只应含导航链接） - 多语言切换页：不同语言版本共用同一套布局，但每版只有一处
<main></main>，避免屏幕阅读器重复播报导航和页脚 - SPA 路由切换：Vue/React 中动态替换内容时，确保新内容插入到
<main></main>内部，而非追加到 body 底部 - 打印样式表：直接
@media print { aside, nav { display: none; } main { margin: 0; } }，无需写一堆 class 排除规则 - 用
<section></section>包裹无标题的轮播图或广告位（应改用<div role="region" aria-label="推荐内容">） <li>在 <code><article></article>外部手动写<h1></h1>（破坏了<article></article>的自包含语义，应把<h1></h1>放进<article></article>内部） - 给
<section></section>加aria-labelledby却忘了提供对应 ID 元素（屏幕阅读器会报“找不到引用”警告）
<main></main> 不是“主要内容区”的同义词，而是唯一性约束
<main></main> 的规范定义很硬：每个 HTML 文档有且仅有一个 <main></main>，且它不能是 <article></article>、<aside></aside>、<footer></footer>、<header></header> 或 <nav></nav> 的后代。它的作用不是“视觉上居中”，而是向辅助设备声明：“这里才是用户真正该关注的焦点”。
使用场景：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
用错 <section></section> 和 <article></article> 会让无障碍体验断层
<section></section> 表示“文档中的一个逻辑区段”，必须自带标题（<h2></h2>–<h6></h6>），否则语义不成立；<article></article> 是可独立存在、可被重用的内容单元，自带隐式标题层级。两者嵌套关系有明确约定：<article></article> 可以包含多个 <section></section>（如一篇教程里的“准备”“实操”“排错”章节），但 <section></section> 里不应塞多个 <article></article>（那说明它本该是 <main></main> 或列表容器）。
容易踩的坑：
最常被忽略的一点：语义标签本身不带默认样式，但浏览器内置的可访问性 API 会基于它们触发特定行为。比如 <nav></nav> 自动获得 role="navigation"，<main></main> 触发 role="main"；一旦你用 <div role="main"> 手动模拟，就失去了原生标签的隐式属性继承（如 focus 管理、历史记录联动）。这不是“能不能用”的问题，而是“用得够不够原生”的问题。</div>
