Why .widget-area is outside of .site-content in Underscores starter theme?

Question

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?

Answer 1

The .widget-area actually IS inside .site-content.

For anyone wondering why .content-area has a <main> child-element, rather than being the <main> element itself, here is the explanation:

It allows for CSS styling while preserving HTML5 semantics. Namely it allows for easier negative margin management as well as background and other styling (full explanation here).