语义化标签本身不负责排版，但它是排版可维护、可响应、可访问的前提；用错标签，再好的css也救不回结构混乱。
直接说结论：语义化标签本身不负责排版，但它是排版可维护、可响应、可访问的前提；用错标签，再好的CSS也救不回结构混乱。
为什么 <div> 套 <code><div> 会让排版越来越难？
<p>当你所有区块都用 <code><div class="header">、<code><div class="main">，CSS里写一堆 <code>.main .section .content p，问题就藏在后面：
- 换人接手时，得靠猜类名含义，
class="wrapper" 和 class="container" 到底谁包谁？
- 屏幕阅读器无法跳转到
<main></main>，只能逐行读 <div>，视障用户得听完整页才能找到正文
<li>搜索引擎把 <code>@#@#@#@#@#@#@#@#@#@0，语义失效，改用 <footer></footer> 或普通 <p></p>
-
<aside></aside> 不等于“右边那栏”，而是指与当前 <article></article> 或 <section></section> 相关但非主线的补充信息；广告、相关文章可以，但全站搜索框不属于它
CSS 排版时怎么配合语义标签？
别急着写 display: flex，先确认结构是否经得起“无样式浏览”：
- 用浏览器禁用 CSS 后刷新页面，能否清晰看出：哪是导航、哪是正文、哪是作者信息？如果只剩一堆段落堆叠，说明语义结构还没立住
- 给
<main></main> 加 margin-inline: auto 比给 .main-wrapper 加更可靠——前者是规范定义的主体区域，后者只是你起的任意名字
- 用
nav ul 选择器比 .nav-menu ul 更稳定，因为即使你重构类名，<nav></nav> 的语义不会变
最常被忽略的一点：语义化不是加标签的数量竞赛，而是删掉那些“没意义却存在”的标签。一个干净的 <article><header><h1>…</h1></header><p>…</p></article>，比五层 <div> 嵌套更利于长期排版维护。</div>
class="wrapper" 和 class="container" 到底谁包谁？<main></main>，只能逐行读 <div>，视障用户得听完整页才能找到正文
<li>搜索引擎把 <code>@#@#@#@#@#@#@#@#@#@0，语义失效，改用 <footer></footer> 或普通 <p></p>
<aside></aside> 不等于“右边那栏”，而是指与当前 <article></article> 或 <section></section> 相关但非主线的补充信息；广告、相关文章可以，但全站搜索框不属于它CSS 排版时怎么配合语义标签？
别急着写 display: flex，先确认结构是否经得起“无样式浏览”：
- 用浏览器禁用 CSS 后刷新页面，能否清晰看出：哪是导航、哪是正文、哪是作者信息？如果只剩一堆段落堆叠，说明语义结构还没立住
- 给
<main></main>加margin-inline: auto比给.main-wrapper加更可靠——前者是规范定义的主体区域，后者只是你起的任意名字 - 用
nav ul选择器比.nav-menu ul更稳定，因为即使你重构类名，<nav></nav>的语义不会变
最常被忽略的一点：语义化不是加标签的数量竞赛，而是删掉那些“没意义却存在”的标签。一个干净的 <article><header><h1>…</h1></header><p>…</p></article>，比五层 <div> 嵌套更利于长期排版维护。</div>
