不能用替代，因为浏览器和屏幕阅读器只识别标签名而非class名，导致辅助技术无法识别页眉区域、seo无法赋予更高权重，且具备嵌套于等上下文能力而div不具备。

不用语义化标签，document.querySelector('main') 可能查到 0 个节点，屏幕阅读器会跳过整个正文，SEO 爬虫可能把侧边栏当主体内容抓取——这不是“写法偏好”，是结构失效的直接后果。

为什么 <header></header> 不能用 <div class="header"> 替代 <p>两者在浏览器渲染上几乎没区别，但语义层面差一个维度：<code><header></header> 是浏览器和辅助技术能直接识别的“头部区域”，而 <div class="header"> 只是一个带名字的空盒子。 <ul><li>屏幕阅读器用户按快捷键跳转导航时，依赖的是 <code><nav></nav> 标签本身，不是 class 名；写成 <div class="nav"> 就等于没提供入口 <li>搜索引擎对 <code><header></header> 内的 <h1></h1> 赋予更高权重，但对 <div class="header"> <h1> 不做特殊处理 </h1> <li> <code><header></header> 可以嵌套在 <article></article> 里（比如每篇文章自己的标题区），<div class="header"> 没有这种上下文能力 <h3> <code><main></main> 必须唯一且不能嵌套的硬约束

<main></main> 不是“视觉居中”的容器，而是告诉所有解析器“这里才是页面不可删的核心内容”。违反规则会直接破坏可访问性和 SEO。

• 一个页面只能有一个 <main></main>，重复出现会让屏幕阅读器反复提示“进入主内容”，造成混淆
• <main></main> 不能出现在 <article></article>、<section></section>、<aside></aside> 或 <footer></footer> 内部——它必须是 的直接子元素
• 页脚链接、版权声明、相关推荐这些复用内容，哪怕视觉上在 main 区域下方，也不能包进 <main></main>

<article></article> 和 <section></section> 的分界点在哪

关键看这块内容能不能脱离当前页面被独立理解或分发。这不是布局问题，是内容角色问题。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• <article></article>：博客正文、新闻稿、用户评论、微博卡片——保存为单独 HTML 文件仍能成立
• <section></section>：产品参数表、安装步骤、常见问题——依附于当前页面才有意义，单独拎出来就缺上下文
• 别因为“它有个 <h2></h2>”就套 <section></section>；也别因为“它在 main 里”就误用 <article></article>（比如把整个首页当 article）

用错标签比不用更危险

语义化不是“多加几个新标签就变高级了”，错误使用会污染文档大纲、误导辅助工具、增加维护成本。

• 把搜索框包进 <aside></aside>（它本该是附属信息），结果屏幕阅读器把它当次要内容跳过
• 用 <section></section> 包裹纯样式容器（如 <div class="grid-container">），导致 <code>document.body.querySelectorAll('section').length 失真，后续 JS 逻辑出错
• <time datetime="2024-03-15"></time> 能被日历应用提取，<span>3月15日</span> 就只是文本——细微差别，影响的是机器能否理解

真正难的不是记住每个标签怎么写，而是每次写标签前问一句：这个元素在没有 CSS、没有 JS、只有纯文本时，是否还能被正确归类？