Markup structure in underscores.me explained

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.

alt text
The div “.site” is divided in three parts and contains .site-content. .site-content is basically everything that goes between the header and the footer.

alt text
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.

alt text
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 centred content.