It is not only an aesthetic question of cleanliness and order of the code, but it has relevance in the loading time of the page and in the experience of the user while carrying out said loading. Many studies determine that the average load time of a website is around 7 seconds, and everything that exceeds it causes visitors to leave the page before it loads.
To understand why it is preferable to place one or another element in a specific position, the first thing to understand is how the HTML code is processed.
The HTML parser reads the different labels of the document and as they are found, it adds them to the DOM tree (Document Object Model), a data structure that allows the model to be manipulated more easily. Also, as the DOM tree is created, the nodes that have already been processed will be rendered, so that the user will see the page load as gradual and not sudden at the end.
Therefore, we have the first determining factor in the loading time of a page: the size of its DOM tree. Obviously, the larger it is, the longer it will take the page to load. And another aspect that also falls by its own weight: the elements that are before in the document, will be drawn before.
Therefore, it is convenient to ensure that the main elements of the content are displayed beforehand, so that the user has access to them even if the page continues half-loaded. For example, if we have a page with a title, a simple news item and a very complex menu, it is best to place the elements of the title and news first in the HTML, and then the CSS will organize them visually. This way, visitors can start reading the content they are interested in instead of waiting for dozens of links and buttons to load, which they may not be able to use.
Reference and more info on the subject: link