html最佳实践是避免线上翻车的底线：必须顶格写doctype、lang、charset三行；语义化标签如不可用替代；列表、表格、表单须严格遵循嵌套规则；必带alt，需poster和；所有块级标签应显式闭合。
HTML 最佳实践不是“加分项”，而是避免线上翻车的底线。写错 <doctype html></doctype>、漏掉 lang、滥用 <div> 套娃、省略闭合标签——这些看似微小的疏忽，会在 SEO 折损、屏幕阅读器崩溃、IE11 怪异模式、CI 流水线报错、JS 操作 DOM 失效等场景里集中爆发。
<h3>必须顶格写的三行：DOCTYPE、lang、charset</h3>
<p>浏览器解析 HTML 的第一件事，就是看这三行。顺序错、位置偏、值不对，后续全乱。</p>
<ul>
<li><code> 必须严格顶格，前面不能有空格、注释或 BOM 字节；否则 Safari 可能拒绝渲染 <code><input type="date">，IE11 直接进怪异模式
en 或留空；多语言项目需用 JS 动态改 document.documentElement.lang，静态值只管初始<meta charset="UTF-8"> 必须在 <meta> 之前；否则服务端返回的非 UTF-8 响应头可能被忽略，导致中文变 语义化不是“选标签”，是选对结构契约
用 <header></header> 不是为了好看，是告诉浏览器：“这段内容是页面横幅，属于顶级节区”；用 <main></main> 是在声明：“这里才是本页唯一主内容，搜索引擎和屏幕阅读器请重点对待”。
- 禁用
<div class="header"> 替代 <code><header></header>——前者对机器无意义，后者自带 ARIA role 和隐式节区边界 -
<h1></h1>全局只能出现一次，且必须在<main></main>内（除非是网站 logo）；<h2></h2>后才能跟<h3></h3>，跳级会破坏辅助技术导航流 -
<nav></nav>必须包裹真正导航链接；<aside></aside>只用于与主内容相关但可独立存在的补充信息（如侧边栏推荐），不是“随便放点东西的容器” -
<ul></ul>和<ol></ol>的子元素只能是<li>；<li>内部可嵌套<ul></ul>或<ol></ol>，但不能包在<p></p>或<div> 里 <li>表格必须含 <code><thead>（哪怕只有一行标题），<code><th> 要设 <code>scope属性（scope="col"或scope="row"），否则屏幕阅读器无法建立行列映射 -
<label for="xxx"></label>的for值必须与对应<input id="xxx">完全一致（大小写敏感）；不配对就等于放弃键盘点击聚焦能力 -
<img>必须带alt：有意义就写描述，纯装饰就写alt=""（不是删掉属性）；缺失alt会让屏幕阅读器读出文件名，暴露路径风险 -
<picture></picture>+<source></source>+<img>是响应式图片标配；<img srcset>单用不够，缺少<sizes></sizes>就无法正确匹配视口宽度 -
<video></video>至少提供 MP4<source></source>和poster属性；<iframe></iframe>嵌视频会丢失播放控制、字幕、分享等原生能力
列表、表格、表单：每个都有不可妥协的嵌套规则
这些标签的结构松动，会直接让屏幕阅读器播报错乱、SEO 提取失败、甚至 JS querySelectorAll('li') 拿到意外节点。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
资源加载和可访问性：HTML 层面就能堵住大半性能与体验漏洞
图片懒加载、视频 fallback、关键元数据——这些不是等 CSS/JS 补救的，是 HTML 本身该承担的责任。
最常被忽略的一点：所有块级标签（<div>、<code><p></p>、<section></section>、<header></header> 等）都该显式闭合。HTML5 允许省略，但模板引擎、服务端渲染、DOM 解析差异会让“看起来一样”的代码，在不同环节产出完全不同的树结构——而你调试时根本看不到那层自动补全的逻辑。
