2025 年 HTML 年度调查报告公布！好多不知道！

前言

近日，「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 干货。