2024年07月03日

Understanding the current state of web development as inferred from the State of HTML 2023.

Categories:Technology

Tags:front-end, Web

Knowledge_seci_model

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.

State of HTML 2023

Latest Column

Ready to
get started?

Build faster and focus on front-end development