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">
开发者_Python百科 <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!!
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.
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
h2has to be the first element, otherwise theimgwould 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
divinstead of ah3(no, notp, because it is not a paragraph) - "Date" is not a paragraph, so use a
divinstead ofp
HTML5:
<article class="book">
<img class="thumb" alt="">
<h1>TITLE</h1>
<div>Author</div>
<div><time>Date</time></div>
</article>
- using
articleinstead ofdiv - now the "TITLE" heading can be placed anywhere in this article; also it can become a
h1 - using
timefor "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
imgcould be placed in add, for example with adt"Photo" or something like that (depends on the context). I'd only do that if the image is really relevant to the book/event.
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.
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.
加载中,请稍侯......
精彩评论