Underscores is a great framework for building WordPress themes. Since the HTML markup can be a little confusing at start I have made a simple go-to explanation for future projects. The markup might change in the future, but the basic markup has stayed the same for the last years. This markup is from April 2018.
<html> <head></head> <body> <div id=”page” class=”site”> <header id=”masthead” class=”site-header”></header> <div id=”content” class=”site-content”> <! — Includes the whole article including comments and widgets. Basically everything from the header down to, but not including the footer. --> <div id=”primary” class=”content-area”> <! — Includes the article, article header/footer and meta, but excludes the widgets area. --> <main id=”main” class=”site-main”> <! — Basically includes all the same as the above div. --> <article> <! — Includes the article and the article meta header/footer. Excludes the article from post navigation. --> </article> </main> </div> <aside id=”secondary” class=”widget-area”> <! — Includes the widgets and separates the widget area from the article and the articles meta header and footer. --> </aside> </div> <footer id=”colophon” class=”site-footer”></footer> </div> </body> </html>
It might be easier to understand the code visually. I have made three illustrations, which are actually the same page, but divided so that it is easier to see the content of each div.