前言

近日，「State of HTML 2025」年度调查报告公布。

这份报告收集了全球数万名开发者的真实使��经验和反馈，堪称是 Web 开发领域的“年度风向标”。

让我们看看 2025 年，大家都用了 HTML 的哪些功能。

注：State of JS 2025 还未公布，欢迎关注公众号：冴羽，第一时间获取报告结果。

特性 Top 5

开发者使用最多的特性 Top 5 分别是：

1. 地标元素（Landmark Elements）

其实就是<aside>, <article>, <main>, <nav>, <section>这些，想必你也经常使用。

2. tabindex 属性：使 HTML 元素可聚焦，允许或阻止它们按顺序获得焦点。

<div role="button" tabindex="0">I’m Tabbable</div>

3. <svg>（内联 SVG）

<svg>
  <circle cx="50" cy="50" r="50" />
</svg>

4. <canvas>

<canvas width="200" height="200"></canvas>

5. loading="lazy"：懒加载

<img src="picture.jpg" loading="lazy" /> <iframe src="supplementary.html" loading="lazy"></iframe>

表单 Top 5

开发者使用最多的表单功能 Top 5 分别是：

1. <input type="color">：颜色选择器

<input type="color" />

2. <datalist>：供用户选择的表单控件

<input name="country" list="countries" />
<datalist id="countries">
  <option>Afghanistan</option>
  ...
</datalist>

3. input.showPicker()：打开具有选择器的表单控件（颜色选择器、日期输入框等）

<input id="dateInput" type="date" /> <button onclick="dateInput.showPicker()">Select date</button>

4. contenteditable="plaintext-only"：允许编辑元素的原始文本，但不允许进行富文本格式设置

<h2 class="title" contenteditable="plaintext-only"></h2>

5. Customizable Select：可自定义样式和样式的下拉控件

select,
::picker(select) {
  appearance: base-select;
}

图形和多媒体 Top 5

开发者使用最多的图形和多媒体功能 Top 5 分别是：

1. <svg>（内联 SVG）

<svg>
  <circle cx="50" cy="50" r="50" />
</svg>

2. <canvas>

<canvas width="200" height="200"></canvas>

3. ctx.drawElement()：使开发者可以在 HTML 元素上绘制 <canvas>

<canvas id="canvas" layoutsubtree="true">
  <p>Hello world!</p>
</canvas>
<script type="module">
  const ctx = canvas.getContext("2d");
  const text = canvas.querySelector("p");
  ctx.drawElement(text, 30, 0);
</script>

4. WebGL：一个基于 OpenGL 的底层 API

const gl = canvas.getContext("webgl");

5. colorSpace：设置图形的颜色空间

const ctx = canvas.getContext("2d", {colorSpace: "display-p3"});

内容 Top 5

开发者使用最多的图形和多媒体功能 Top 5 分别是：

1. 内容安全策略 (CSP)：网站向浏览器发出的一组指令，用于帮助检测和缓解 XSS 攻击

Content-Security-Policy: script-src 'self';

2. <template>：内容在加载页面时不会呈现，但随后可以在运行时使用 JavaScript 实例化

<template id="counter">
  <div class="counter">Clicked {{ times }} times</div>
</template>

3. Intl.LocaleAPI：国际化 API

const us = new Intl.Locale("en-US");

4. HTML 模块：通过 JS imports 导入 HTML 文件，并访问其元素和 JS 导出

<script type="module">
  import { TabList } from "./tablist.html" with { type: 'html' };
  customElements.define("tab-list", TabList);
</script>

5. Sanitizer API：element.setHTML() 以及 Document.parseHTML() API，通过清理 HTML 中不受信任的字符串来防止 XSS 攻击。

greeting.setHTML('Hello ' + nameInput.value);

交互 Top 5

开发者使用最多的交互功能 Top 5 分别是：

1. <details> 和 <summary>：隐藏或显示内容

<details>
  <summary>Details</summary>
  Longer content
</details>

2. <dialog>：对话框

<dialog id="confirm">
  <form method="dialog">
    Are you sure?
    <button value="1">Yes</button>
    <button value="0">No</button>
  </form>
</dialog>

3. <details name>：手风琴效果

<details open name="sidebar_panel">
  <summary>Main info</summary>
  <!-- controls -->
</details>
<details name="sidebar_panel">
  <summary>Style</summary>
  <!-- controls -->
</details>

4. popover：弹出窗口

<button popovertarget="foo">Toggle the popover</button>
<div id="foo" popover>Popover content</div>

5. element.before()：将一个元素移动到另一个元素之前的 DOM 方法

referenceElement.before(newElement);

性能 Top 5

开发者使用最多的性能功能 Top 5 分别是：

1. loading="lazy"：懒加载

<img src="picture.jpg" loading="lazy" /> <iframe src="supplementary.html" loading="lazy"></iframe>

2. srcset 和 sizes 属性：提供多个源图像，以帮助浏览器选择正确的图像

<img srcset="fairy-med.jpg 480w, fairy-large.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="fairy-large.jpg" alt="Elva dressed as a fairy" />

3. fetchpriority 属性：浏览器优先获取该资源

<img src="logo.svg" fetchpriority="high" />

