Question

I have a div containing an event I want it to look like this

[-----]   TITLE
[-IMG-]   Author
[-----]   Date

The way I have it set up now is like this

<div class="book">
    <img class="thumb">
    <h2>TITLE</h3>
    <span>Author</span>
    <br />
    <span>Date</span>
</div>

I don’t think that I should be using <span> for the author and Description since I want them on multiple lines (also doing display:block makes it act weird with the floated element to the left) but I don’t know if a <p> tag is suitable since it’s only 1 line of text.

What tag should I be using for this?

Thanks!!

Answer 1

Author is a subheader, i would use <h3> as for date the ideal would be to use HTML 5 time tag but this brings some complications in older browsers and IE so i would recommend using <p> if you want the line break.

<div class="book">
    <img class="thumb" alt="">
    <h2>TITLE</h2>
    <h3>Author</h3>
    <p>Date</p>
</div>

This elements will give you the line brakes you want and are semantically correct.

P.D: As @Will Martin mentioned it is recommended that you use the alt attribute with the image tag.