HTML5语义与样式问题

Question

我正在尝试建立一个Wordpress主题，使用响应式布局的媒体查询。在维护一些语义标记的同时获得正确的布局方面，我有一些问题。

基本上，对于页面宽度小于764像素的post date，我希望日期、项目符号和post类别以内联方式显示；如果页面大于这个大小，那么post date应该显示为一个列(entry- date )，与主post列( main - column )并排显示。

我想我已经做到了，但我只是想知道这个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 -->   

Answer 1

注释是完全关闭的，验证与语义无关，这是一个完全不同的主题。语义就是给你的代码赋予意义。

目前，您有以下内容

<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>