The problem with analogy

The analogy between a class with a screen that uses HTML structure can not be made from 1 to 1.

When dividing responsibilities between classes and methods you have an overhead of processing and memory, but it is much smaller compared to having two pages in different files.

In addition, the idea of dividing responsibilities involves logical issues, coupling, maintenance, and reuse.

In case of an HTML structure as proposed by jQuery Mobile, although it is bad to work on a large file, there is effectively a mix between the various sections.

JavaScript might, yes, end up mixing things up, but at this point it's worth the developer's ability to know how to create specific snippets for each screen.

Note that even with splitting HTMLs into multiple files, it would still be possible to add the same script on all screens and there would be confusion. In fact, this is a very common practice.

Depends on context

The complexity of an application and its optimization means that there is no absolutely "better" way of joining or dividing responsibilities.

To avoid complex development and maintenance the best would be to split into multiple HTMLs. This would avoid unnecessary conflicts during merges and simplify the developer's life in a number of ways. It also takes up less memory on the device. It seems to be best for applications that have plenty of content.

Having HTML can improve the user experience because navigation between pages will be instantaneous. Of course this can have a negative effect if the user wants to see only one page. This seems to be the best solution for relatively small applications, where overall simplicity speaks louder.

Considerations

jQuery Mobile allows for different and mixed approaches.

In the pages documentation, there is information on how to do < in