COLUMN
2024年07月03日
Understanding the current state of web development as inferred from the State of HTML 2023.
Categories:Technology
Tags:front-end, Web
State of HTML 2023 is an annual report that surveys the usage of web technologies, focusing on HTML aspects rather than JavaScript, and summarizes the results.
By learning about the technologies used in various countries, we can understand the future direction of web development. This time, I'll summarize some interesting data from this report.
Usage of Form APIs
Regarding form-related APIs, the usage statistics are as follows:
- FormData: 50.7%
- autocomplete: 47.9%
- datalist: 22.6%
- HTML Media Capture: 16.5%
- contenteditable="plaintext-only": 9.5%
- input.showPicker(): 7.7%
- selectlist: 2%
Additionally, usage statistics by input type are as follows:
- number: 94%
- email: 89%
- file: 88%
- date: 83%
- tel: 70%
- range: 68%
- time: 56%
- url: 50%
- color: 46%
Surprisingly, a wide variety of input types are actually being used. However, datetime-local
, month
, and week
seem to be less widely adopted.
Pain points in using forms include:
- Customizing styles: 54%
- Challenges with input types: 33%
- Validating input values: 18%
Other challenges include browser support, form handling, and accessibility.
New Tags
Here is the usage of new tags that enhance interactivity. They appear to be more widely used than expected.
- detail/summary: 46.7%
- dialog: 31.2%
The highest challenge regarding interactivity is browser support at 14%. When adopting such new tags/APIs, it's crucial to always check their support status.
Content
Regarding content-related elements, the usage statistics are as follows:
- Lazy Loading: 57.9%
- srcset/sizes: 53.2%
- Resource Hints: 41.3%
- CSP: 39.8%
APIs
APIs that enable native app-like UX are discussed here. The Web Share API is useful for sharing content on mobile, while the File System Access API is crucial for future web apps to behave like local applications.
However, overall usage rates still seem relatively low.
- Web Share API: 12.6%
- File System Access API: 9.3%
- File Handling API: 4.4%
- Launch Handler API: 4.4%
Native App Development
Regarding languages used for native app development, 56% of respondents use JavaScript-based frameworks. Examples include Cordova, React Native, and Capacitor.
- JavaScript-based frameworks: 56%
- Native: 22%
- Other: 19%
Storage
Regarding storage mechanisms like localStorage and IndexedDB, IndexedDB still has a relatively low adoption rate.
- localStorage: 91%
- sessionStorage: 71%
- Cookies: 69%
- IndexedDB: 30%
- Cache Storage: 20%
PWA Features
Regarding Progressive Web Apps (PWA) that operate like native apps, adoption rates for features like Service Worker and App Manifest are not very high.
- App Manifest: 55%
- Service Worker: 52%
- Notification API: 19%
Challenges in Making Web Apps Feel Native
Challenges related to using PWA or JavaScript frameworks for native-like experiences include issues specific to iOS. These may involve differences between Safari and Chrome, as well as constraints imposed by iOS.
- Apple/iOS-related issues: 22%
- PWA challenges: 16%
- Browser support: 12%
- UX challenges: 6%
Conclusion
Understanding the usage of HTML helps us grasp the direction of web development. There are technologies adopted globally and others still in the process of widespread adoption. To stay ahead in adapting to new technologies, it's essential to constantly keep up with the latest information.