Hi Melanie,
My name is Reece. I checked out your site to answer your first question. The area between the header and footer is identified as id=”main” and in your HTML looks like this:
<div id="main" class="wrapper">
<div id="primary" class="site-content">
<div id="content" class="site-content">
<div id="content" role="main"></div>
</div>
<div id="sidebar" class="widget"></div>
</div>
To answer your second question the primary id is a designation used by WP for your posts. The role attribute is from ARIA 1.0 and many of the roles were later incorporated into HTML5 as elements. e.g. <main>…</main>. Adding the role=”main” is technically redundant but it helps support browsers that currently support Aria1.0 but not yet HTML5.
For more information on the role attribute this site gives a very good explanation.
https://stackoverflow.com/questions/10403138/what-is-the-purpose-of-the-role-attribute-in-html