Phase 8: Logical markup structure

<div id="header">
  <strong id="logo"><img src="img/logo100.gif" width="346" height="100" alt="Blogger" /></strong>
  <form method="get" action="home_blogs.html">
    <h2>Already have an account? Sign in:</h2>
    <div>
      <label for="signin-u">Username:</label>
      <input type="text" id="signin-u" size="10" class="text" />
    </div>
    <div>
      <label for="signin-p">Password:</label>
      (<a href="help">?</a>)
      <input type="text" id="signin-p" size="10" class="text" />
    </div>
    <div>
      <input type="image" src="img/btn_signin.gif" id="signin-b" alt="Sign in" />
      <input type="checkbox" id="signin-r" />
      <label for="signin-r">Remember me</label>
      (<a href="help">?</a>)
    </div>
  </form>
</div>


<div id="primary">
  <h1>What’s a <strong>blog</strong>?</h1>
  <ul>
    <li id="w-pub"><a href="tour2.html"><strong>Publish</strong> your thoughts</a></li>
    <li id="w-shr"><a href="tour3.html"><strong>Share</strong> your photos</a></li>
    <li id="w-pst"><a href="tour4.html"><strong>Post</strong> anywhere</a></li>
    <li id="w-con"><a href="tour5.html"><strong>Connect</strong> with people</a></li>
  </ul>
  <p>Is the word <strong>blog</strong> new to you? Let us explain the blog concept and the many ways you can use Blogger to do all of the things above!</p>
  <p id="btn-tour"><a href="tour1.html"><img src="img/btn_quicktour.gif" width="145" height="28" alt="Take a quick tour" /></a></p>
</div>

32