HTML语义标签是RSS抓取、SEO索引和无障碍访问的基础,非加分项;首页用main包多个article(每篇摘要独立),不用article包裹整页;header仅含品牌信息,nav须独立并加aria-label;内页h1必须为文章标题,嵌套于article>header中;time需ISO格式datetime;aside和footer须严格按语义使用。

手写 HTML 博客时,article、nav、main 这些标签不是“加分项”,而是决定你文章能不能被 RSS 阅读器抓取、搜索引擎正确索引、屏幕阅读器顺畅朗读的关键基础设施。不按语义写,后期改结构的成本远高于起步时多敲几行标签。
博客首页该用 section 还是 article?
首页本身不用 article——它不是一篇独立可分发的内容,而是容器。每篇摘要(带标题、时间、摘要文字、链接)才该包在单独的 article 里。
-
article必须能脱离上下文独立存在:RSS 订阅、微信公众号自动抓取、Google News 推送都依赖这个判断 -
section是逻辑分组,比如“最新文章”“热门归档”两个区块,各自用section包裹更准确 - 首页的
main里可以有多个article,但不能把整页内容塞进一个article - 错误写法:
<article><h2>首页</h2><section>…</section></article>—— 这会让 RSS 解析器误判为“首页是一篇文章”
header 和 nav 分开写的必要性
把 Logo 和导航菜单混在一个 header 里,等于主动放弃 SEO 和无障碍支持。搜索引擎靠标签区分品牌标识与跳转入口,屏幕阅读器用户靠 nav 的语义快速定位导航区。
-
header只放网站级元信息:<h1>、Logo 图片、副标题等,不含任何链接 -
nav必须独立,且建议加aria-label="main navigation",避免多个nav时混淆 - 导航项超过 5 个?用
<details><summary>更多</summary><ul>…</ul></details>,比 JS 控制更轻量、更可靠 - 搜索框、登录按钮别塞进
nav——它们属于form或aside范畴
内页(如 post-01.html)的 h1 放哪?
首页的 h1 是博客名,内页的 h1 必须是文章标题本身。重复或缺失 h1 会干扰 SEO 权重分配,也违反 WCAG 可访问性标准。
立即学习“前端免费学习笔记(深入)”;
- 内页结构必须是:
<main><article><header><h1>文章标题</h1><time datetime="2026-08-01">2026年8月1日</time></header><p>正文…</p></article></main> - 不要在
header外再写一个h1,也不要在article外套section再塞h1 -
time标签的datetime属性必须是 ISO 格式(如2026-08-01),否则 Google 不识别发布时间 - 如果文章含多个小节,用
section+h2划分,别用div+ class 模拟标题层级
最容易被忽略的点:语义化不是“写对标签就完事”,而是每个标签都要承担它被设计出来的职责。比如 aside 不是“放广告的地方”,而是“与当前 article 相关但非核心的信息”;footer 在 article 内部出现时,表示该文章的作者、许可协议等元信息——这些细节,恰恰是 RSS 解析器和爬虫真正看的。



















