最稳妥的语义化结构是直接使用html5原生标签而非class模拟，因浏览器和辅助技术只识别标签名；必须为直接子元素且唯一，否则失去landmark语义；用于可独立分发内容，用于逻辑分组；布局由css控制，html仅负责语义。
直接用、
最稳妥的语义化结构不是靠 class 模拟，而是直接使用 HTML5 原生语义标签。浏览器和辅助技术（如 NVDA、VoiceOver）只认标签名，div class="header" 在无障碍树里就是 generic 角色，不会被识别为页眉区域；SEO 也不会把它当 banner 处理。
常见错误现象：
- NVDA 报 “no landmark found”
- Lighthouse 的 “Landmark elements” 条目不达标
- DevTools Accessibility 面板中，
div的 computed role 是generic，而非banner/navigation/main
正确写法就是删掉所有包装 div 和 class，直上语义标签：
<header></header><nav></nav><main><section><h2>文章列表</h2></section><aside></aside></main><footer></footer>
注意：<main></main> 必须是 的直接子元素，且只能出现一次；嵌套在 <div> 或 <code><section></section> 里会直接失效。
必须是直接子元素且唯一
这不是建议，是 HTML5 规范硬性约束。一旦 <main></main> 被包裹在任何容器内（比如 <div class="wrapper">），它就失去 landmark 身份——浏览器忽略其语义，变成普通块级元素，屏幕阅读器跳过，搜索引擎也不视为主内容区。<p>典型错误写法：</p>
<pre class="brush:php;toolbar:false;">
<div class="wrapper">
<main></main><!-- ❌ 失效 -->
</div>
</pre>
<p>单页应用（SPA）也要注意：路由切换时不要动态插入新 <code><main></main>，应复用原有节点并替换内容；W3C Validator 会直接报错：Element main not allowed as child of element div。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
和别混用，关键看“能否独立分发”
<section></section> 表示逻辑分组，依赖上下文存在；<article></article> 表示可独立存在的内容单元（比如 RSS 订阅一条新闻、转发一条微博）。删掉父级后还能单独理解的，优先用 <article></article>；只是页面里一块功能区（如“相关推荐”“作者介绍”），用 <section></section> 更准确。
容易踩的坑：
- 把整篇博客正文包在
<section></section>里 —— 它其实是一篇独立内容，该用<article></article> - 给无标题的
<section></section>加语义 —— 规范要求<section></section>应有<h1>–<h6></h6> </h1>标题，否则语义模糊 - 用
<aside></aside>套<section></section>再套<article></article>——<aside></aside>本身已是语义容器，内部再套<article></article>是合理场景（如侧栏的热门文章），但别叠床架屋
Flex/Grid 控制布局，HTML 只管语义结构
HTML 本身不负责排版，<header></header> 不等于“顶部横条”，<aside></aside> 也不等于“右边窄栏”。它们只表达意义，视觉呈现由 CSS 决定。现代布局靠 display: flex 或 display: grid 实现，而不是 <table> 或 <code>float。
例如三栏布局，结构仍保持语义清晰：
<main><section class="content"></section><aside class="sidebar"></aside></main>
再用 CSS 控制：
.main { display: flex; }
.content { flex: 1; }
.sidebar { width: 300px; }
这样既满足语义化，又保留响应式伸缩能力。滥用 float 或 <table> 布局会导致结构与样式耦合，后期维护成本高，且对屏幕阅读器不友好。<p>真正容易被忽略的点是：语义标签的嵌套层级不能破坏文档大纲。比如 <code><main></main> 里直接放 <h1></h1> 没问题，但如果 <section></section> 没标题，它的子 <h2></h2> 就会意外提升大纲层级，影响 SEO 和导航逻辑。
