语义清晰的网页依赖原生HTML标签而非CSS类名：<header>表示头部，<nav>表示导航，<main>为唯一主内容区，<article>标识独立可分发内容，<section>须带标题且表主题分组，错误使用<div>伪装将导致爬虫与屏幕阅读器无法识别结构。
语义清晰的网页不是靠 CSS 类名堆出来的，而是靠浏览器原生理解的标签结构撑起来的 —— <header> 就是头部，<nav> 就是导航，<main> 就是唯一主内容区，这些标签本身就在向机器和人传递确定含义。
搜索引擎怎么“看懂”你的页面？靠的是标签语义，不是 class 名
爬虫不会解析 class="top-nav" 或 id="page-header"，它只认标准语义标签。当你用 <nav> 包住菜单链接，爬虫立刻知道这是导航区域，会优先抓取其中的 <a>；用 <main> 包住文章正文，它就明确这是当前页最核心、不可重复的内容。
- 错误做法：
<div class="article"><h2>标题</h2><p>正文</p></div>→ 爬虫无法区分这是文章、广告还是评论 - 正确做法：
<article><h2>标题</h2><p>正文</p></article>→ 爬虫识别为独立可分发内容，提升索引权重 -
<section>必须带标题（<h2>–<h6>），否则语义断裂；而<article>可以没有标题，但必须能独立存在（比如一条微博、一个用户评论）
屏幕阅读器跳不到你想要的位置？大概率是用了 div 伪装语义
视障用户按 Ctrl+Shift+H 列出所有标题，按 D 跳到 <main>，按 N 跳到 <nav>。如果你用 <div id="main-content">，这些快捷键全部失效 —— 阅读器根本不知道哪块是“主内容”。
-
<header>和<footer>必须成对出现在同一上下文层级：页面级<header>放在<body>下，文章级<header>可以放在<article>内部 - 一个页面只能有一个
<main>，且不能嵌套在<article>、<aside>或<section>里 -
<aside>不等于“右边栏”，而是指与主内容相关但可分离的补充信息（如侧边引用、作者简介），不是所有浮动容器都该用它
开发者协作时，谁愿意猜 class="jumbo-box-3" 是啥？
团队里没人想花时间翻 CSS 文件确认 class="page-head" 是否包含 logo + 搜索框 + 登录入口。而看到 <header>，所有人立刻知道：这里该放品牌标识、主导航或全局操作。
立即学习“前端免费学习笔记（深入）”；
- 语义标签天然带隐式 ARIA 角色，比如
<nav>自动等价于role="navigation"，无需手动加 - 不加样式时，
<article>和<section>在浏览器中默认有 margin-top/margin-bottom，这是语义带来的视觉暗示，不是 bug - 滥用
<section>套<section>（比如三层嵌套）会让 DOM 层级失真，屏幕阅读器可能把子节误读为并列章节
真正容易被忽略的点是：语义化不是“用了新标签就万事大吉”。<article> 用在新闻列表里是对的，但用在每条搜索结果卡片里就过重了；<nav> 适合主导航，但面包屑用 <ol> + aria-label="Breadcrumb" 更准确。语义的精度，取决于你是否在写标签前先问一句：“这个区块，对机器和人都意味着什么？”
