1 行文本的语义 HTML

发布于 2024-11-23 15:33:55 字数 556 浏览 1 评论 0原文

我有一个包含事件的 div 我希望它看起来像这样

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

我现在设置它的方式是这样的

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

我认为我不应该为作者使用描述，因为我希望它们位于多行上（同时执行 display:block 会使左侧的浮动元素表现得很奇怪），但我不知道

是否有效code> 标签很合适，因为它只有 1文本行。

我应该为此使用什么标签？

谢谢！！

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

酸甜透明夹心 2024-11-30 15:33:55

作者是一个副标题，我会使用

作为日期，理想的情况是使用 HTML 5 时间标记，但这会给旧版浏览器和 IE 带来一些复杂性，因此如果您想要换行符，我建议使用
。

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

这些元素将为您提供所需的线制动，并且在语义上是正确的。

PD：正如 @Will Martin 提到的，建议您将 alt 属性与图像标签一起使用。

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.

回复收藏 0 原文

此刻的回忆 2024-11-30 15:33:55

虽然不是严格意义上的段落，但我认为

标签在这里最合适。

您正在分离不同但相关的信息类型。仅仅因为它不是句子形式，并不意味着使用

以及其中信息类型的类没有任何意义。

无论您最终决定哪种，请记住设计与元素是分开的。也就是说，它们处于不同的路线这一事实不应成为您的主要决策点。

回复收藏 0 原文

鲜血染红嫁衣 2024-11-30 15:33:55

从amosriveras 2011年的答案开始，我会做不同的事情：

HTML 4.01：

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

h2必须是第一个元素，否则 img 不会成为此标题范围的一部分
“作者”没有标题内容；这也意味着“日期”属于作者标题范围（它应该属于“标题”）。因此，请使用 div 而不是 h3 （不，不是 p，因为它不是段落）
“日期”不是段落，所以使用 div 而不是 p

HTML5：

<article class="book">
    <img class="thumb" alt="">
    <h1>TITLE</h1>
    <div>Author</div>
    <div><time>Date</time></div>
</article>

使用 article 而不是 div
现在“TITLE”标题可以是放置在本文的任何位置；它也可以
使用 time for “Date”

使用 dl 也是可能的：

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

img 可以< /em> 被放置在dd，例如使用 dt“照片”或类似的内容（取决于上下文）。只有当图像与书籍/活动确实相关时我才会这样做。

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.

回复收藏 0 原文

娇纵 2024-11-30 15:33:55

在阅读了 @Mazlix 对 @Amosrivera 的回答的评论后，我想建议一个定义列表。

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

如果您尝试使用其中包含多个 DT/DD 对的单个 DL，样式可能会变得暴躁，但您可以轻松地使用一大堆定义列表。

编辑：

@David Thomas 比我先一步。啊，好吧，这就是生活。

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.

回复收藏 0 原文

~没有更多了~