fix: use header and main tags for more semantic HTML

- improves screen reader support
- footer tags were already properly used

Relates to #671.

Author: Splaktar

src/app/material-docs-app.html

@@ -1,3 +1,2 @@
 <app-navbar class="mat-elevation-z6"></app-navbar>
 <router-outlet></router-outlet>
-

src/app/pages/component-page-header/component-page-header.html

@@ -1,7 +1,7 @@
-<div class="docs-primary-header component-page-header">
+<header class="docs-primary-header component-page-header">
   <button mat-button class="sidenav-toggle" (click)="toggleSidenav.emit()">
     <mat-icon>menu</mat-icon>
   </button>
 
   <h1 focusOnNavigation>{{getTitle()}} </h1>
-</div>
+</header>

src/app/pages/component-sidenav/component-sidenav.html

@@ -11,14 +11,14 @@
   <div class="docs-component-sidenav-content">
     <component-page-header (toggleSidenav)="sidenav.toggle()"></component-page-header>
     <div class="docs-component-sidenav-inner-content">
-      <div class="docs-component-sidenav-body-content">
+      <main class="docs-component-sidenav-body-content">
         <!-- If on large screen, menu resides to left of content -->
         <app-component-nav
           *ngIf="(isScreenSmall | async) === false"
           [params]="params">
         </app-component-nav>
         <router-outlet></router-outlet>
-      </div>
+      </main>
       <app-footer></app-footer>
     </div>
   </div>

src/app/pages/guide-list/guide-list.html

@@ -1,13 +1,15 @@
-<div class="docs-primary-header">
+<header class="docs-primary-header">
   <h1>Guides</h1>
-</div>
+</header>
 
-<mat-nav-list class="docs-guide-list">
-  <a mat-list-item *ngFor="let guide of guideItems.getAllItems()"
-      class="docs-guide-item"
-      [routerLink]="['/guide/', guide.id]">
-    {{guide.name}}
-  </a>
-</mat-nav-list>
+<main>
+  <mat-nav-list class="docs-guide-list">
+    <a mat-list-item *ngFor="let guide of guideItems.getAllItems()"
+        class="docs-guide-item"
+        [routerLink]="['/guide/', guide.id]">
+      {{guide.name}}
+    </a>
+  </mat-nav-list>
+</main>
 
 <app-footer></app-footer>

src/app/pages/homepage/homepage.html

@@ -11,7 +11,7 @@ <h2> Material Design components for Angular</h2>
   </div>
 </header>
 
-<div class="docs-homepage-promo">
+<main class="docs-homepage-promo">
   <div class="docs-homepage-row">
     <div class="docs-homepage-promo-img">
       <docs-svg-viewer src="../assets/img/homepage/sprintzerotoapp.svg"
@@ -60,6 +60,6 @@ <h2>Optimized for Angular</h2>
       Get started
     </a>
   </div>
-</div>
+</main>
 
 <app-footer></app-footer>