main元素在HTML5中必须且只能出现一次，用于包裹页面唯一主体内容，不可嵌套在article、aside、header等语义元素内，应排除页眉页脚等全局结构，并推荐添加aria-label或aria-labelledby提升可访问性。

main 元素在 HTML5 中用于标识文档中与当前页面主题直接相关、独一无二的主体内容区域。

必须且只能出现一次

一个 HTML 文档中，main 元素应当有且仅有一个。重复使用 main 会违反语义规范，影响可访问性（如屏幕阅读器可能无法正确识别主内容）和搜索引擎对页面结构的理解。

• 若页面含多个“主要内容区块”（如首页有文章列表+推荐栏目+最新动态），应将它们统一包裹在一个 main 内，而非为每个区块单独加 main
• 不建议在 article、aside、nav、header 或 footer 等其他语义元素内部嵌套 main

不能作为后代出现在某些语义元素中

main 不应被放置在 article、aside、footer、header 或 nav 元素内部——因为这些元素本身已有明确的语义边界，嵌套 main 会造成语义冲突。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 例如：不要写
  ...
• 但可以写
  ...
  ，此时 article 是 main 的子内容，符合逻辑

不包含网站通用结构

main 应排除页眉、导航栏、侧边栏、页脚等全站复用内容。它只承载当前页面特有的核心信息。

• 比如博客文章页，main 应包含标题、正文、作者信息、发布时间等；而顶部 logo、主导航、右侧分类标签栏不属于 main
• 如果某区块在多个页面中完全一致（如“关注我们”模块），通常更适合放在 aside 或 section 中，而非 main

可选但推荐添加 aria-label 或 aria-labelledby

虽然不是强制要求，但为 main 显式提供可访问性标签，能进一步提升辅助技术体验。

• 用 aria-labelledby="main-title" 关联页面内已有标题（如

  最新技术文章

  ）
• 或用 aria-label="文章主体内容" 直接描述其作用

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！