应按语义归属使用和：页面级或章节级元信息用，须与最近祖先节元素直接相关；同理，不可跨节滥用，嵌套错误会导致辅助技术误读和seo权重分散。

<header></header> 和 <footer></footer> 不是装饰性容器，它们有明确的语义边界和嵌套限制，用错会导致辅助技术误读、SEO 权重分散，甚至被浏览器忽略结构化数据提取。

什么时候该用 <header></header> 而不是 <div class="header"> <p>当这个区域承载的是「页面级」或「章节级」的元信息时，才用 <code><header></header>。比如网站 logo、主标题、主导航、搜索框——这些内容服务于整个页面或某个 <section></section> 的上下文。

• 一个页面可以有多个 <header></header>：比如 <article></article> 内部也可以有自己的 <header></header>（含文章标题、作者、发布时间）
• 不能嵌套在 <footer></footer>、<header></header> 或 <aside></aside> 里
• 不要只为了样式复用而用它——<header></header> 没有默认 margin/padding，纯语义，样式得自己写
• 常见误用：<header></header> 里塞广告横幅、第三方登录按钮——这些不属于“页眉语义”，应改用 <div> 或 <code><section></section>

  <footer></footer> 的范围经常被高估

  <footer></footer> 对应的是它最近的「祖先节元素」，不一定是整个页面底部。它可以属于 、<article></article> 或 <section></section>，内容必须与该节直接相关。

  

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

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

  下载
  • 页面级 <footer></footer> 应直接放在 末尾，且只出现一次
  • 文章底部的版权信息、编辑说明、相关链接，应放在 <article><footer>...</footer></article> 里，而不是拉到页面最底下
  • 禁止把侧边栏底部的“关注我们”模块硬塞进页面级 <footer></footer>——它属于 <aside></aside> 的一部分
  • 里面别放主导航——那是 <nav></nav> 的职责；也别放用户协议链接（除非它是当前文章的补充条款）

  实际布局中容易踩的 DOM 结构坑

  语义标签一旦嵌套错误，屏幕阅读器和搜索引擎就可能跳过或误解整块内容。

  • <header></header> 不能作为 <main></main> 的子元素——<main></main> 只能包含流内容，但 <header></header> 在这里语义冗余，应提至 <main></main> 外层
  • <footer></footer> 不能包裹 <nav></nav> ——除非这个导航专属于该 footer 所属的节（例如某篇教程末尾的“下一课”导航）
  • 用 <header></header> 包 <nav></nav> 是合理常见模式；但反过来，<nav></nav> 里再套 <header></header> 就违反层级逻辑
  • 避免空的 <header></header> 或 <footer></footer>：哪怕只是占位，也要至少含一个文本节点或 <span></span>，否则某些旧版辅助工具会跳过

  真正难的不是写对标签，而是判断某块内容“属于谁”——它归属页面整体？某个文章节？还是独立卡片？这个归属关系错了，<header></header> 和 <footer></footer> 就从语义锚点变成干扰噪声。