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
h2
has to be the first element, otherwise theimg
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 ah3
(no, notp
, because it is not a paragraph) - "Date" is not a paragraph, so use a
div
instead ofp
HTML5:
<article class="book">
<img class="thumb" alt="">
<h1>TITLE</h1>
<div>Author</div>
<div><time>Date</time></div>
</article>
- using
article
instead ofdiv
- 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 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.
精彩评论