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