RickEyre/main-example.html

## main-example.html
<!DOCTYPE html>
<html>
  <head>
    <title>Blah</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li>My</li> <!-- A screenreader would land here first !-->
          <li>Navigation</li>
          <li>Items</li>
        </ul>
      </nav>
    </header>
    <main> <!-- This is where your main content of the page should be, so they can skip through content -->
      <article>
        <section>
          <h1>You woudln't believe what Trump did yesterday...</h1>
          <p>Lorem ipsum dollar...</p>
          <form>
            <h2>Sign up for more news stories</h2>
            <label for="firstName"> <!-- Explicit association -->
              <span>First name</span>
            </label>
            <input id="firstName" type="text" name="firstName" />
            <label> <!-- Implicit association -->
              <span>Last name</span>
              <input type="text" name="lastName" />
            </label>
            <label for="email" class="label"> <!-- Implicit and explicit association (best) -->
              <i class="icon icon--add" />
              <span class="label__text">Email</span>
              <input class="input input--text" id="email" type="email" name="email" />
              <span class="error">You must enter an email</span>
            </label>
            <span id="phoneNumberLabel">Phone Number</span> <!-- aria attributes (bad, don't use this) -->
            <input type="text" name="phoneNumber" aria-labelledby="phoneNumberLabel" />
        </section>
      </article>
    </main>
    <footer>
       <nav>
        <ul>
          <li>My</li>
          <li>Footer</li>
          <li>Navigation</li>
          <li>Items</li>
        </ul>
      </nav>
    </footer>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Blah</title>
	</head>
	<body>
	<header>
	<nav>
	<ul>
	<li>My</li> <!-- A screenreader would land here first !-->
	<li>Navigation</li>
	<li>Items</li>
	</ul>
	</nav>
	</header>
	<main> <!-- This is where your main content of the page should be, so they can skip through content -->
	<article>
	<section>
	<h1>You woudln't believe what Trump did yesterday...</h1>
	<p>Lorem ipsum dollar...</p>
	<form>
	<h2>Sign up for more news stories</h2>
	<label for="firstName"> <!-- Explicit association -->
	<span>First name</span>
	</label>
	<input id="firstName" type="text" name="firstName" />
	<label> <!-- Implicit association -->
	<span>Last name</span>
	<input type="text" name="lastName" />
	</label>
	<label for="email" class="label"> <!-- Implicit and explicit association (best) -->
	<i class="icon icon--add" />
	<span class="label__text">Email</span>
	<input class="input input--text" id="email" type="email" name="email" />
	<span class="error">You must enter an email</span>
	</label>
	<span id="phoneNumberLabel">Phone Number</span> <!-- aria attributes (bad, don't use this) -->
	<input type="text" name="phoneNumber" aria-labelledby="phoneNumberLabel" />
	</section>
	</article>
	</main>
	<footer>
	<nav>
	<ul>
	<li>My</li>
	<li>Footer</li>
	<li>Navigation</li>
	<li>Items</li>
	</ul>
	</nav>
	</footer>
	</body>
	</html>