html本身不提供响应式组件封装能力，必须靠css+自定义元素协同控制；媒体查询作用于全局文档流而非组件作用域，无法实现真正的组件级响应。

为什么不能只用

做响应式布局

因为

没有语义，浏览器、屏幕阅读器和搜索引擎都把它当成“一个空盒子”。你在媒体查询里把

折叠了，CSS 能生效，但辅助技术不知道这是侧边栏，SEO 也抓不到结构权重——

和

才是明确告诉机器“这里是主内容”“这里是附加信息”的标签。

常见错误现象：div.header + div.nav + div.content 写满一页，移动端加了 @media (max-width: 768px) 却发现 VoiceOver 读不出导航入口，Google Search Console 提示“缺少主内容标识”。

• <header></header> 应包裹页面顶部的 Logo、标题、主导航（或其中一部分），不是所有顶部容器都配叫 header
• <nav></nav> 必须直接包含可跳转的链接（<a></a> 或带 role="navigation" 的 JS 导航），纯装饰性菜单栏不算
• 一个页面最多一个 <main></main>，且不能嵌套在 <article></article> 或 <section></section> 里——它代表整个文档的主体

如何用

、

和媒体查询配合实现两栏变单栏

关键不在“怎么写 CSS”，而在“标签是否允许你这么切”。比如 <main></main> 和 <aside></aside> 天然就是兄弟级语义区块，Flexbox 或 Grid 直接设为 display: grid; grid-template-columns: 1fr 300px; 就能分栏；而用两个 <div>，你得靠 class 名强行约定谁主谁次，维护时容易错位。 <p>实操建议：</p> <ul> <li>PC 端：用 <code>grid-template-areas: "header header" "nav main" "footer footer" 配合 <header></header>、<nav></nav>、<main></main>、<footer></footer>

移动端：在 @media (max-width: 768px) 里把 <aside></aside> 设为 display: none 或 order: -1 上移，而不是删 DOM

别把广告、相关推荐塞进 <aside></aside> —— 它应与当前 <article></article> 或 <section></section> 强相关，否则语义断裂，影响 SEO 权重传递

和

在响应式中怎么选

很多人以为“有标题就用

”，结果首页堆满 <article><h2>最新动态</h2> <p>…</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5117" title="HTML Extract"><img src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="overflowclass">HTML Extract</a> <p class="overflowclass">使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p> </div> <a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></article>，反而稀释了真正独立内容（如博客正文）的语义信号。

判断依据很实际：

• 能被单独订阅、分享、聚合？→ 用 <article></article>（例如新闻条目、博客文章、评论）
• 只是页面内一个功能模块，比如“用户评价区”“产品参数表”？→ 用 <section></section>，并加上 aria-labelledby 指向内部 <h2></h2>
• <section></section> 可以嵌套，<article></article> 一般不嵌套（除非是评论嵌套在文章里）
• 响应式场景下，<section></section> 更适合做媒体查询中的“折叠/展开单元”，比如手风琴菜单，因为它的语义更中性

移动端折叠

时，语义和可访问性怎么保得住

单纯用 display: none 隐藏 <nav></nav>，等于对屏幕阅读器说“这里什么都没有”。用户双指滑动时会直接跳过导航，根本点不到汉堡菜单。

必须配合 ARIA：

• 保留 <nav></nav> 标签本身，不要删掉，只是视觉隐藏
• 汉堡按钮加 aria-expanded="false" 和 aria-controls="main-nav"
• <nav id="main-nav"></nav> 加 aria-hidden="true" 初始状态，JS 切换时同步更新两个属性
• 用 inert 属性比 visibility: hidden 更安全（支持渐进增强）

最容易被忽略的一点：折叠后，焦点管理必须手动控制。用户按 Tab 进入导航区域时，如果菜单收着，焦点不能卡在不可见的链接上——要 JS 把焦点移到汉堡按钮或跳到下一个可聚焦元素。