html语义化标签是让机器直接理解结构的原生信号，等标签被浏览器和辅助技术识别并赋予特定含义，而仅是无意义的空盒子。

HTML语义化标签不是“更好看的

”，而是让浏览器、搜索引擎和屏幕阅读器能直接读懂结构的原生信号——不用猜 class 名，也不依赖额外注释。

为什么 <header></header> 不等于 <div class="header"> <p>两者在渲染上几乎没差别，但语义层天差地别：<code><header></header> 是浏览器内置识别的“头部区域”，屏幕阅读器会主动播报“进入页眉”，SEO 工具会将其内容权重提升；而 <div class="header"> 对机器而言只是个空盒子，class 名写成 <code>"top" 或 "head" 就彻底失去上下文。

常见错误现象：

• 用 <div id="nav"> 包导航，结果屏幕阅读器跳过整个导航区 <li>多个 <code><main></main> 出现在同一页面，导致辅助技术无法定位核心内容
• 把版权信息塞进 <header></header>，违反其“顶部引导性内容”的语义边界

<main></main> 的唯一性与嵌套限制

<main></main> 必须全页仅出现一次，且不能出现在 <article></article>、<section></section> 或 <aside></aside> 内部——这是 W3C 强制规范，不是建议。

这样做是因为：<main></main> 表达的是“整页最核心、不可替代的内容”，比如博客正文、商品详情页主体。如果嵌套，机器就无法判断哪一层才是真正的“主”。

可操作建议：


Doc To HTML
使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。
下载
• 检查 DOM 结构时，用浏览器开发者工具搜索 <main></main>，确认只有一处匹配
• 文章列表页中，<main></main> 应包裹整个列表容器，每篇博文用 <article></article> 单独包裹，而非把 <main></main> 塞进每个 <article></article>
• 避免用 <main></main> 替代视觉居中的布局容器——那是 CSS 的事，不是语义的事

<article></article> 和 <section></section> 的关键区分点

<article></article> 强调“可独立分发”，比如一篇博客被 RSS 抓取、或转发到其他平台后，仍能自解释；<section></section> 只是逻辑分组，必须配合标题（<h1>–<h6></h6> </h1>）才成立，且脱离上下文可能意义不明。

典型误用场景：

• 用 <section></section> 包裹单篇新闻正文（应为 <article></article>）
• 在 <article></article> 内部用 <section></section> 却不加标题（W3C 要求 <section></section> 必须有明确主题，通常靠 heading 体现）
• 把用户评论区整体标为 <article></article>（每条评论才是独立 <article></article>，整个区域更适合 <section></section>）

IE9 及更老浏览器的兼容底线

HTML5 语义标签在 IE9+ 原生支持，但 IE8 及以下完全不认识 <header></header> 等标签——它们不会报错，但会当作未知元素，默认 display: inline，导致布局塌陷。

最小可行兼容方案（无需完整 polyfill）：

• 在 中加入 <script>document.createElement('header'); document.createElement('nav');</script>
• CSS 中补一句 header, nav, main, article, section, aside, footer { display: block; }
• 注意：仅需声明实际用到的标签，不必一次性创建全部 28 个

真正容易被忽略的是：即使加了 document.createElement，IE8 仍无法通过 ARIA 属性（如 role="banner"）补全语义——这意味着辅助功能依然缺失，只能保障基础渲染。