The Underscores starter theme offers a specific HTML structure. Most parts of it are understandable. But there is one part that seems either unclear or superfluous.

Here is the outline:

div.site
    header#masthead.site-header
        
    div#content.site-content
        div#primary.content-area
            main#main.site-main
                /* Here goes either article or archive content */

    aside#secondary.widget-area
        section.widget /* Multiple widgets */

    footer#colophon.site-footer

So, all of the tags, IDs and classes more or less are understandable, except for this part:

    div#content.site-content
        div#primary.content-area
            main#main.site-main

This same structure is used on both singular type pages and archives. Why on earth did they use three DIVs to wrap content?

Also aside#secondary.widget-area seems to be out of place. Looks like it should be inside div#content.site-content. Is there a specific reason why they've done it?

My hypothesis is that it's just a kind of semi-phylosophical intention: it is a starter theme, and a developer has to move the aside#secondary.widget-area inside div#content.site-content, just for the sake of making a change.

Can anyone give a more pragmatic explanation of why they've structured their theme's HTML this particular way?

The Underscores starter theme offers a specific HTML structure:

div.site
    header#masthead.site-header
        
    div#content.site-content
        div#primary.content-area
            main#main.site-main
                /* Here goes either article or archive content */

    aside#secondary.widget-area
        section.widget /* Multiple widgets */

    footer#colophon.site-footer

The aside#secondary.widget-area seems to be out of place. Looks like it should be inside of div#content.site-content, as a sibling of div#primary.content-area.

Is there a specific reason why Underscores theme HTML is structured this particular way?