4. <img sizes="auto" loading="lazy">：sizes="auto" 属性会在图像加载之前为其预留布局空间，从而避免一些布局偏移

<img sizes="auto" loading="lazy" />

5. blocking="render"：阻止渲染（但不阻止解析），直到某些资源加载完毕

<script blocking="render" async src="async-script.js"></script>

Web 组件 Top 5

开发者使用最多的 Web 组件功能 Top 5 分别是：

1. 自定义元素

<my-switch start="On" end="Off">Wi-Fi</my-switch>

2. 定义自定义元素

class MyElement extends HTMLElement { … }
customElements.define("my-element", MyElement);

3. Shadow DOM：将外部不可见的元素封装起��，并使用不影响页面其余部分的 CSS 对其进行样式设置

this.shadowRoot = this.attachShadow({ mode: "open" });

4. slot 属性：将组件 UI 中预定义的部分替换为自己的元素

<my-switch>
  Wi-Fi
  <i slot="start" class="icon-on">On</i>
  <i slot="end" class="icon-off">Off</i>
</my-switch>

5. 声明 Shadow DOM：使用 HTML 定义 Shadow 树，例如在服务器端渲染 Web 组件时

<host-element>
  <template shadowrootmode="open">
    <!-- Shadow content -->
  </template>
</host-element>

系统功能 Top 5

开发者使用最多的系统功能 Top 5 分别是：

1. Web Share API：将内容共享给用户选择的各种目标的机制

navigator.share(shareData);

2. 文件系统访问 API：访问用户本地设备上的文件和目录，并创建可写文件，以便进行更新

const handle = await window.showSaveFilePicker();
const writable = await handle.createWritable();
await writable.write("Hello, world!");
await writable.close();

3. SpeechRecognition：将麦克风输入转换为文本的 API

const rec = new SpeechRecognition();
rec.lang = "en-US";
rec.addEventListener("result", (e) => console.log(e.results[0][0].transcript));
rec.start();

4. share_target manifest field：允许 PWA 通过系统共享对话框接收来自其他应用程序共享的数据（文本、文件、URL）

"share_target": {
  "action": "/share",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "title": "title",
    "text": "text",
    "url": "url",
    "files": [{ "name": "image", "accept": ["image/*"] }]
  }
}

5. 文件处理 API：允许 PWA 将自身注册为某些文件类型的处理程序

"file_handlers": [{
  "action": "/open-file",
  "accept": {
    "image/svg+xml": ".svg",
    "image/png": ".png"
  }
}]

无障碍 Top 5

开发者使用最多的无障碍功能 Top 5 分别是：

1. 地标元素
2. tabindex 属性：使 HTML 元素可聚焦，允许或阻止它们按顺序获得焦点

<div role="button" tabindex="0">I’m Tabbable</div>

3. <search>：用于封装搜索用户界面的语义元素

<search>
  <form action="search.php">
    <label>Find: <input name="q" type="search" /></label>
    <button>Go!</button>
  </form>
</search>

4. focusgroup 属性：使用键盘方向键在可聚焦元素之间进行键盘焦点导航

<div focusgroup="wrap horizontal">
  <!-- child elements -->
</div>

最后

我们通常认为最炫酷的功能会最吸引开发者，比如人工智能 API、3D/XR/AR 或设备 API。

然而，年复一年，最终脱颖而出的却往往是那些看似平淡无奇的功能，甚至是一些非常普通的功能：下拉菜单、组合框、弹出框、对话框、表单验证、文件加载和保存、模板、安全地显示用户生成内容、图标等等。

有人可能会问：“这些功能不是早就有了吗？”

确实是，但问题在于 ——当用户界面无法自定义或设置样式时，它实际上就等于无法使用。

于是你不得不重复造轮子，拼一堆第三方库。结果明明是基础需求，却搞得像 “高端操作”。

但好消息是：HTML 正在变好！

2023 年还在讨论的功能，现在已经在主流浏览器上线了；之前没法用的 Popover API，现在所有主流浏览器都支持了。

虽然开发者的信任要滞后很多……

比如 Popover API 明明已经全支持了，却还是开发者投诉 “浏览器不支持” 最多的功能 —— 不是浏览器没跟上，是我们还没反应过来 “这个功能已经能用了”。

此外，AI 也拖了后腿。

按理说，AI 懂现代 Web 功能，应该能帮我们更快应用新特性，但实际情况是 —— AI 太保守了，推荐的都是 “老办法”，反而让新功能的普及变慢了。

总的来说，HTML 的未来方向很清晰：更灵活、更能表达需求、更贴合开发者实际开发习惯。

最后使用报告中的一句话：

“Web 的进步很少轰轰烈烈，但都是累积的。每多一个基本功能，就少用一次变通方案、少依赖一个库、少写一个脆弱的 hack。等这些基础都到位了，整个 Web 开发都会变轻松。”

我是冴羽，10 年笔耕不辍，专注前端领域，更新了 10+ 系列、300+ 篇原创技术文章，翻译过 Svelte、Solid.js、TypeScript 文档，著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。

欢迎围观我的“网页版朋友圈”，关注我的公众号：冴羽（或搜索 yayujs），每天分享前端知识、AI 干货。