Adjust the definition of the main element and various examples

This changes examples involving the main element as they do not lead to a good experience with assistive technology.

It also adjusts the definition of the main element a bit and suggests it's best to be used at most once.

See #100 for context.

Author: annevk

source

@@ -15648,10 +15648,10 @@ interface <dfn>HTMLBodyElement</dfn> : <span>HTMLElement</span> {};
    &lt;header>
     &lt;h1 itemprop="headline">My Day at the Beach&lt;/h1>
    &lt;/header>
-   &lt;main itemprop="articleBody">
+   &lt;div itemprop="articleBody">
     &lt;p>Today I went to the beach and had a lot of fun.&lt;/p>
     <em>...more content...</em>
-   &lt;/main>
+   &lt;/div>
    &lt;footer>
     &lt;p>Posted &lt;time itemprop="datePublished" datetime="2009-10-10">Thursday&lt;/time>.&lt;/p>
    &lt;/footer>
@@ -15669,10 +15669,6 @@ interface <dfn>HTMLBodyElement</dfn> : <span>HTMLElement</span> {};
  &lt;/footer>
 &lt;/body></pre>
 
-   <p>Notice the <code>main</code> elements being used to wrap all the contents of the page other
-   than the header and footer, and all the contents of the blog entry other than its header and
-   footer.</p>
-
    <p>You can also see microdata annotations in the above example that use the schema.org vocabulary
    to provide the publication date and other metadata about the blog post.</p>
 
@@ -17287,11 +17283,9 @@ Space is not the only void</pre>
   &lt;/nav>
   &lt;h1>We're adopting a child!&lt;/h1>
  &lt;/header>
- &lt;main>
-  &lt;p>As of today, Janine and I have signed the papers to become
-  the proud parents of baby Diane! We've been looking forward to
-  this day for weeks.&lt;/p>
- &lt;/main>
+ &lt;p>As of today, Janine and I have signed the papers to become
+ the proud parents of baby Diane! We've been looking forward to
+ this day for weeks.&lt;/p>
 &lt;/article>
 &lt;/html></pre>
 
@@ -17308,8 +17302,8 @@ Space is not the only void</pre>
      </ol>
    </ol>
 
-   <p>Also worthy of note in this example is that the <code>header</code> and <code>main</code>
-   elements have no effect whatsoever on the document outline.</p>
+   <p>Also worthy of note in this example is that the <code>header</code> element has no effect
+   whatsoever on the document outline.</p>
 
   </div>
 
@@ -19203,17 +19197,15 @@ included with Exhibit B.
    <dd>Uses <code>HTMLElement</code>.</dd>
   </dl>
 
-  <p>The <code>main</code> element can be used as a container for the dominant contents of another
-  element. It <span>represents</span> its children.</p>
+  <p>The <code>main</code> element can be used as a container for the dominant contents of the
+  document. It <span>represents</span> its children.</p>
 
   <p class="note">The <code>main</code> element is distinct from the <code>section</code> and
   <code>article</code> elements in that the <code>main</code> element does not contribute to the
   document <span>outline</span>.</p>
 
-  <p class="note">There is no restriction as to the number of <code>main</code> elements in a
-  document. Indeed, there are many cases where it would make sense to have multiple
-  <code>main</code> elements. For example, a page with multiple <code>article</code> elements might
-  need to indicate the dominant contents of each such element.</p>
+  <p class="note">While there is no restriction as to the number of <code>main</code> elements in a
+  document, web developers are encouraged to stick to a single element.</p>
 
   <div class="example">
 
@@ -29926,10 +29918,8 @@ interface <dfn>HTMLIFrameElement</dfn> : <span>HTMLElement</span> {
   &lt;p>&lt;img src="/usericons/1627591962735"> &lt;b>Fred Flintstone&lt;/b>&lt;/p>
   &lt;p>&lt;a href="/posts/3095182851" rel=bookmark>12:44&lt;/a> &mdash; &lt;a href="#acl-3095182851">Private Post&lt;/a>&lt;/p>
  &lt;/header>
- &lt;main>
-  &lt;p>Check out my new ride!&lt;/p>
-  <strong>&lt;iframe src="https://video.example.com/embed?id=92469812" allowfullscreen>&lt;/iframe></strong>
- &lt;/main>
+ &lt;p>Check out my new ride!&lt;/p>
+ <strong>&lt;iframe src="https://video.example.com/embed?id=92469812" allowfullscreen>&lt;/iframe></strong>
 &lt;/article></pre>
 
   </div>
@@ -57136,15 +57126,13 @@ interface <dfn>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
 
   <div class="example">
 
-   <p>This dialog box has some small print. The <code>main</code> element is used to draw the user's
-   attention to the more important parts.</p>
+   <p>This dialog box has some small print. The <code>strong</code> element is used to draw the
+   user's attention to the more important part.</p>
 
    <pre>&lt;dialog>
  &lt;h1>Add to Wallet&lt;/h1>
- &lt;main>
-  &lt;p>How many gold coins do you want to add to your wallet?&lt;/p>
-  &lt;p>&lt;input name=amt type=number min=0 step=0.01 value=100>&lt;/p>
- &lt;/main>
+ &lt;p>&lt;strong>&lt;label for=amt>How many gold coins do you want to add to your wallet?&lt;/label>&lt;/strong>&lt;/p>
+ &lt;p>&lt;input id=amt name=amt type=number min=0 step=0.01 value=100>&lt;/p>
  &lt;p>&lt;small>You add coins at your own risk.&lt;/small>&lt;/p>
  &lt;p>&lt;label>&lt;input name=round type=checkbox> Only add perfectly round coins &lt;/label>&lt;/p>
  &lt;p>&lt;input type=button onclick="submit()" value="Add Coins">&lt;/p>