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.
Here is a visual illustration of the markup:
Here is the same markup in code:
<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>
So what is going on here? Let’s break it down a little…
The body contains the #page DIV which acts as a container for the whole shebang.
Inside the #page the site is divided into three parts: .site-header, .site-content and .site-footer.
.site-content is basically everything that goes between the header and the footer. In other words; the content.
Inside the .site-content DIV we have #primary and #secondary, which are basically just a way of separating the widgets section from the main content.
Inside #primary we have another div called #main. I am not completely sure why we have this div yet, but it might function as a way to add padding, margin or max-width to a centered content.
Inside #main we get the single post/artigle/page, the post-navigation (previous/next post) and the comments area each in their respectiv divs.