每个页面有且仅能有一个，且不可嵌套在等区域元素内；应包裹全页主要内容，每篇文章用单独包裹，须带标题以确保可访问性。
为什么 <main></main> 不能随便套在 <article></article> 外面
很多 Hugo 或 Hexo 用户改模板时，看到 HTML5 结构标签就直接套用，结果导致屏幕阅读器报错、SEO 工具提示“main 元素缺失”或“多个 main”。根本原因是：每个页面**有且仅能有一个 <main></main>**，且它**不能嵌套在 <article></article>、<aside></aside>、<footer></footer> 等区域元素内**。
静态博客常见错误写法：
<article>
<main>
<h1>标题</h1>
<p>正文</p>
</main>
</article>
正确做法是让 <main></main> 包住整页主要内容容器（比如 content 区域），而每篇博文用 <article></article> 单独包裹：
立即学习“前端免费学习笔记（深入）”；
-
<main></main>放在layouts/_default/base.html（Hugo）或layout/layout.ejs（Hexo）的主体内容区，且只出现一次 -
<article></article>放在layouts/_default/single.html或layout/post.ejs内部，每篇文章一个 - 列表页（如首页、归档页）中，每个
<article></article>应包含<header></header>+<section></section>+ 可选<footer></footer>
用 <section></section> 拆分长文比用 <div> 更安全
<p>Markdown 渲染后常生成大段 <code><p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2061" title="卡奥斯智能交互引擎"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680098258140.png" alt="卡奥斯智能交互引擎" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2061" title="卡奥斯智能交互引擎">卡奥斯智能交互引擎</a>
<p>聚焦工业领域的AI搜索引擎工具</p>
</div>
<a href="/ai/2061" title="卡奥斯智能交互引擎" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 和 <h2></h2>，有人习惯加 <div class="section"> 手动分块。但语义上，<code><section></section> 表示“文档中具有主题的独立部分”，更适合用于长文的逻辑分章（如“安装步骤”“配置说明”“常见问题”）。
注意三点：
-
<section></section>必须有标题（<h2></h2>–<h6></h6>），否则会被辅助技术忽略 - 不要用
<section></section>替代样式容器——纯为了加 margin/padding，请继续用<div> <li>Hugo 的 <code>{{ .Content }}默认不解析自定义 HTML 标签，若想在 Markdown 中插入<section></section>，需启用unsafe渲染或改用短代码（shortcode）封装 - 确保
<aside></aside>不在<main></main>内部；它应与<main></main>并列，同级放在下 - 给
<aside></aside>加aria-label="related content"或aria-label="table of contents"，明确用途 - Hexo 中，
post.ejs常见结构是：<main>...</main><aside>...</aside>，而非把<aside></aside>塞进<article></article>里 - 如果使用
hexo-toc插件生成目录，它默认输出无语义<ol></ol>，建议包裹一层<nav aria-label="table of contents"></nav>而非<aside></aside> - 某些页面（如 404、隐私页）可能不需要全局导航栏，但
<header></header>仍被强制渲染 → 解决：用{{ if not .Is404 }}或{{ if .Site.Params.showHeader }}控制显示 -
<footer></footer>若含动态版权年份（如© {{ now.Year }} {{ .Site.Title }}），必须确保它不在partial中被多次 include —— Hugo 的{{ partial "footer.html" . }}如果在多个 layout 中调用，会导致重复输出 -
<header></header>内的<nav></nav>应有aria-label，例如<nav aria-label="main navigation"></nav>，否则无障碍测试失败
Hexo 的 post.ejs 里怎么避免 <aside></aside> 被搜索引擎误判为正文
很多人把侧边栏（目录、标签云、推荐文章）放进 <aside></aside>，但若没加 aria-label 或没放在 <main></main> 外，某些 SEO 工具会把它和正文一起提取文本，拉低关键词密度。
实操建议：
Hugo 的 baseof.html 中 <header></header> 和 <footer></footer> 容易重复渲染
在 layouts/_default/baseof.html 里写死 <header></header> 和 <footer></footer> 很方便，但容易忽略两点：
HTML5 结构标签不是装饰，它们直接影响爬虫抓取路径和读屏顺序。最常被忽略的是：没有检查 <main></main> 是否真的唯一，以及是否所有 <section></section> 都带了可访问标题。
