语义化html标签是页面结构识别的硬性依据，影响可访问性和seo；唯一且不可嵌套，需独立可复用，仅表逻辑分块，强调内容相关性而非位置。
<header></header>、<nav></nav>、<main></main>、<section></section>、<article></article>、<aside></aside>、<footer></footer> 这些标签不是“可选装饰”，而是浏览器和辅助技术识别页面结构的硬性依据。不用它们，div 套来套去的页面在屏幕阅读器里就是一长串“盒子”，SEO 也容易把侧边广告当成主内容抓取。
什么时候该用 <main></main> 而不是 <section></section>
<main></main> 表示整个页面唯一的核心内容区域；<section></section> 是其中的逻辑分块。一个页面只能有一个 <main></main>，且不能嵌套在 <article></article>、<aside></aside>、<footer></footer> 等中。
- 正确：
<main><section><h2>产品列表</h2></section></main> - 错误：
<section><main>...</main></section>（嵌套违规） - 错误：
<main>...</main><main>...</main>（重复使用） - 注意：
<main></main>不代表“视觉居中”，它不带默认样式，仍需 CSS 控制布局
<article></article> 和 <section></section> 的边界在哪
<article></article> 必须是能独立存在、可被转载或 RSS 抓取的内容单元（比如一篇博客、一条新闻、一个用户评论）；<section></section> 只是主题一致的区块，不具备自包含性。
- 适合用
<article></article>：<article><h2>React 19 新特性详解</h2> <p>……</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></article> - 适合用
<section></section>：<section><h2>关于我们</h2> <p>公司简介</p></section>（无法脱离当前页面独立传播） - 常见误用：把轮播图容器、页脚版权栏写成
<article></article>—— 它们既不独立，也不可复用 - 嵌套关系允许：
<article></article>内部可用<section></section>划分子章节
<aside></aside> 不等于“右边那栏”
<aside></aside> 的语义是“与主内容相关但非核心的补充信息”，位置无关。它可以出现在主内容前、中、后，甚至在移动端折叠进汉堡菜单里。
- 合理场景：
<aside><h3>作者简介</h3> <p>……</p></aside>（附在某篇<article></article>旁） - 合理场景：
<aside><h3>相关推荐</h3> <ul>...</ul></aside>（作为整页的辅助模块） - 不合理场景：把全站导航栏塞进
<aside></aside>—— 那是<nav></nav>的职责 - 兼容提示：IE8 及更早版本不支持
<aside></aside>，若需支持，得靠 HTML5 Shiv 或降级为<div role="complementary"> <p>最容易被忽略的一点：语义标签本身不解决样式问题，但会直接影响可访问性树（Accessibility Tree）的生成。比如没用 <code><nav></nav>，屏幕阅读器就无法快捷跳转到导航区；没用<time datetime="2026-08-25"></time>，日期对机器就是纯文本，无法被日历工具识别。语义不是“锦上添花”，而是让页面真正可被机器理解的第一道门槛。
