必须唯一且不可嵌套，因其标识页面全局主导内容区，嵌套会破坏屏幕阅读器跳转和搜索引擎权重识别；需iso格式值才具机器可读性；表单type和required依赖浏览器支持与用户交互才生效；语义标签滥用比不用更损害可访问性与seo。

HTML 模板里最该用的 HTML5 特性，不是炫技功能，而是语义标签、<main></main> 约束、<time datetime></time> 和表单增强——它们直接影响可访问性、SEO 和维护成本，且浏览器兼容性已无实质障碍。

为什么 <main></main> 必须只出现一次且不能嵌套

这是模板中最容易被忽略的硬性语义规则。<main></main> 表示页面唯一主导内容区，屏幕阅读器靠它跳转核心内容，搜索引擎靠它识别主体权重。嵌套在 <section></section> 或 <article></article> 里会破坏其“全局唯一”语义，导致辅助技术误判或 SEO 权重稀释。

• 错误写法：<section><main>...</main></section>
• 正确结构：整个页面 DOM 中仅一个 <main></main>，位于 <header></header> 和 <footer></footer> 之间，不被任何区块级语义容器包裹
• 注意：若页面含多个独立文章（如博客列表页），每篇用 <article></article>，但 <main></main> 仍只包住整块列表区域，而非每篇文章内部

<time datetime></time> 不加 datetime 属性等于没写

在新闻、日志、事件类模板中，<time></time> 标签常被当成普通文本容器，但它的机器可读价值完全依赖 datetime 属性。没有它，<time>今天</time> 和 <span>今天</span> 对搜索引擎、日历聚合工具、无障碍设备来说毫无区别。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 必须写成：<time datetime="2026-05-02">今天</time> 或 <time datetime="2026-05-02T14:30">下午2:30</time>
• 常见错误：用中文日期（datetime="五月二日"）、相对时间（datetime="3天前"）或留空属性
• 注意：datetime 值必须是机器可解析格式（ISO 8601），否则会被忽略；显示文本可自由定制

表单模板里 type 和 required 的真实生效条件

模板中写 <input type="email" required> 并不自动保证校验有效。是否触发原生验证，取决于三个隐性条件：浏览器支持、未设 novalidate、用户实际交互行为。

• 移动端键盘适配才是关键收益：type="tel" 弹出数字键盘，type="search" 触发系统搜索按钮，type="date" 唤起原生日历——这些比校验更影响用户体验
• required 只在表单 submit 时触发 UI 提示，JS 中仍需调用 input.checkValidity() 主动判断，不能只信 HTML 属性
• 重要陷阱：type="number" 允许输入 "e"、"+"、"-" 等符号，且部分浏览器会把空字符串转为 0，后端不可盲信前端类型

语义标签滥用比不用更危险

模板中把 <header></header> 当顶部 div、<nav></nav> 塞满页脚链接、<section></section> 用于纯样式分隔——这类写法在视觉上毫无问题，但会让屏幕阅读器导航混乱、SEO 抓取错乱、团队协作时语义预期断裂。

• <header></header> 可以出现在 <article></article> 内部（如每篇文章自己的标题+作者），不必只用在页面最上方
• <nav></nav> 仅适用于主导航（如顶部菜单、侧边栏目导航），面包屑、页脚链接、相关推荐都该用 <div> 或带 <code>aria-label 的容器
• <section></section> 必须有明确主题，理想情况下带 <h2></h2>–<h6></h6>；纯为了加 margin/padding 而套一层，就该换回 <div> <p>真正难的不是写出符合规范的模板，而是让每个语义标签在 DOM 结构里承担不可替代的角色——一旦退化为“带样式的 div”，它就从增强项变成了噪音源。</p> </div>