博客页面结构清晰的关键在于标签语义准确而非数量，需严格分层：header→main→article→aside→footer，元信息须结构化可解析，评论应独立于article，嵌套须匹配语义粒度。
博客页面结构是否清晰，关键不在用了多少标签，而在于每个标签是否准确表达了内容的“身份”。语义化不是贴标签，而是讲逻辑。
主干结构必须严格分层
一个博客页面的骨架应由外到内、层级分明：
-
放在最外层，承载网站级信息：Logo、全局导航（用 - 紧随其后，且只能出现一次，它不包含导航、侧边栏或页脚——这些都不属于“当前页的核心内容”
-
是
里的主角，每篇博文必须用它包裹；它自带独立大纲上下文，所以内部标题从 开始是合理且推荐的
-
用于侧边栏，放作者简介、分类目录、热门文章等补充信息，与
平行，不嵌套在其中 -
作为页面底部，放版权、备案号、友情链接；注意：文章末尾的“版权声明”或“相关阅读”属于文章自身，应放在
的
元信息要可读、可解析、有结构
发布时间、作者、分类这些不是装饰文字，而是机器可识别的数据点：
- 时间必须用，缺了datetime属性，对搜索引擎和屏幕阅读器就等于没写
- 作者、分类、标签建议用
- 作者
- 李四
- 标签云可用
评论区不能塞进
评论是用户生成内容（UGC），和原文不属于同一语义单元：
- 放进
会污染内容边界，RSS订阅器可能误抓、SEO工具可能降权 - 正确做法是用包裹，顶部加
评论（23）
- 如果评论支持分页或筛选，可在
内再嵌套
嵌套与复用要匹配语义粒度
HTML5允许多层
- 页面级
放网站名和主导航； 里的 只放该文标题、作者、时间——它描述的是这篇文章，不是整个站 不是“分块万能胶”，它必须有明确主题和标题（ –
），比如「技术原理」「实操步骤」「注意事项」；若只是视觉分隔，用
更诚实- 多个
并列时（如首页文章列表），可用 整体包裹，并配 说明本区块主题，例如
前端开发笔记
- 多个
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
