HTML5结构标签需精准语义化：必用<header>、<main>、<article>、<nav>、<footer>；<aside>仅用于独立侧边栏；<section>须表主题关联内容，非任意区块。
HTML5结构标签不是装饰品，用错位置反而让博客更难维护、SEO更差，甚至影响屏幕阅读器体验。
哪些结构标签该用，哪些纯属多余
个人博客不需要堆砌所有语义标签。真正关键的是 <header>、<main>、<article>、<nav> 和 <footer>；<aside> 仅当有独立于正文的侧边栏内容（如推荐文章、作者简介）时才用；<section> 容易滥用——它不等于“一个区块”，而是表示有共同主题的一组内容，博客首页按时间列文章就不该套 <section> 包裹每篇。
-
<header>放在<body>内，只包裹站点级头部（logo、主导航），别在每篇<article>里重复套一层 -
<main>必须且只能出现一次，是页面主体内容的直接容器，不能嵌套在<article>或<section>里 -
<article>是每篇博文的最外层标签，不是用来包摘要或标题单独用的
一个干净的博客首页 HTML 结构示例
这个结构兼顾语义、可访问性与后续 CSS 布局扩展性，去掉冗余嵌套，也避开了常见层级错误：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的博客</title>
</head>
<body>
<header>
<h1>我的博客</h1>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2><a href="/post/1">如何用 CSS Grid 做响应式卡片</a></h2>
<p class="meta">2024-06-10</p>
</header>
<p>本文介绍……</p>
<a href="/post/1">阅读全文</a>
</article>
<article>
<header>
<h2><a href="/post/2">为什么我不再用 localStorage 存用户偏好</a></h2>
<p class="meta">2024-05-28</p>
</header>
<p>本地存储的坑比想象中多……</p>
<a href="/post/2">阅读全文</a>
</article>
</main>
<footer>
<p>© 2024 我的博客. 保留所有权利.</p>
</footer>
</body>
</html>
容易被忽略但影响实际效果的细节
结构对了，不代表就真“生效”了。以下三点常被跳过，却直接关系到辅助技术识别和搜索引擎理解：
立即学习“前端免费学习笔记（深入）”；
-
<main>没加role="main"属性时，部分旧版屏幕阅读器可能无法准确定位主内容区（虽然现代浏览器基本能推断，但加了更稳妥） - 每个
<article>内的<header>必须含一个标题级元素（<h1>–<h6>），否则语义断裂——不能只放<p class="meta"> - 如果博客启用了服务端渲染或静态生成，确保每页的
<main>和<article>层级不因模板复用而错乱（比如把列表页的<main>错塞进详情页的<article>里）
结构标签的价值不在“用了多少”，而在“是否准确表达了内容关系”。写完检查一遍：能否不看样式，单靠标签层级就理清哪是导航、哪是正文、哪是独立文章？如果不能，多半是嵌套或选型错了。
