HTML5 semantic vs styling issue

Question

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

the w3 validator is a good place to start if you're validating HTML: validator.w3.org/check — msturdy
– msturdy, Commented Jun 12, 2013 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
– user1430237, Commented Jun 12, 2013 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
– Karl Adler, Commented Jun 12, 2013 at 10:58
It validated fube for me, but I inputted the whole document. It's HTML5. — user1430237
– user1430237, Commented Jun 12, 2013 at 11:56

koningdavid · Accepted Answer · 2013-06-12 10:48:26Z

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>

edited Jun 12, 2013 at 10:48

answered Jun 12, 2013 at 10:40

koningdavid

8,1537 gold badges38 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Carsten Over a year ago

It's sup, not sub, that the OP uses. sup is for superscript, which is just fine for ordinal numbers.

Karl Adler Over a year ago

It's not the same, but the validation is the first step to semantic code. Invalid code is useless for semantics...

user1430237 Over a year ago

Thanks! It was more the trade-off between getting the layout I want whilst maintaining semantics.

Collectives™ on Stack Overflow

HTML5 semantic vs styling issue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related