The Case for HTML First Web Development

TL;DR

It seems HTML-oriented web development can provide clear benefits to developers, especially when it is combined with comple- mentary approaches, such as embracing hypermedia and moving a large part of application logic to the server side.

Abstract

Since its introduction in the early 90s, the web has become the largest application platform available globally. HyperText Markup Language (HTML) has been an essential part of the web since the beginning, as it allows defining webpages in a tree-like manner, including semantics and content. Although the web was never meant to be an application platform, it evolved as such, especially since the early 2000s, as web application frameworks became available. While the emergence of frameworks made it easier than ever to develop complex applications, it also put HTML on the back burner. As web standards caught up, especially with milestones such as HTML5, the gap between the web platform and frameworks was reduced. HTML First development emphasizes this shift and puts focus on literally using HTML first when possible, while encouraging minimalism familiar from the early days of the web. It seems HTML-oriented web development can provide clear benefits to developers, especially when it is combined with comple- mentary approaches, such as embracing hypermedia and moving a large part of application logic to the server side. In the context of the htmx project, it was observed that moving towards HTML can reduce the size of a codebase greatly while leading to maintenance and development benefits due to the increased conceptual simplicity. Holotype-based comparisons for content-oriented websites show performance benefits, and the same observation was confirmed by a small case study where the Yle website was converted to follow HTML First principles. In short, the HTML First approach seems to have clear advantages for web developers, while there are open questions related to the magnitude of the benefits and the alignment with the recent trend of AI-driven web development.

Figures (5)

• Figure 1: Example of HTML markup with HTML elements, nesting, and attributes within an img element.
• Figure 2: details and summary elements work in tandem to enable foldable containers using pure HTML.
• Figure 3: The example adapted from petros2023 shows how to implement reusable directives to extend HTML semantics.
• Figure 4: Note how x-data, x-show, and @click are used in tandem to manage state. The example has been adapted from alpinejs.
• Figure 5: When the button is clicked, htmx sends a POST /clicked request to the server and replaces itself with the result. The example has been adapted from htmx.