html5结构标签需精准语义化：必用、、、、；仅用于独立侧边栏；须表主题关联内容，非任意区块。
HTML5结构标签不是装饰品，用错位置反而让博客更难维护、SEO更差，甚至影响屏幕阅读器体验。
哪些结构标签该用，哪些纯属多余
个人博客不需要堆砌所有语义标签。真正关键的是 <header></header>、<main></main>、<article></article>、<nav></nav> 和 <footer></footer>；<aside></aside> 仅当有独立于正文的侧边栏内容（如推荐文章、作者简介）时才用；<section></section> 容易滥用——它不等于“一个区块”，而是表示有共同主题的一组内容，博客首页按时间列文章就不该套 <section></section> 包裹每篇。
-
<header></header>放在内，只包裹站点级头部（logo、主导航），别在每篇<article></article>里重复套一层 -
<main></main>必须且只能出现一次，是页面主体内容的直接容器，不能嵌套在<article></article>或<section></section>里 -
<article></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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/847" title="B12"><img
src="https://img.php.cn/upload/ai_manual/001/503/042/68b6d6fc1608f104.png" alt="B12" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/847" title="B12">B12</a>
<p>B12是一个由AI驱动的一体化网站建设平台</p>
</div>
<a href="/ai/847" title="B12" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<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></main>没加role="main"属性时，部分旧版屏幕阅读器可能无法准确定位主内容区（虽然现代浏览器基本能推断，但加了更稳妥） - 每个
<article></article>内的<header></header>必须含一个标题级元素（<h1></h1>–<h6></h6>），否则语义断裂——不能只放<p class="meta"></p> - 如果博客启用了服务端渲染或静态生成，确保每页的
<main></main>和<article></article>层级不因模板复用而错乱（比如把列表页的<main></main>错塞进详情页的<article></article>里）
结构标签的价值不在“用了多少”，而在“是否准确表达了内容关系”。写完检查一遍：能否不看样式，单靠标签层级就理清哪是导航、哪是正文、哪是独立文章？如果不能，多半是嵌套或选型错了。
