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