{"id":2404,"date":"2024-05-27T08:01:15","date_gmt":"2024-05-27T14:01:15","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=2404"},"modified":"2024-05-27T08:03:47","modified_gmt":"2024-05-27T14:03:47","slug":"state-of-html-2023-results-2","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/state-of-html-2023-results-2\/","title":{"rendered":"Here\u2019s What We Learned From the First State of HTML Survey"},"content":{"rendered":"\n
\"\"
Frontend Masters is a sponsor of the State of JS, CSS, and HTML surveys.\u00a0\u00a0<\/figcaption><\/figure>\n\n\n\n

We just published the results for the first-ever State of HTML survey<\/a>, the results of months of hard work not only on my part, but also from Lea Verou<\/a>, who designed the survey questions, and many volunteers helping out with translation, accessibility, testing, and much more. <\/p>\n\n\n\n

The survey was a success to say the least, with over 20,000 respondents taking part and answering up to 90 questions! And we\u2019re hoping the resulting data will prove to be a useful resource for the web dev community for years to come.<\/p>\n\n\n\n

But we also know not everybody has the time to parse through pages of stats and data visualizations. So if that\u2019s you, here\u2019s a quick recap of the most interesting findings from the survey. <\/p>\n\n\n\n

People Love Datalist<\/h2>\n\n\n\n

A key innovation of this year\u2019s survey was the ability for respondents to not only specify their experience with a feature (\u201cused it\u201d, \u201cheard of it\u201d, \u201cnever heard of it\u201d), but also their sentiment<\/em>, in other words whether they were happy\/unhappy, interested\/uninterested, etc, <\/p>\n\n\n\n

And the feature that came in first in terms of positive sentiment was datalist, with 55.4% positive sentiment and only 3.9% negative sentiment<\/a> (the rest being neutral). <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Datalist is a not-so-new element (it became widely supported by browsers<\/a> around 2019) that lets you create an autocomplete\/typeahead component without any JavaScript. And while it may not be as flexible as your typical JavaScript implementation, it\u2019s still quite handy \u2014 and way easier to get right!<\/p>\n\n\n\n

Other favorites included the newly-baseline\u2019d<\/a> Popover API and its cousin, the dialog element, both similar to datalist in that they emulate natively features that developers have long relied on JavaScript for. <\/p>\n\n\n\n

In other words, even though many of us have embraced JavaScript front end frameworks over the past decade, at the end of the day we\u2019d still rather let the browser take care of things!<\/p>\n\n\n\n

\u2026But Hate Forms<\/h2>\n\n\n\n

While respondents shared their love for many web APIs, there was one area where they made no secret of their discontent: forms<\/em>. <\/p>\n\n\n\n

We asked respondents what were their pain points around HTML forms, and that question collected over 11,000<\/em> responses \u2014 and I\u2019m talking about freeform comments, not just clicking a checkbox!<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

So what were people so mad about? Number one with over 3,600 comments was styling, or the lack thereof. The select element especially was a recurring culprit, which makes sense for such an omnipresent UI element \u2013 and which is why there\u2019s a proposal in the works<\/a> for a new, easier-to-style alternative. <\/p>\n\n\n\n

Apart from styling issues, respondents shared their various gripes about other form input elements, chief among them <input type=\"date\" \/><\/code>. As one respondent mentioned, \u201cdate inputs are not really usable and not fully accessible\u201d.<\/p>\n\n\n\n

Validation was also a big pain point, especially when trying to do more advanced tasks such as validating one field conditionally based on the value of another. <\/p>\n\n\n\n

And it\u2019s worth pointing out that form input elements also came in first both when respondents were asked about existing HTML features or browser APIs they were unable to use because of browser differences or lack of support, and features they were unable to use for other reasons.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Web Components\u2026 Exist<\/h2>\n\n\n\n

When it comes to web components, the developer community is roughly split into three camps. The first one thinks they\u2019re the next big thing, and that they\u2019re going to take over the industry any day now, just you see!<\/p>\n\n\n\n

The second camp believes they are a doomed initiative, especially when front end frameworks already offer all the same features and more. <\/p>\n\n\n\n

And finally, the third camp has been quietly using web components here and there when they make sense, and mostly keeping to themselves. <\/p>\n\n\n\n

It\u2019s fair to say that camp #2 was well represented in the survey, with many complaining about web component\u2019s lack of interoperability with React, Vue, and other frameworks; or even questioning the need for them altogether. And 3 out of the top 5 features with the most negative sentiment were also web components-related. <\/p>\n\n\n\n

Among people who did use web components, yet again styling & customization<\/a> was a big concern, showing that we might want more ready-made solutions; but we still want to be able to adapt them to our needs. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Yet as with the rest of the web platform, web components are constantly evolving. And until their time does come, it\u2019s totally fine to only use them on an ad-hoc basis. <\/p>\n\n\n\n

We Need Datatables, Tabs, and Switches, and We Need Them Yesterday!<\/h2>\n\n\n\n

Respondents were asked what elements they\u2019d add to HTML if they could pick anything<\/a>, and the top three results were datatables (tables with sorting, filtering, etc. controls), tabs, and toggles\/switches. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

This is interesting because all three are components that are relatively rare in static sites (although dark mode toggles are becoming a thing), but extremely common in any kind of dashboard or app. <\/p>\n\n\n\n

This recalls the age-old dichotomy between documents and apps, and although we\u2019ve long since moved past the idea that HTML is only good for describing static content, the fact that these elements are still missing shows that we haven\u2019t quite embraced HTML as an app-centric platform either yet. <\/p>\n\n\n\n

The Divide Is\u2026 Closing?<\/h2>\n\n\n\n

Five years ago, some random guy you\u2019ve probably never heard about named Chris wrote a landmark article entitled The Great Divide<\/a>. In it, Chris talks about what Brad Frost would later call<\/a> the \u201cfront-of-the-front-end\u201d (HTML\/CSS) and \u201cback-of-the-front-end\u201d (JavaScript) split. <\/p>\n\n\n\n

Granted, the survey audience may not be totally representative of the industry at large, and about 12% of respondents found the survey through having answered the State of JS survey before. <\/p>\n\n\n\n

But at least according to our data, this divide may not be as stark as once thought. About 22% of survey respondents used Next.js<\/a> for example, and when asked how they allocated their time between writing HTML\/CSS and JavaScript\/TypeScript code, 59% said they spent more than half their time writing JavaScript<\/a> \u2013 even though the survey was clearly aimed at people interested in HTML.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

In my own experience at least, even if you work primarily on the \u201cfront\u201d of the front end, very often the HTML and CSS you deal with will be generated by a JavaScript framework of some kind, meaning you can\u2019t help but step in the back to see what\u2019s going on from time to time. <\/p>\n\n\n\n

It\u2019ll be interesting to see how this trend evolves. As HTML gains more features, will the need to cover both ends of the front end spectrum diminish? Or maybe, back-of-the-front-end developers will realize they don\u2019t need to hit every single nail with the JavaScript hammer after all?<\/p>\n\n\n\n

Stay Tuned<\/h2>\n\n\n\n

If only there was a way to figure this out! Like for example, some kind of recurring survey that would help us track these trends over time\u2026 But wait, there is! The 2024 edition of the State of HTML survey will take place later this year, and you can already sign up for our mailing list<\/a> to be notified when that happens. <\/p>\n\n\n\n

In the meantime, go check out the full 2023 results<\/a> and let us know if you find any insights of your own!<\/p>\n","protected":false},"excerpt":{"rendered":"

There were over 20,000 respondents in 2023. Key findings include the popularity of the datalist feature and discontent with form elements, especially styling issues. There’s mixed sentiment about web components, a desire for new HTML elements like datatables, and signs that the divide between HTML\/CSS and JavaScript may be narrowing.<\/p>\n","protected":false},"author":24,"featured_media":2406,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[31],"class_list":["post-2404","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-html"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/state_of_html_logo.png?fit=1584%2C986&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2404","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=2404"}],"version-history":[{"count":5,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2404\/revisions"}],"predecessor-version":[{"id":2423,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2404\/revisions\/2423"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/2406"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=2404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=2404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=2404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}