每个页面有且仅能有一个，且不可嵌套在等区域元素内；应包裹全页主要内容，每篇文章用单独包裹，须带标题以确保可访问性。

为什么

不能随便套在

外面

很多 Hugo 或 Hexo 用户改模板时，看到 html5 结构标签就直接套用，结果导致屏幕阅读器报错、seo 工具提示“main 元素缺失”或“多个 main”。根本原因是：每个页面**有且仅能有一个

**，且它**不能嵌套在

、

、

等区域元素内**。

静态博客常见错误写法：

   
     
标题
     
正文
   
 

正确做法是让

包住整页主要内容容器（比如 content 区域），而每篇博文用

单独包裹：

立即学习“前端免费学习笔记（深入）”；

• 放在 layouts/_default/base.html（Hugo）或 layout/layout.ejs（Hexo）的主体内容区，且只出现一次
• 
  

  放在 layouts/_default/single.html 或 layout/post.ejs 内部，每篇文章一个

• 列表页（如首页、归档页）中，每个
  

  应包含

  +

  + 可选

用

拆分长文比用

更安全

markdown 渲染后常生成大段

360 AI助手

360公司推出的AI聊天机器人聚合平台，集合了国内15家顶尖的AI大模型。

下载

和

，有人习惯加

手动分块。但语义上，

表示“文档中具有主题的独立部分”，更适合用于长文的逻辑分章（如“安装步骤”“配置说明”“常见问题”）。

注意三点：

• 
  

  必须有标题（

  –

  ），否则会被辅助技术忽略

• 不要用
  

  替代样式容器——纯为了加 margin/padding，请继续用
• Hugo 的 {{ .Content }} 默认不解析自定义 HTML 标签，若想在 Markdown 中插入
  

  ，需启用 unsafe 渲染或改用短代码（shortcode）封装

Hexo 的 post.ejs 里怎么避免

被搜索引擎误判为正文

很多人把侧边栏（目录、标签云、推荐文章）放进

，但若没加 aria-label 或没放在

外，某些 SEO 工具会把它和正文一起提取文本，拉低关键词密度。

实操建议：

• 确保


  不在

  内部；它应与
  并列，同级放在 下
• 给


  加 aria-label="related content" 或 aria-label="table of contents"，明确用途

• Hexo 中，post.ejs 常见结构是：
  ...
  
  

  ，而非把

  塞进

  里

• 如果使用 hexo-toc 插件生成目录，它默认输出无语义

  ，建议包裹一层

  而非

Hugo 的 baseof.html 中

和

容易重复渲染

在 layouts/_default/baseof.html 里写死

和

很方便，但容易忽略两点：

• 某些页面（如 404、隐私页）可能不需要全局导航栏，但
  

  仍被强制渲染 → 解决：用 {{ if not .Is404 }} 或 {{ if .Site.Params.showHeader }} 控制显示

• 


  若含动态版权年份（如 © {{ now.Year }} {{ .Site.Title }}），必须确保它不在 partial 中被多次 include —— Hugo 的 {{ partial "footer.html" . }} 如果在多个 layout 中调用，会导致重复输出

• 
  

  内的

  应有 aria-label，例如

  ，否则无障碍测试失败

html5 结构标签不是装饰，它们直接影响爬虫抓取路径和读屏顺序。最常被忽略的是：没有检查

是否真的唯一，以及是否所有

都带了可访问标题。

发表于：web前端

2026-01-10

# ai# class# copy# go# html# html5# if# include# js# margin# markdown# padding# seo# table# 为什么# 封装# 工具# 常见问题# 搜索引擎# 爬虫

复制链接