HTML 标题、列表与表格：让内容结构可理解

页面的文字结构不是“看起来像标题”就够了。浏览器、屏幕阅读器、搜索引擎和自动目录都需要可预测的语义；字号、颜色、项目符号和边框则由 CSS 负责。

标题描述内容层级

h1 到 h6 表示六层标题。通常先为页面或文章提供清楚的 h1，其下用 h2 划分主题，再用 h3 描述子主题；不要为了缩小字体跳到较低层级，也不必为了视觉尺寸重复堆标题。用 CSS 的 font-size、间距和字重控制外观。

标题层级应反映内容，而不是单纯遵循固定数字规则。检查时看目录是否能概括文章、跳到任一标题后是否仍能理解章节关系。组件中的标题也要结合页面整体层级设计，不要让卡片标题把整页目录变成无意义的多层结构。

有序、无序和描述列表

当项目顺序不重要时用 ul，步骤、排名或顺序本身有意义时用 ol，每个条目放在 li 内。列表可嵌套，但子列表应放在所属 li 中。项目符号样式改用 CSS list-style-type；少数需要编号起点、反向计数的有序列表才用 start、reversed 等具有语义的属性。

dl、dt、dd 适合术语与说明、元数据名称和值等关联关系，不是通用的两栏布局工具。导航链接组、功能特性清单和按步骤操作都能用原生列表表达，用户代理会提供正确的列表语义。

<h1>发布文章前的检查</h1>
<h2>验证步骤</h2>
<ol>
  <li>运行自动化测试。</li>
  <li>检查移动端和键盘操作。</li>
  <li>确认部署后页面和接口正常。</li>
</ol>

<h2>发布属性</h2>
<dl>
  <dt>可见性</dt>
  <dd>公开文章可被访客访问。</dd>
  <dt>发布时间</dt>
  <dd>未来时间的文章不应提前出现在公开索引中。</dd>
</dl>

表格只表达二维数据

table 用于行列之间存在关系的数据，不用于页面排版。用 caption 给表格命名；列标题用 th scope='col'，行标题用 th scope='row'，数据单元格用 td。大型表格可用 thead、tbody 和 tfoot 分组。若表格在手机上太宽，应优先简化比较维度或提供合理的横向滚动容器，而不是缩小到无法阅读。

旧式 align、bgcolor、cellpadding、cellspacing、width 和 summary 等布局/展示属性不应作为新页面样式方案。用 CSS 的 text-align、padding、border-spacing、width 和边框规则；可访问表格摘要通常由可见 caption 或紧邻说明提供，避免把说明藏在不易发现的属性里。

<table>
  <caption>浏览器回归结果</caption>
  <thead>
    <tr><th scope='col'>视口</th><th scope='col'>导航</th><th scope='col'>阅读页</th></tr>
  </thead>
  <tbody>
    <tr><th scope='row'>桌面</th><td>通过</td><td>通过</td></tr>
    <tr><th scope='row'>手机</th><td>通过</td><td>通过</td></tr>
  </tbody>
</table>

结构与表现分离

页面结构负责回答“这是什么、与什么相关”；CSS 负责回答“它长什么样”。不要把列表改成一串带项目符号的字符，不要用表格模拟栅格，也不要把纯文字包在标题标签中只为获得更大字号。正确语义常常可以减少额外 ARIA 标记，因为原生元素已自带角色和键盘行为。

交付前逐项核对：

1. 文章是否只有一个清晰的主标题，子标题顺序是否能构成目录。
2. 一组重复项目是否是真正的列表；有顺序的步骤是否使用 ol。
3. 术语说明使用描述列表，二维对照使用数据表格。
4. 表格是否有可见标题、正确行列标题和移动端阅读方案。
5. 展示差异是否都写在 CSS，而不是过时 HTML presentational attributes。

参考：MDN heading elements、MDN ul、MDN ol、MDN dl、MDN table、WHATWG HTML Standard。