0

I'm trying to build a Wordpress theme, using media queries for responsive layout. I have some issues around getting the correct layout whilst maintaining some semantic mark up.

Basically, for the post date in pages less than, say, 764 pixels wide, I want to have the date, bullet, and post category displaying inline; if the page is above this size, then the post date should display as a column (entry-date), alongside the main post column (main-column).

I think I've managed to get there, but just wondered if this html code was valid, as I've tried to keep header and footer sections within the post to make it make sense semantically.

Does anyone have any feedback?

Thanks, John

<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 -->
user1430237
  • 21
  • 3
    the w3 validator is a good place to start if you're validating HTML: http://validator.w3.org/check – msturdy Jun 12 '13 at 10:15
  • Thanks. It validates, but I'm just not sure if having the entry date outside the header, or a span (bullet) just before it, is wrong? Maybe I'm being too pedantic. – user1430237 Jun 12 '13 at 10:25
  • Are you sure it validates? When I tried it, it doesn't validate using html 4 transistional etc. Which doctype do you have? – Karl Adler Jun 12 '13 at 10:58
  • It validated fube for me, but I inputted the whole document. It's HTML5. – user1430237 Jun 12 '13 at 11:56

1 Answers1

1

The comment's are completely off, validation has nothing to do with semantics, that's a totaly different subject. Semantic is about giving meaning to your code.

Currently you have this

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

This would be more semantic, avoid using unnecessary tags(don't add tags only for styling, look for css solutions). 

<div class="entry-date">
    30<sup>th</sup>Sep 2013
</div>
koningdavid
  • 7,141
  • 4
  • 31
  • 46
  • It's `sup`, not `sub`, that the OP uses. `sup` is for superscript, which is just fine for ordinal numbers. – Carsten Jun 12 '13 at 10:51
  • 2
    It's not the same, but the validation is the first step to semantic code. Invalid code is useless for semantics... – Karl Adler Jun 12 '13 at 11:01
  • Thanks! It was more the trade-off between getting the layout I want whilst maintaining semantics. – user1430237 Jun 12 '13 at 13:39