HTML5文檔大綱和語義

我一直在使用HTML5的一些元素，但從來沒有得到真正讓自己進入它，所以我會優先考慮讓我的屁股齒輪。HTML5文檔大綱和語義

我已經閱讀了有關我能找到的每個方面，併爲自己構建了一個小測試器。我已經通過一個大綱工具來運行它，一切都似乎出來勝利。只是想知道是否有人願意看看我的完整測試文檔，看看我是否忽視了某些東西/做了任何大幅度錯誤的事情。

<body> 
    <!-- Header --> 
    <header> 
     <img src="logo.jpg" alt="Logo" /> 
     <h1>Slogan</h1> 
     <nav> 
      <header><h2 class="hide-element">Navigation</h2></header> 
      <ul> 
       <li>Nav Item</li> 
       <li>Nav Item</li> 
       <li>Nav Item</li> 
      </ul> 
     </nav> 
    </header>  
    <!-- Main Content -->  
    <section id="wrapper"> 
     <header> 
      <h2>Page Heading</h2> 
     </header>    
     <section>    
      <h2 class="hide-element">Section Heading</h2> 
      <article> 
       <header> 
        <h3>Sub Heading</h3> 
        <time datetime="2013-02-08">February 8th 2013</time> 
       </header> 
       <p>Section Text</p> 
       <footer> 
        Like Button 
       </footer> 
      </article> 

      <article> 
       <header> 
        <h3>Sub Heading</h3> 
       </header> 
       <p>Section Text</p> 
       <figure> 
        <img src="" alt="" /> 
        <figcaption>Caption</figcaption> 
       </figure> 
       <footer> 
        Like Button 
       </footer> 
      </article>    
     </section> 

     <aside> 
      <h2 class="hide-element">Sidebar</h2> 
      <nav> 
       <header> 
        <h3>Categories</h3> 
       </header> 
       <ul> 
        <li>Sidebar Nav Item</li> 
        <li>Sidebar Nav Item</li> 
        <li>Sidebar Nav Item</li> 
       </ul> 
      </nav> 
     </aside>    
    </section> 

    <!-- Footer -->  
    <footer> 
     <nav> 
      <h3>Links</h3> 
      <ul> 
       <li>Link</li> 
       <li>Link</li> 
       <li>Link</li> 
      </ul> 
     </nav> 
     <section> 
      <h3>Social</h3> 
      <a href="">Link to Twitter</a> 
      <a href="">Link to Facebook</a> 
     </section> 
     <p class="copyright">&#169; Copyright 2013</p> 
     <p class="credit"><a href="" target="_blank">Credit</a></p> 
    </footer> 
</body>

更新

周圍添加標記內H2。沒意識到你可以在裏面。謝謝

更改div＃包裝到部分。

來源

2013-02-08 ccdavies

您應該在頂部添加'<！DOCTYPE html>'和''，最後添加''。 – paul 2013-02-08 12:53:36

這可能更適合代碼審查堆棧交換http://codereview.stackexchange.com/ – 2013-02-08 12:53:36

在html5中，h1-h6標記的工作方式與它們在html4中的工作方式不同，您可以將整個堆棧h1-h6每部分元素（section/nav/etc ..）幾乎所有的h2/h3都應該是h1。除此之外，建議使用標籤作爲版權。 – 2013-02-08 13:11:27

HTML5文檔大綱和語義

回答

相關問題