-
Notifications
You must be signed in to change notification settings - Fork 5
Expand file tree
/
Copy pathhtml2025.yml
More file actions
369 lines (245 loc) · 27.4 KB
/
html2025.yml
File metadata and controls
369 lines (245 loc) · 27.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
locale: ua-UA
translations:
###########################################################################
# General
###########################################################################
- key: general.results.description
t: The 2025 edition of the annual survey about the latest trends in the HTML ecosystem.
- key: general.html2025.survey_intro
t: |
У 2023 році, коли опитування "Стан JS" та "Стан CSS" проводилися вже кілька років, ми усвідомили, що чогось бракує: а як же технологія, яка поєднує все це воєдино?
Адже HTML сьогодні далеко поза тегами й атрибутами — він охоплює API для динамічних оновлень, збагачені вбудовані елементи, підказки швидкодії, шаблони й компоненти та багато іншого.
Перше опитування "Стан HTML", очолене суперзіркою вебу [Lea Verou](https://lea.verou.me/), побило всі попередні рекорди для нового опитування, зібравши 21 тисячу респондентів, і запровадило нові UI-парадигми, що поліпшили всі наступні опитування.
Цього року, з Lea знову біля керма, ми додали ✨35 нових функцій✨ та започаткували два нові розділи: **Графіка та мультимедіа** і **Швидкодія**.
Ба більше, як і в попередніх хвилях, цьогорічні результати братимуться до уваги розробниками браузерів під час формування своїх "дорожніх мап", тож участь в опитуванні може допомогти сформувати майбутнє вебу!
Готові? На старт, увага, руш!
- key: features.features_intro_html2025
aliasFor: features.features_intro_html2024
- key: introduction.html2025
t: |
If you want to get an idea of how capable the web platform has gotten over the past few years, look no further than the list of categories covered in this survey.
Forms, graphics, performance features, methods of interacting with various system and device APIs, accessibility… It's a wonder anybody is able to keep track of it all!
Thankfully at least one person is: [Lea Verou](https://lea.verou.me/), who after designing the original version of the survey in 2023, joined us again this year to give it an update.
And together, one of the areas we focused on this year was analyzing the vast quantity of freeform answers collected around various pain point areas.
You'll now be able to dig deeper into categorized data, as well as access (and search through) respondents' original answers.
If nothing else, this should help us realize that we're all in this together, sharing the same frustrations- but also the same hopes!
<span class="conclusion__byline">– Sacha Greif</span>
- key: faq.survey_design_html2025
t: Як було розроблено це опитування?
- key: faq.survey_design_html2025.description
t: >
Опитування було розроблено унаслідок [відкритого процесу розробки](https://github.com/Devographics/surveys/issues/253) із залученням постачальників браузерів і спільноти веброзробки.
- key: faq.results_released_html2025
t: Коли будуть опубліковані результати?
- key: faq.results_released_html2025.description
t: Опитування триватиме з 15 липня до 15 серпня 2025 року, і його результати будуть опубліковані орієнтовно 15 вересня 2025 року.
###########################################################################
# Figures
###########################################################################
- key: figure.figure_lazy_loading_usage.html2025
t: Proportion of respondents having used **lazy loading**, the most-used feature among those with the “Newly Available” Baseline status.
- key: figure.figure_content_security_usage.html2025
t: Largest year-over-year usage increase, for **Content-Security Policy**.
- key: figure.figure_forms_features.html2025
t: Number of comments on the most-commented feature, **datalist**.
###########################################################################
# Highlights
###########################################################################
- key: highlight.customizable_select.html2025
t: |
**Customizable Select** may not currently be widely supported, yet it's a feature worth knowing about. While only used by **7.1%** of respondents, **89%** of developers who *have* used it report a positive experience.
And given that the `<select/>` element has always been a challenge to style, being able to finally customize it to your needs without resorting to JavaScript-based hacks is a welcome improvement!
- key: highlight.jpeg_xl.html2025
t: |
After the "JIF/GIF" pronunciation fiasco and the confusingly-named "PNG" ("pee-en-gee"? "ping"?), whoever's in charge of image format nomenclature decided to keep things simple this time: take the already-popular JPEG and add an “XL” to it to make it cooler.
But not bigger though, as contrary to their name JPEG XL images are actually *smaller* than boring old JPEG–while somehow also being backwards-compatible with it. Don't ask me how that works.
- key: highlight.hidden_until_found.html2025
t: |
Did you know that browsers can now play hide-and-seek? The `hidden="until-found"` attribute lets you hide an element until the user triggers it, by (for example) clicking an anchor link pointing to it.
Right now the feature is definitely in its “hidden” state, with **79.4%** of respondents having never even heard about it before. And browser support is still sparse (looking at you, Safari!). But once interoperability improves, it might just turn out to be worth adding to your toolbelt.
- key: highlight.popover_api.html2025
t: |
The **Popover API** is “Newly Available” as of this year, meaning it's now supported in all four major browsers. Which makes this the perfect time to learn how it can help you get rid of hacky JavaScript code, and replace it with a nice declarative API!
- key: highlight.blocking_render.html2025
t: |
Those of us who give a FOUC (Flash of Unstyled Content) about controlling how websites load will be happy to learn about `blocking="render"`. As it name implies, this attribute can make a `<link>`, `<script>` or `<style>` tag block the page's rendering until they're fully loaded.
Browser support isn't quite there yet–but it's definitely something that will make web loading UX much smoother once it becomes widely supported.
- key: highlight.element_internals.html2025
t: |
If you write web components, you must have often needed to specify custom pseudo-classes, default ARIA parameters, or to make a component behave like a regular form element?
**ElementInternals** does all that, and more! The best part? It’s Widely Available, supported by all browsers since 2023!
- key: highlight.payment_request_api.html2025
t: |
“My favorite carrot cake recipe? Sure, I'll tell you! But first, can I interest you in a new mattress? Or maybe some shoes?”.
Ads can seem like an inescapable part of the web, especially when you're trying to bake a new pastry. But the **PaymentRequest API** could be the first step towards making browser-integrated micro-payments a reality. And that fact alone makes it worth keeping an eye on.
- key: highlight.search_element.html2025
t: |
The `<search>` element is one of those easy wins that take very little effort to add to your list of best practices. Step 1: use it to denote any search field in your apps. Step 2: well that's it really!
And now that it's supported in all four major browsers, there's really no reason not to be using it.
###########################################################################
# Takeaways
###########################################################################
- key: forms.forms_features.takeaway.html2025
t: |
Surprisingly, `<input type="color"/>` was the most used form-related feature this year, with **41.8%** of respondents reporting having used it.
But when looking at positive sentiment, basic UI building blocks like autocomplete (`<datalist>`) and dropdowns (Customizable Select) top the rankings, showing that developers value features that are customizable and can be tailored to their needs.
- key: forms.forms_pain_points.takeaway.html2025
t: |
**Styling & customization** of default form control UI elements remains a big stumbling block, with nearly **half** of pain points being about it.
**Form validation** is also a problem, especially when it comes to more advanced use cases like validating one field's value based on another.
- key: graphics_multimedia.graphics_multimedia_features.takeaway.html2025
t: |
**JPEG XL** and **ctx.drawElement()** were the two new features that garnered the most positive sentiment, whereas more complex areas like augmented or extended reality APIs didn't score as high–showing once more that devs are first and foremost interested in primitives that make their daily lives easier.
- key: graphics_multimedia.graphics_pain_points.takeaway.html2025
t: |
SVG has always been the the dark horse of the Web, chronically neglected by browser vendors, yet being used on nearly every website. It is therefore no surprise that it dominates here, with a quarter of pain points being about it.
- key: content.content_features.takeaway.html2025
t: |
Both the most liked and most disliked features were security-related: the **Sanitizer API** drew the most positive opinions, while **Content-Security Policy** topped the frustration list.
This contrast highlights how security mechanisms that reduce friction and integrate cleanly with existing workflows are welcomed, while those that impose rigid policies, demand meticulous configuration, or break previously working code can generate resentment.
- key: content.content_pain_points.takeaway.html2025
t: |
The data paints a very clear picture: By far the most pressing content point is **HTML reuse**, both across pages, and within the same page. Even though this is already possible through build tools and component-based front-end frameworks, it appears there is large demand for a platform-native feature.
- key: interactivity.interactivity_features.takeaway.html2025
t: |
There is huge demand for simple but customizable, declarative primitives for common things, as evidenced by the large proportion of positive sentiment for every single HTML feature in this category.
- key: interactivity.interactivity_pain_points.takeaway.html2025
t: |
The large proportion of browser support issues mentioned here sends a clear message: “we love all these new features you've given us–now make them work everywhere so we can actually use them!”.
- key: performance.performance_features.takeaway.html2025
t: |
It's loud and clear: the DX of `srcset` and `sizes` could use improvement! Both ends of the spectrum are around it, with `srcset`/`sizes` itself topping the frustration list, and `sizes="auto` being the most liked feature—because it alleviates some of this pain.
- key: performance.performance_pain_points.takeaway.html2025
t: |
The whole point of the web is to give people access to faraway content. Given that, it does feel a bit strange that **loading** that data is so often an afterthought, with little progress made in the last 30 years apart from slightly nicer spinner animations.
- key: web_components.web_components_features.takeaway.html2025
t: |
Once again we see declarative solutions prevailing, with **declarative custom elements** topping the sentiment chart.
- key: web_components.web_components_pain_points.takeaway.html2025
t: |
We know that **extending built-in elements** is a long requested feature, and these results validate it, as it is the top concrete pain point topic here (after the more abstract ones around complexity, reliance on JS, and accessibility).
- key: web_components.web_components_other_pain_points.takeaway.html2025
t: |
Compared with previous years the same themes are still present: high cognitive overhread, falling short when compared to framework components, and Shadow DOM being more of a problem than a solution.
- key: system_capabilities.system_capabilities_features.takeaway.html2025
t: |
Opening and saving a file is one of the most basic app capabilities, and yet until recently was unattainable for web apps — until the **File System Access API**. It is therefore no surprise that it topped the chart of positive sentiment.
On the other hand, device APIs such as **WebUSB**, **Web Bluetooth**, or **WebNFC** collected the least interest, verifying once more that the features that gather the most interest are those that solve basic, common problems.
- key: system_capabilities.system_capabilities_pain_points.takeaway.html2025
t: |
The data paints a very vivid picture: the top pain point here is neither ergonomics, nor limitations, but **browser support**, and more specifically, a specific vendor that many developers see as obstructing the web platform's progress.
# a11y
- key: accessibility.accessibility_features.takeaway.html2025
t: |
**Landmark elements** (`<main>`, `<nav>`, etc.) aren't very new or exciting but they remain a foundation of web accessibility.
- key: accessibility.accessibility_pain_points.takeaway.html2025
t: |
While there are technical gaps when it comes to accessibility (e.g. cross-root ARIA), a recurring theme whenever we ask about it is that the main pain points are around the *humans* involved with issues around workplace priorities, education, and cognitive overhead topping the list.
- key: accessibility.accessibility_techniques.takeaway.html2025
t: |
While things like alt text or proper heading hierarchy have become second nature to most front-end developers, newer tools like the `prefers-` set of media queries have yet to truly become mainstream.
- key: accessibility.accessibility_disabilities.takeaway.html2025
t: |
It's nice to see that beyond accounting for users with vision impairments, more developers are also taking atypical color vision and mobility impairments into account compared to last year.
- key: accessibility.accessibility_screenreaders.takeaway.html2025
t: |
Once again, easily accessible tools like VoiceOver or the Chrome DevTools win over more specialized options. Although many developers still don't use screen readers of any kind (also note that 39% of survey respondents skipped the question altogether).
- key: accessibility.accessibility_tools.takeaway.html2025
t: |
Browser devtools have seen a huge jump in usage compared to last year's results, seeing them overtake Lighthouse to become the lead accessibility testing tool.
# usage
- key: usage.html_interoperability_features.takeaway.html2025
t: |
There's always a bit of lag between the state of the web platform and actual real-world adoption, so it shouldn't come as a surprise that the **Popover API** still tops the rankings. But make no mistake, this feature now officially has the "Newly Available" Baseline status, meaning using it across browser should be much less of an issue going forward.
- key: usage.html_functionality_features.takeaway.html2025
t: |
Form controls and other interactive elements are once again those perceived as most limiting. With customizable select out of the way, it looks like perhaps date pickers should be the next target.
- key: usage.html_missing_elements.takeaway.html2025
t: |
This year again **datatable** is the most requested new element. While it would certainly be nice to have built-in filtering, sorting, searching, etc. capabilities, it doesn't seem like something that will become a reality anytime soon.
On the other hand, progress is being made on other long-awaited features such as a native **switch** element, which explains its drop in the rankings.
- key: usage.html_styling_issues.takeaway.html2025
t: |
It will be no surprise that form inputs top the list of hardest elements to style. Thankfully, [customizable select elements](https://developer.chrome.com/blog/a-customizable-select) are in the works, even though [browser support](https://web-platform-dx.github.io/web-features-explorer/features/customizable-select/) is still lagging.
- key: usage.component_strategies.takeaway.html2025
t: |
It's hard to dispute that JavaScript components have become the dominant paradigm of building UIs on the web. And yes, dealing with all these competing front-end frameworks can be messy–but it's a mess we know (and maybe even love?), a fact that makes it tough for web components to gain ground beyond fourth place.
- key: usage.design_system_strategies.takeaway.html2025
t: |
Design systems have become a requirement for most large-scale projects, and that fact is reflected in the popularity of all these various approaches.
- key: usage.html_css_js_balance.takeaway.html2025
t: |
As shown in the “Component Strategies” chart above, JavaScript is the de facto vessel for a lot of the HTML code we produce. Which explains why we spend so much time writing it!
- key: usage.what_do_you_use_html_for.takeaway.html2025
t: |
While the average survey respondents mainly works on dynamic web apps, many of us also spend time creating blogs or other text-heavy sites, harkening back to HTML's roots as a document-oriented language.
- key: usage.html_pain_points_freeform.takeaway.html2025
t: |
When looking at web platform pain points more generally, browser support stands out–especially when it comes to the Apple ecosystem.
As a result, community initiatives such as the [#AppleBrowserBan](https://open-web-advocacy.org/apple-browser-ban/) hashtag have been gaining steam, while on the vendor front [Interop](https://web.dev/blog/interop-2025) moves the needle in the right direction each year.
# opinions
- key: opinions.accessibility_is_valued.takeaway.html2025
t: |
Given that lack of workplace buy-in is often cited as an obstacle to proper accessibility practices, it's nice to see that among survey respondents at least, things seem to be getting better, with both “agree” bars increasing compared to last year.
- key: opinions.validation_is_important.takeaway.html2025
t: |
It's easy to forget about HTML validation when dealing with the chaos of modern web development. But respondents agree that it remains an important part of the process.
- key: opinions.keeping_informed_is_challenging.takeaway.html2025
t: |
Despite great initiatives like [Baseline](https://web-platform-dx.github.io/web-features/), [keeping up with the web platform](https://css-tricks.com/how-to-keep-up-with-new-css-features/) remains a challenge. Hopefully this survey helps at least a little!
- key: opinions.keeping_informed_is_challenging.takeaway.html2025
t: |
Despite great initiatives like [Baseline](https://web-platform-dx.github.io/web-features/), [keeping up with the web platform](https://css-tricks.com/how-to-keep-up-with-new-css-features/) remains a challenge. Hopefully this survey helps at least a little!
- key: opinions.browser_interoperability_is_obstacle.takeaway.html2025
t: |
It's not easy being a browser vendor in 2025. Developers complain about platform stagnation, so you introduce new features and APIs… only for developers to now complain about the lack of cross-browser support!
This is why [Interop](https://web.dev/blog/interop-2025) has become a key part of the process over the past couple years. It gives browser vendors a chance to coordinate on feature compatibility, and avoid having all their hard work ruined by poor interoperability.
- key: opinions.browser_interoperability_pace.takeaway.html2025
t: |
The results of those interoperability efforts are reflected in this chart, with **75%** of respondents agreeing that things are moving at a faster pace than before.
- key: opinions.web_platform_right_direction.takeaway.html2025
t: |
Similarly, **77%** of respondents have a positive opinion of the web platform's overall direction.
###########################################################################
# Conclusion
###########################################################################
- key: conclusion.html2025.lea_verou.name
t: Dr Lea Verou
- key: conclusion.html2025.lea_verou.bio
t: Speaker, Author, Award-Winning Web Architecture Consultant
- key: conclusion.html2025.lea_verou
t: >
We often expect that the flashiest features would attract the most developer interest. Things like AI-powered APIs, 3D/XR/AR, or device APIs. Yet year after year, what rises to the top is anything but fancy. Almost… mundane: Dropdowns. Comboboxes. Popovers. Dialogs. Form validation. Loading and saving files. Templating. Safely displaying user-generated content. Icons.
### Making APIs Usable
“But — many of these already exist!” you might object. They do — but when built-in UI can’t be customized or styled, it is effectively unusable. Developers are forced to recreate it anyway.
Once that penny drops, it explains most of the survey results. It explains why **Customizable Select** topped the charts. Why low-level primitives like popovers and invokers are so well-received. Why **SVG** and **drawing HTML on canvas** ranked far above AR/VR. Even why **extending built-in elements** emerged as such a major Web Components pain point.
After all: how many times can you rebuild a button or dropdown before losing your mind? And how confident are you that you got it right?
As a result, building professional interactive UIs still requires cobbling together numerous third-party solutions, even for things that are routine in proprietary platforms.
### Lagging Change
This finding is not new. In [the first State of HTML](https://2023.stateofhtml.com/), we already saw how critical styling and customization were, especially around forms. This year’s deeper analysis confirms it hasn’t changed — in fact, the signal is louder.
But things *have* changed for the better! Features that were being discussed in 2023 have now shipped in major browsers. Others that were impractical back then—like the **Popover API**—are now universally supported.
And yet, Popover still tops browser support complaints. Why? While the pace of implementation has accelerated, collective perception lags behind. It now takes longer for developers to trust support than for browsers to ship it!
### The Impact of LLMs
The rise of AI-generated code is a contributing factor. LLMs are surprisingly well-versed in modern web platform features, and *could* have helped move the community forwards, but are overly conservative in what they recommend. In practice, this may even be *slowing* adoption! How to fix this at scale remains an open question. Meanwhile, explicit browser support instructions do help, and who knows, if enough devs do this, the problem may even fix itself.
### Looking Ahead
Looking ahead, the future looks bright. Many of the pain points highlighted are actively being worked on, and in some cases already shipping. Even extensible built-ins, previously considered a dead end, is seeing potential progress through the early stage work around custom attributes.
All these primitives point in the same direction: a web platform that is steadily becoming more flexible, more expressive, and more aligned with how developers actually build UIs.
Progress on the Web is rarely dramatic, but it is cumulative. Each new primitive reduces the need for workarounds, libraries, and fragile hacks. And when those fundamentals fall into place, the impact will be felt everywhere.
- key: about.content.html2025
t: |
Опитування "Стан HTML 2025" тривало з 19 липня до 1 вересня 2025 року та зібрало 6223 відповіді.
Опитування загалом розробляла [Lea Verou](https://lea.verou.me/), план опитування спільно обговорювався [на платформі GitHub](https://github.com/Devographics/surveys/issues/253)
Інфраструктурою опитувань керує [Sacha Greif](https://sachagreif.com/) з допомогою запрошених експертів та учасників проєктів із відкритим програмним кодом.
Цьогорічні логотип і футболку розробив [Christopher Kirk-Nielsen](http://chriskirknielsen.com/).
### Цілі опитування
Це опитування було створено для визначення майбутніх тенденцій в екосистемі веброзробки, щоб допомогти розробникам здійснити вибір з-поміж наявних технологій.
Так опитування зосереджено більше на передбаченні того, що станеться протягом наступних кількох років, ніж на аналізі того, що популярно саме зараз, — ось чому деякі функції чи технології іноді можуть не згадуватися попри широке впровадження.
Його також слід сприймати як **знімок певної підмножини розробників у певний момент часу**, а не промовистий опис від імені всієї екосистеми.
Опитування було повністю відкрите та доступне онлайн, респонденти жодним чином не відфільтровувалися та не відбиралися.
### Фінансування проєкту
Цей проєкт фінансується з різних джерел:
- **Продаж футболок**.
- **Посилання від спонсорів**: посилання на рекомендовані джерела у нижній частині кожної сторінки надають наші партнери [Frontend Masters](https://frontendmasters.com/).
- **Інше**: [Google](https://www.google.com/) і [TokyoDev](https://www.tokyodev.com/) також профінансували роботу над опитуванням.
### Технічний огляд
Більш детальний технічний огляд того, як проводяться опитування, [тут](https://dev.to/sachagreif/how-the-devographics-surveys-are-run-2023-edition-1p6a).