• 放在 内，只包裹站点级头部（logo、主导航），别在每篇 里重复套一层
• 必须且只能出现一次，是页面主体内容的直接容器，不能嵌套在 或
  里
• 是每篇博文的最外层标签，不是用来包摘要或标题单独用的

一个干净的博客首页 HTML 结构示例

这个结构兼顾语义、可访问性与后续 CSS 布局扩展性，去掉冗余嵌套，也避开了常见层级错误：

  
  


  

    
我的博客
    
  

  

    
      

        
如何用 CSS Grid 做响应式卡片
        
2025-06-10
      
      
本文介绍……
      阅读全文
    

    
      

        
为什么我不再用 localStorage 存用户偏好
        
2025-05-28
      
      
本地存储的坑比想象中多……
      阅读全文
    
  

  

容易被忽略但影响实际效果的细节

结构对了，不代表就真“生效”了。以下三点常被跳过，却直接关系到辅助技术识别和搜索引擎理解：

• 没加 role="main" 属性时，部分旧版屏幕阅读器可能无法准确定位主内容区（虽然现代浏览器基本能推断，但加了更稳妥）
• 每个 内的
  必须含一个标题级元素（
  –
  ），否则语义断裂——不能只放

• 如果博客启用了服务端渲染或静态生成，确保每页的
  和 层级不因模板复用而错乱（比如把列表页的
  错塞进详情页的 里）

结构标签的价值不在“用了多少”，而在“是否准确表达了内容关系”。写完检查一遍：能否不看样式，单靠标签层级就理清哪是导航、哪是正文、哪是独立文章？如果不能，多半是嵌套或选型错了。