语义化标签本身不负责排版，但它是排版可维护、可响应、可访问的前提；用错标签，再好的CSS也救不回结构混乱。
直接说结论：语义化标签本身不负责排版，但它是排版可维护、可响应、可访问的前提；用错标签，再好的CSS也救不回结构混乱。
为什么 <div> 套 <div> 会让排版越来越难？
当你所有区块都用 <div class="header">、<div class="main">，CSS里写一堆 .main .section .content p，问题就藏在后面：
- 换人接手时，得靠猜类名含义，
class="wrapper"和class="container"到底谁包谁？ - 屏幕阅读器无法跳转到
<main>，只能逐行读<div>，视障用户得听完整页才能找到正文 - 搜索引擎把
<article>当作独立内容索引，而<div class="post">只是一块“未知容器”，SEO权重直接打折
<main>、<article>、<section> 到底怎么选？
不是按视觉“看起来像什么”来选，而是按内容“本质上是什么”来定：
-
<main>：整页只有一个，包裹所有核心内容（不含导航、侧边栏、页脚），是页面的“主干” -
<article>：能独立分发、复用的内容单元，比如一篇博客、一条新闻、一个用户评论——它自带隐含的独立上下文 -
<section>：文章内部的逻辑分组，必须有主题，且通常带标题（<h2>或更高），不能只是“为了加个边框”而套一层
错误示例：<section><p>欢迎来到首页</p></section>——没标题、无主题，纯属冗余。换成 <main><p>欢迎来到首页</p></main> 更准确。
立即学习“前端免费学习笔记（深入）”；
嵌套规则和容易踩的坑
语义标签不是扁平堆砌，嵌套错一层，语义就断一截：
-
<main>内部不要放<header>或<footer>作为页面级头尾——那是<body>直接子元素该干的事；但如果<article>自己有标题和作者信息，它内部的<header>就完全合理 -
<nav>必须包含一组导航链接，如果里面只放一个<a href="#">回到顶部</a>，语义失效，改用<footer>或普通<p> -
<aside>不等于“右边那栏”，而是指与当前<article>或<section>相关但非主线的补充信息；广告、相关文章可以，但全站搜索框不属于它
CSS 排版时怎么配合语义标签？
别急着写 display: flex，先确认结构是否经得起“无样式浏览”：
- 用浏览器禁用 CSS 后刷新页面，能否清晰看出：哪是导航、哪是正文、哪是作者信息？如果只剩一堆段落堆叠，说明语义结构还没立住
- 给
<main>加margin-inline: auto比给.main-wrapper加更可靠——前者是规范定义的主体区域，后者只是你起的任意名字 - 用
nav ul选择器比.nav-menu ul更稳定，因为即使你重构类名，<nav>的语义不会变
最常被忽略的一点：语义化不是加标签的数量竞赛，而是删掉那些“没意义却存在”的标签。一个干净的 <article><header><h1>…</h1></header><p>…</p></article>，比五层 <div> 嵌套更利于长期排版维护。
