HTML是一种标记语言,而非编程语言——请像使用编程语言那样来使用它。
将HTML视为用于导航、搜索引擎优化、无障碍访问以及页面渲染性能的结构,并用浏览器和爬虫能够理解的语义化元素取代传统的div标签堆砌。
核心问题
HTML仍被视为入门简单的技能——只有标签、表单以及几种基本布局,而如今的网页规模已变得极为庞大。典型的文档现在会包含数千个DOM节点,但许多网站仍沿用早期小型网页的编写习惯。这种差距体现在四个方面:用户的导航方式、搜索引擎对页面结构的解析方式、浏览器渲染的效率,以及爬虫和人工智能系统从标记中提取信息的方式。
HTML并非编程语言
标记语言用于组织内容;编程语言则用于表达行为。两者的区别十分明显:
- 逻辑:编程语言通过条件语句实现分支处理,而HTML无法做出决策。
- 状态:编程语言会保存变量,HTML则没有。
- 输出:编程语言负责计算数值,HTML则描述应显示的内容。
将HTML称为编程语言会混淆不同类别的定位。它其实是一种用于构建和描述浏览器将要展示内容的标记语言。
互联网存在DIV问题
嵌套的匿名框仍然很常见:
<div><div><div>
<div>Text</div>
</div></div></div>
一种语义化的替代方案是通过命名角色来代替层层嵌套的包装元素:
<article>
<header><h1>Title</h1></header>
<main><p>Text</p></main>
</article>
过度使用div进行嵌套会损害可访问性结构,降低维护效率,还会让浏览器处理更多无意义的结构。应优先使用能明确表达功能的元素。
HTML面临身份认同危机
HTML最初是用于文档发布的格式,如今却支撑着类似软件的体验:控制面板、渐进式Web应用、游戏等。以下是其发展简史:
- 1991年:学术文档
- 1996年:基于表格的布局
- 2004年:AJAX时代的网页应用
这种语言从未被设计为完整的应用程序运行时环境,但现代DOM提供了丰富的API接口,各类应用框架都基于这些接口构建。
浏览器实际看到的内容
渲染是一个流程,而非单次操作:
- DOM树 — HTML被解析为元素与结构
- CSSOM — 样式被应用
- 渲染树 — DOM与CSS结合
- 布局 — 计算几何形状
- 绘制 — 绘制像素
糟糕的标记方式可能在CSS或JavaScript成为瓶颈之前就影响性能。结构复杂且匿名性强的DOM树即便样式看起来正常,也会增加布局和可访问性处理的难度。
语义化HTML拯救网络
语义化标签为浏览器、搜索引擎和辅助技术提供了更清晰的结构:
<article>可向读者和索引器标示独立内容<nav>用于标识导航要点<main>突出显示爬虫优先处理的主要内容区域<figure>以解析器能够识别的方式将媒体与标题配对
劣质HTML的隐性代价
- 性能:过大的DOM会降低低端设备的渲染速度
- 无障碍性:薄弱的结构会让屏幕阅读器和键盘用户感到困扰
- SEO:在大多数客户端JavaScript运行之前,搜索系统仍会依赖HTML结构
HTML5改变了这一切
在HTML5出现之前,富媒体功能往往依赖Flash或Java小程序。而原生元素和API取代了大部分这类技术:
- 多媒体:
<video>和<audio>取代了插件播放器 - 图形:
<canvas>和<svg>实现了无需小程序的绘图功能 - 存储:
localStorage减少了仅依赖cookie的客户端数据持久化方式
如今的HTML是由WHATWG维护的动态标准,仍在持续发展,而非固定为某个编号为“HTML6”的版本。
HTML的未来
框架改变了内容创作流程,但浏览器最终仍会解析HTML。以下趋势使得标记语言依然占据核心地位:
- 原生Web组件,可在无需框架的情况下实现可复用的功能模块
随着机器逐渐成为页面的主要使用者,结构、无障碍性以及语义清晰度的重要性只会愈发凸显,而不会降低。
后果——面临的挑战
HTML作为网页背后的基础支撑,已经经历了从宣传页网站到AI辅助应用等各种网络发展潮流的考验。学习标签已不再是难点,真正的难题在于要承担因粗心使用标签而带来的长期后果:难以访问的div结构、反应迟缓的DOM,以及既无法被人类也无法被爬虫信任的标记格式。
主要参考资料包括位于 http://html.spec.whatwg.org/ 的 WHATWG HTML 标准、http://developer.mozilla.org/ 的 MDN 文档、https://htmhell.dev/ 上的实际反模式案例,以及 http://almanac.httparchive.org/ 上的 Web Almanac 测量数据。