HTML5語義與造型問題

我試圖建立一個Wordpress主題，使用媒體查詢響應佈局。我有一些問題需要得到正確的佈局，同時保持一些語義標記。HTML5語義與造型問題

基本上，對於小於764像素寬度的頁面中的發佈日期，我希望內聯顯示日期，項目符號和帖子類別;如果頁面大於此大小，則發佈日期應顯示爲列（入口日期），旁邊是主要帖子列（主列）。

我想我已經設法達到那裏，但只是想知道這個HTML代碼是否有效，因爲我試圖保持頁眉和頁腳部分內的帖子，使其語義有意義。

有沒有人有任何反饋？

感謝，約翰

<article class="post"> 
    <div class="entry-date"> 
     <span><span>30<sup>th</sup></span> Sep 2013</span> 
    </div>    
    <div class="main-column"> 
     <span class="bullet">&#x25CF;</span> 
     <header class="entry-header"> 
      <span class="entry-category"><a href="#">Cars</span>      
      <h1 class="entry-title"><a href="#" title="" rel="bookmark">A new car from Ferrari</a></h1> 
      <span class="entry-authors vcard">by <a href="#" title="" rel="me">John Smith</a> </span> 
      <div class="featured-img"><img src="img/ferrari.jpg" class="" alt=""></div> 
     </header><!-- .entry-header --> 
     <div class="entry-content"> 
      <p>Ferrari have released a great new car, which is very fast.</p> 
      <span class="continue-reading"><a href="#">Continue reading</a></span> 
     </div><!-- .entry-content --> 
     <footer class="entry-meta"> 
      <span class="entry-tags"><a href='#'>Sports cars</a></span> 
     </footer><!-- .entry-meta --> 
    </div> 
</article><!-- #post-1234 -->

來源

2013-06-12 user1430237

如果您驗證HTML，w3驗證程序是一個很好的開始：http://validator.w3.org/check – msturdy

謝謝。它證實了，但我只是不確定是否在標題外有入口日期，或者在它之前有一個跨度（子彈），是錯誤的？也許我太迂腐了。 – user1430237

你確定它是確認嗎？當我嘗試它，它不驗證使用HTML 4 transistional等。你有哪些doctype？ – abimelex

註釋的完全關閉，確認沒有任何與語義，這是一個完全以不同的主題。語義就是給你的代碼賦予意義。

目前你有這樣的

<div class="entry-date"> 
    <span><span>30<sup>th</sup></span> Sep 2013</span> 
</div>

這將是更多的語義，避免不必要的使用標籤（不要只爲造型添加標籤，尋找解決方案的CSS）。

<div class="entry-date"> 
    30<sup>th</sup>Sep 2013 
</div>

來源

2013-06-12 10:40:43 koningdavid

這是OP使用的'sup'，而不是'sub'。「sup」代表上標，對於序號來說是很好的。 – Carsten

這不一樣，但驗證是語義代碼的第一步。無效的代碼是無用的語義... – abimelex

謝謝！在保持語義的同時獲得我想要的佈局是更多的選擇。 – user1430237

HTML5語義與造型問題

回答

相關問題