HTML5语义标签在邮件中基本不可用，因Outlook、Gmail、iOS Mail等客户端会剥离或忽略这些标签；邮件开发必须回归table布局+内联样式，可借助MJML等工具实现语义化抽象与兼容性保障。
HTML5语义标签在邮件中基本不可用
绝大多数邮件客户端（包括 Outlook、Apple Mail、Gmail Web/App）会剥离或忽略 <header>、<nav>、<section>、<article>、<footer> 等 HTML5 结构标签，甚至直接导致样式错乱或内容不渲染。这不是 bug，而是邮件渲染引擎（如 Outlook 的 Word HTML 引擎、iOS Mail 的 WebKit 旧分支）长期未更新的现实限制。
- Outlook Desktop（2013+）使用 MS Word 渲染引擎，完全不识别 HTML5 标签，会将其当作未知元素丢弃或包裹进
<div> - Gmail（Web 和 App）虽基于现代 WebKit，但会主动 strip 掉非内联、非表格类结构标签，且禁用 CSS 中的
display: flex、display: grid等布局声明 - iOS Mail 对
<section>等标签支持极不稳定：某些 iOS 版本会保留标签但忽略其样式，另一些则直接移除
邮件模板必须回归 table 布局 + 内联样式
兼容性优先的邮件开发仍需以 <table> 为布局骨架，所有关键样式必须通过 style 属性内联书写，不能依赖外部 CSS 或 <style> 标签（多数客户端会过滤掉）。
-
<table>的cellpadding、cellspacing、border属性仍需显式设为0，避免 Outlook 默认边距干扰 - 文字颜色、字体、行高、内外边距全部写在
<td>或<p>的style属性里，例如：<td style="font-family: Arial, sans-serif; color: #333; padding: 12px;"> - 响应式需靠媒体查询 +
max-width+width: 100%组合实现，但必须用<style>标签包裹并放在<head>中——Gmail 仅支持有限的媒体查询（如@media only screen and (max-width: 600px)），且只对<table>和<td>生效
如何安全地“模拟”语义结构
你无法用 HTML5 标签表达结构，但可以用 class 名 + 注释 + 表格嵌套来维持可维护性，同时确保渲染安全。
- 用
<table class="email-header">替代<header>，并在注释中说明：<!-- header section --> - 导航栏用单行
<table>+ 多个<td>并排实现，每个<td>内放带style的<a> - 主内容区用
<table class="email-body">包裹，内部再用<tr><td>分隔标题、段落、按钮等模块 - 所有 class 名仅用于开发者识别和预处理工具（如 MJML 编译、Inky 转换），不参与样式控制——样式全靠内联
<!-- 安全的头部结构示意 -->
<table class="email-header" role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center" style="padding: 20px 0; background-color: #f8f9fa;">
<img src="logo.png" alt="Logo" width="120" height="40" style="height: auto;">
</td>
</tr>
</table>MJML 或 Foundation for Emails 是更现实的选择
手写兼容 table 布局极易出错，推荐用 MJML 这类抽象层工具——它把语义化写法（如 <mj-section>、<mj-navbar>）编译成全兼容的 table 代码，同时内置邮箱客户端适配逻辑。
立即学习“前端免费学习笔记（深入）”；
- MJML 输出的 HTML 默认禁用所有 HTML5 标签，全部转为
<table>+<td>，并自动内联样式、补全 Outlook VML 条件注释 - Foundation for Emails 使用 Inky 语法（类似
<wrapper>、<row>），编译后同样生成 table-based HTML - 切勿在 MJML 中混用自定义 HTML5 标签：MJML 解析器会跳过未知标签，导致内容丢失
真正麻烦的不是“能不能用 HTML5”，而是不同客户端对同一份 HTML 的解析差异比想象中更大——比如 Gmail 会重写你的 <link>，Outlook 会强制替换字体，而 Yahoo 邮箱至今不支持 background-image。留出至少 20% 开发时间做多端截图测试，比纠结语义标签重要得多。
