HTML5 语义标记帮助

Question

我刚刚开始一个新的应用程序。下面是我的任务的基本模型。 我是使用 HTML5 进行语义标记的新手，所以我想要一些反馈/帮助。

我想了解如何/在何处使用 <nav> 和 <section> 等内容

<div id="container">
    <header>

    <div id="appInformation">
      <a href="#" alt="Home">
        <img src="">
      </a>

      <span>Selected AppName</span>
    </div>

    <div>
        <span id="time">TIME GOES HERE</span>
    </div>

    <div>
      <a href="#" alt="Additional Information">
        <img src=""><!-- This is will be the location of the the 'i'-->
      </a>
    </div>

    <div class="">
      <label>UserName</label>
    </div>  

    </header>
    <div id="main">
        <!-- main content for the selected app here -->
    </div>

    <footer>

        <div id="appVersion">
            VERSION # HERE
        </div>

        <nav>
            <ul>
                <li>
                    <a href="#">FAQ</a>
                </li>
            </ul>
        </nav>

        <div id="">
            <!-- Team logo here-->
        </div>

    </footer>

Answer 1

• 避免不必要的分区。
• 使用时间标签代替 Div 作为时间元素。

• 如果您也没有任何可参考的内容（例如输入），请避免使用 Label。

  选定的应用程序名称

      <time datetime="YYYY-MM-DD">TIME GOES HERE</time><!--  Don't need an id Time since you can target the Time tag -->
  
      <a href="#" alt="Additional Information">
          <img src=""><!-- This is will be the location of the the 'i'-->
      </a>
  
      <em>UserName</em> <!-- Don't use a label if you got nothing to refer too, like an input for example. -->
  </header>
  <div id="main">
      <!-- main content for the selected app here -->
  </div>
  <footer>
      <div id="appVersion">
          VERSION # HERE
      </div>
      <nav>
          <ul>
              <li>
                  <a href="#">FAQ</a>
              </li>
          </ul>
      </nav>
  
      <a href="yourTeamUrl" id="">
          <!-- Team logo here-->
      </a>
  </footer>
  

Answer 2

除了@Simon Arnold 的好答案，我可能还建议<nav> 的用法不正确。页脚中的单个链接很难解释为“主要导航块”。请参阅http://dev.w3.org/html5/spec/sections.html#the-nav-element的绿色文本中的第一个注释