Lompat menuju konten

Pemakaian

Bagaimana anda menggunakan HTML.

Kecocokan Antar Browser

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.

Fitur-fitur HTML atau API browser manakah yang tidak bisa anda pakai karena perbedaan antar browser atau kurangnya dukungan?
Multiple
Top pain point topics corresponding to specific web platform features.

View:

Items tagged “features
0%
20%
40%
60%
80%
100%
1
2
<select>
+4
3
-1
4
5
+7
6
-1
7
-3
8
+2
9
<input type="date">
-1
10
0%
20%
40%
60%
80%
100%
% dari pertanyaan responden

Fungsionalitas Yang Terbatas

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.

Fitur-fitur HTML atau API browser manakah yang tidak bisa anda pakai karena alasan lain (dan kenapa)?
Multiple
Top pain point topics corresponding to specific web platform features.

View:

Items tagged “features
0%
20%
40%
60%
80%
100%
1
<select>
2
<input type="date">
3
+5
4
5
-1
6
+1
7
<select multiple>
8
-2
9
10
<input type="color">
0%
20%
40%
60%
80%
100%
% dari pertanyaan responden

Elemen Yang Hilang

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.

Jika anda dapat menambahkan 3 elemen ke dalam HTML, apa saja kah?
Multiple
0%
20%
40%
60%
80%
100%
1
Data table
1,545
2
Combobox / Autocomplete
1,249
3
Tab
-1
1,182
4
Menu Dropdown
1,071
5
Rich text editor
975
6
Switch / Toggle
-3
957
7
HTML include
920
8
Sortable drag-and-drop list
910
9
Skeleton UI / Pengganti Sementara Saat Memuat
-5
728
10
Menu Konteks / Menu Klik-kanan
-5
719
0%
20%
40%
60%
80%
100%
% dari pertanyaan responden

Styling Issues

It will be no surprise that form inputs top the list of hardest elements to style. Thankfully, customizable select elements are in the works, even though browser support is still lagging.

Which elements do you struggle the most to style or visually customize?
Multiple
0%
20%
40%
60%
80%
100%
1
<select>
1,699
2
<input type="date">
1,178
3
<select multiple>
792
4
791
5
Validation errors
491
6
432
7
<input type="time">
401
8
369
9
<input type="range">
317
10
314
0%
20%
40%
60%
80%
100%
% dari pertanyaan responden

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.

Which strategies do you use to implement components or otherwise reuse HTML code?
Multiple
0%
20%
40%
60%
80%
100%
1
Component-based JavaScript Frameworks
2,696
2
Server-side templating
1,922
3
Client-side templating
1,297
4
1,237
5
Build-time templating
1,184
6
Copy-paste
914
7
Web Components helper libraries
492
8
Tidak ada
44
9
Lainnya
69
0%
20%
40%
60%
80%
100%
% dari pertanyaan responden

Design Systems

Design systems have become a requirement for most large-scale projects, and that fact is reflected in the popularity of all these various approaches.

Do you use any of the following design system strategies to maintain UI consistency?
Multiple
0%
20%
40%
60%
80%
100%
1
Elements/components
3,084
2
Design tokens
2,664
3
Utilities
2,407
4
Guidelines
2,008
5
Patterns
1,316
6
Tidak ada
112
7
Lainnya
45
0%
20%
40%
60%
80%
100%
% dari pertanyaan responden

Keseimbangan HTML/CSS vs JavaScript/TypeScript

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!

Bagaimana anda membagi waktu dalam menulis kode HTML/CSS dan JavaScript (atau TypeScript)?
0%
20%
40%
60%
80%
100%
1
100% HTML/CSS
65
2
1
269
3
2
422
4
3
287
5
50%–50%
635
6
5
494
7
6
1,179
8
7
494
9
100% JS
40
0%
20%
40%
60%
80%
100%
% dari pertanyaan responden

Penggunaan HTML

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.

Untuk apa anda menggunakan HTML?
Multiple
0%
20%
40%
60%
80%
100%
1
Aplikasi web
3,378
2
Blog atau situs berorientasi teks lainnya
2,253
3
Situs web pemasaran & halaman awal
1,894
4
Sistem desain
1,519
5
Email
1,139
6
Aplikasi desktop
891
7
Aplikasi mobile
879
8
Dokumen cetak
659
9
E-Commerce sites
10
Tidak ada
16
11
Lainnya
114
0%
20%
40%
60%
80%
100%
% dari pertanyaan responden
💡
Dengan memagikan survei ini ke Twitter, Facebook, atau dengan email, terbukti secara ilmiah dapat meningkatkan kemampuan koding anda sebanyak 15%.

Titik sakit lainnya

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 hashtag have been gaining steam, while on the vendor front Interop moves the needle in the right direction each year.

Ada titik sakit lainnya terkait dengan penggunaan HTML dan teknologi terkait?
Multiple
Top pain point topics overall.

View:

Items that are not one of “limitations
0%
20%
40%
60%
80%
100%
1
Browser support
1
2
Environments & Consumers
2
3
Content
2
4
Reliance on JavaScript
5
Cognitive overload
2
6
Ecosystem issues
2
7
Education
8
Accessibility
9
Excessive complexity
10
Poor design
1
11
Styling & customization
1
12
Performance
13
Vendor politics
14
Missing elements
15
16
workplace
17
Tooling
18
Security & privacy
19
PDF
20
Declarative APIs
21
Lainnya
0%
20%
40%
60%
80%
100%
% dari pertanyaan responden

Rekomendasi Sumber

Frontend Masters

Frontend Masters

Advance Your Skills with In-Depth, Modern Front-End Engineering Courses
Terima kasih kepada semua Mitra yang telah mendukung Kami! Pelajari lebih lanjut.