应优先用<article>表示可独立分发、重用的内容单元（如博客、新闻、评论），而<section>仅用于有主题但依赖上下文的逻辑分组；错用会破坏结构可读性与无障碍访问。

语义化不是“加点新标签就完事”，而是用对标签表达真实内容关系——错用 <section> 包裹导航、把 <article> 当容器盒用，反而破坏结构可读性。

什么时候该用 <article> 而不是 <section>

<article> 表示能独立存在、可被单独分发或重用的内容单元，比如一篇博客、一条新闻、一个用户评论；<section> 是文档中逻辑上自成一节的区域，但不强调独立性。

• ✅ 正确：<article> 里嵌 <header>（标题）、<footer>（作者/时间），甚至再套一层 <section>（如“背景”“分析”小节）
• ❌ 错误：用 <article> 包整个侧边栏、轮播图或页脚链接列表——它们既不独立，也不可被 RSS 抓取或单独分享
• ⚠️ 注意：<article> 可以嵌套（如评论区里每条评论都是 <article>），但 <section> 嵌套过深会让大纲混乱，浏览器开发者工具的“大纲视图”会明显变扁平

<main> 的边界和常见误用

<main> 必须且只能出现一次，且不能是 <article>、<aside>、<header>、<footer>、<nav> 的子元素——它代表页面唯一核心内容流。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• ✅ 正确：在 <body> 直接子级放 <main>，里面放标题、正文、图片、评论区（<article>）等主体内容
• ❌ 错误：把网站全局导航、面包屑、页脚版权信息塞进 <main>；或在一个 <article> 内部又写一个 <main>
• ⚠️ 注意：某些 CMS 模板会默认给每个区块加 <main>，导致多个 <main> 标签，屏幕阅读器可能只聚焦第一个，其余被忽略

标题层级（<h1>–<h6>）与语义结构强绑定

标题不是样式开关，而是内容骨架的锚点。浏览器大纲、屏幕阅读器跳转、SEO 权重分配都依赖它的真实嵌套关系。

立即学习“前端免费学习笔记（深入）”；

• ✅ 正确：<article> 内部用 <h2> 作主标题（因 <h1> 应留给页面整体），其子 <section> 用 <h3>，保持层级递进
• ❌ 错误：全篇只用 <h2> 或 <h3>，靠 CSS 改大小模拟标题；或在 <aside> 里放 <h1>，干扰主内容权重
• ⚠️ 注意：跳级（如 <h2> 后直接 <h4>）会让大纲断裂，部分辅助技术无法正确生成导航树

真正难的不是记住标签名，而是每次写 HTML 前先问一句：“这段内容脱离样式后，还能被机器准确归类吗？”——这个判断过程没法自动化，得靠人盯住内容本质。