4、大规模 HTML 开发：模块化与语义化实践

大规模 HTML 开发：模块化与语义化实践

1. 大规模 HTML 的现状与问题

曾经，HTML 占据主导地位，浏览器制造商急于按照网页开发者的需求为其添加各种功能。然而，这些功能常常超出了 HTML 原本的范畴，且很多是以专有方式实现的。除了长期困扰网页的浏览器互操作性问题外，过度扩展 HTML 使开发者不仅将其用于描述页面内容，还用于定义页面部分的外观和行为。

在大型 Web 应用中，这种混合使用 HTML 的方式会造成混乱，阻碍网站结构的灵活构建和引导访客浏览。从概念上讲，使用 HTML 进行布局会模糊页面的信息架构，而清晰的信息架构能使数据在各种上下文中更易于理解和消化。当大型 Web 应用的信息架构不清晰时，会对可重用性、可维护性和可靠性产生不利影响。良好构建的 HTML 应反映而非模糊信息架构。

2. 模块化 HTML 的重要性

在组装网页时，应选择能提高页面组件和部分在更多场景下可重用性的方式。即使不打算重用组件，将页面拆分为小的独立组件也能使其更可靠、更易于维护。组件可以是小控件（如分页器），也可以是页面的整个部分（如搜索结果列表）。

要确定页面上的潜在组件，需将页面解构为合理的模块。下面以“新车评测”模块为例，探讨如何让其 HTML 更好地反映信息架构。

3. 不同 HTML 实现示例分析

3.1 糟糕示例：使用表格和表现标记

以下是“新车评测”模块使用表格和表现标记的 HTML 示例：

<table>
   <thead>
      <tr&