<div is="wps-main-template">
  <div class="page-wrapper" role="document">
    <div class="main-header">
      {{ area('mainHeader') }}
    </div>
    <main class="main-content" role="main">
      {{ area('pageHeader') }}
      {{ area('pageComponents') }}
    </main>
    <div class="main-footer">
      {{ area('mainFooter') }}
    </div>
  </div>
</div>

<div is="wps-main-template">
  <section class="page-wrapper" role="document">
    <header class="main-header">
      {{ area('mainHeader') }}
    </header>
    <main class="main-content" role="main">
      {{ area('pageHeader') }}
      {{ area('pageComponents') }}
    </main>
    <footer class="main-footer">
      {{ area('mainFooter') }}
    </footer>
  </section>
</div>

Use HTML5 Markup but keep role attributes
refactor(MainTemplate): Use HTML5 Markup but keep role attributes
