法律文本排版核心是可读、可查、可执行,须用语义化HTML结构(如<article><section><h2><ol>),禁用无语义标签,统一段间距,左对齐,突出关键条款,保障响应式与无障碍访问。

法律文本排版的关键不是“好看”,而是“可读、可查、可执行”。用户协议这类内容必须兼顾法律效力、用户理解成本和网页可用性,不能简单堆砌文字或套用普通文章样式。
结构必须清晰,用语义标签分层
法律文本天然有层级:总则、章节、条、款、项。HTML 应严格对应:
- 用 <article> 包裹整份协议,表明其为独立、可引用的内容单元
- 每章用 <section>,并配 <h2> 标题(如“第一条 定义”“第二章 用户义务”)
- 条款内若需细分(如“1.1”“1.2”),用 <ol start="1"> 或嵌套 <dl>,避免手动编号
- 关键义务、免责、限制条款,用 <strong> 强调(而非仅加粗),禁用
<b>或<i>
段落控制要克制,避免视觉疲劳
法律文本不宜追求“短段落”,但也不能一整页不换行。重点在逻辑断点:
- 每个 <p> 对应一个完整法律意思单位(例如:“用户不得将账户出借、出租或以其他方式提供给第三方使用。”)
- 禁用
<br>模拟段落——它无语义,且破坏屏幕阅读器导航 - 段间距统一设为
margin: 1.4em 0;,比默认值稍大,增强呼吸感 - 首行缩进慎用:中文法律文本传统上不缩进,左对齐更显正式;如需强调起始,可用
text-indent: 0;显式重置
关键信息必须突出,但不过度装饰
用户最关心的往往是责任限制、终止条件、争议解决等部分:
立即学习“前端免费学习笔记(深入)”;
- 对“重要提示”“特别提醒”类内容,用 <aside class="notice"> 包裹,并配合浅色背景+边框+图标(CSS 实现)
- 引用法条原文时,用 <blockquote cite="《中华人民共和国电子商务法》第三十二条">,保留
cite属性供机器识别 - 超长术语首次出现时,用 <abbr title="服务条款与条件">T&C</abbr>,鼠标悬停可查看全称
- 禁止用颜色替代语义:红色不等于“危险”,必须搭配文字说明
响应式与可访问性是底线要求
用户可能在手机上快速扫读协议,也可能用读屏软件逐字听取:
- 正文字号不小于
16px,移动端放大至18px,禁用small标签缩小关键条款 - 所有链接(如“点击查看隐私政策”)必须带
aria-label,说明跳转目的 - 页面顶部加锚点导航:
<nav aria-label="协议目录"><ul><li><a href="#chap1">第一章 总则</a></li></ul></nav> - 禁用多列布局(
column-count)——法律文本严禁跨列断句,会割裂条款完整性



















