CODEWITHSUNDEEP
htmlsemanticsmarkup
mazlix
mazlix

Reputation: 6293

Semantic HTML for 1 line of text

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

Upvotes: 3

Views: 1312

Answers (4)

unor
unor

Reputation: 96607

Starting with amosriveras answer from 2011, I'd do things different:

HTML 4.01:

<div class="book">
    <h2>TITLE</h2>
    <img class="thumb" alt="">
    <div>Author</div>
    <div>Date</div>
</div>
  • the h2 has to be the first element, otherwise the img would not be part of this heading scope
  • "Author" is no heading content; also this would mean that the "Date" belongs to the Author heading scope (it should belong to the "TITLE" instead). So use a div instead of a h3 (no, not p, because it is not a paragraph)
  • "Date" is not a paragraph, so use a div instead of p

HTML5:

<article class="book">
    <img class="thumb" alt="">
    <h1>TITLE</h1>
    <div>Author</div>
    <div><time>Date</time></div>
</article>
  • using article instead of div
  • now the "TITLE" heading can be placed anywhere in this article; also it can become a h1
  • using time for "Date"

Using a dl would be possible, too:

<article class="book">
    <img class="thumb" alt="">
    <h1>TITLE</h1>
    <dl>
     <dt>Author</dt>
     <dd>AUTHOR NAME</dd>
     <dt>Date</dt>
     <dd><time>DATE</time></dd>
    </dl>
</article>
  • the img could be placed in a dd, for example with a dt "Photo" or something like that (depends on the context). I'd only do that if the image is really relevant to the book/event.

Upvotes: 1

amosrivera
amosrivera

Reputation: 26514

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.

Upvotes: 3

Will Martin
Will Martin

Reputation: 4180

After reading @Mazlix's comment on @Amosrivera's answer, I'd like to suggest a definition list.

<dl>
    <dt><img class="thumb" alt="book cover" /> TITLE</dt>
    <dd class="author">AUTHOR</dd>
    <dd class="date>DATE</dd>
</dl>

The styling might get tetchy if you try to a single DL with multiple DT/DD pairs within it, but you could just as easily use a whole bunch of definition lists.

EDIT:

@David Thomas beat me to the punch there. Ah well, c'est la vie.

Upvotes: 0

Brad
Brad

Reputation: 163262

While not strictly paragraphs, I think that the <p> tag is most appropriate here.

You are separating out different, but related, types of information. Just because it isn't in sentence form, doesn't mean it doesn't make some sense to use <p>, with classes for the type of information in them.

Whichever you end up deciding, remember that the design is separate from the elements. That is, the fact that they are on different lines shouldn't be your primary decision point.

Upvotes: 1

Related Questions