在HTML中标记推荐书的"正确"方式

Kev*_*son 19 html

我认为在网上找到这个很容易,但似乎没有.我正在试图找出在页面上标记推荐列表 - 作者引用 - 的正确方法.

例如

"这就是我的想法"
- 我的名字,我的公司

我想这句话应该在一个块引用中.我也看到一些使用引用来显示引用来自哪里,但HTML引用似乎表明这应该用于给出引用来自的网页的URL,而不是人的名字.

有没有人对如何标记这个有任何建议?

ste*_*esu 23

"老"的方式:

我可能中报时非常晚了,但我认为下面是标记一个证明正确的方法:

<figure>
    <blockquote>
        "This is what I think"
    </blockquote>
    <footer>
        — <cite class="author">My Name</cite>, <cite class="company">My Company</cite>
    </footer>
</figure>
Run Code Online (Sandbox Code Playgroud)

根据W3C规范:

...引文包含在一个数字元素的页脚内,这个引用将关于引用的信息与引用相关联并...

.

.

.

figure元素表示一些流内容,可选地带有标题,是自包含的(如完整的句子)...

更新:

正如@ MCTaylor17指出的那样,最佳做法在引用引用方面已经发生了变化.这是新规范(截至2017年12月):https://www.w3.org/TR/html52/textlevel-semantics.html#the-cite-element

现在,该<cite>元素可以在任何您期望Phrasing Content的地方使用.这意味着,它应该在一去<p>,<blockquote>等等.

规范中的示例17演示了使用<cite>a <blockquote>:

  <blockquote>"Money is the real cause of poverty,"
  <footer>
  <cite id="baseref">The Ragged-Trousered Philanthropists, page 89.</cite>
  </footer>
  </blockquote>
Run Code Online (Sandbox Code Playgroud)

要将此应用于您自己的报价:

<blockquote>
    "This is what I think"
    <footer>
        — <cite class="author">My Name</cite>, <cite class="company">My Company</cite>
    </footer>
</blockquote>
Run Code Online (Sandbox Code Playgroud)

  • 我不认为这是最好的做法.从我收集的内容来看,最好将`<footer>`放在`<blockquote>`中,而不需要`<figure>`. (2认同)

Dar*_*o Z 12

你假设引用应该进入一个blockquote元素并且该cite属性应该用于URI是正确的.就个人而言,我单独divp在报价的底部处理报价的作者,如下所示:

<blockquote cite="http://a.uri.com/">
    <p>This is a really insightful sentence.</p>
    <p class="quoteCite">Darko Z</p>
</blockquote>
Run Code Online (Sandbox Code Playgroud)

然后我只使用CSS使它看起来不错.很基本的.您可能还想查看Microformats.org并搜索想法.

希望这可以帮助

编辑:它已经很晚了,但我也可以使用这个cite元素

<blockquote cite="http://a.uri.com/">
    <p>This is a really insightful sentence.</p>
    <cite>Darko Z</cite>
</blockquote>
Run Code Online (Sandbox Code Playgroud)

但老实说,我不是100%肯定它的支持程度

编辑2:根据HTML 5草案,引用不应该是作者的名字,所以为了将来的证明你可能不应该使用引用为此目的.


Tom*_*duy 10

事情变了.我认为本世纪的一个适当的结构应该是这样的:

<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <footer>
       <cite title="Source Title">
          <a href="http://www.thelorem.com">Bill Gates</a>
       </cite>
    </footer>
</blockquote>
Run Code Online (Sandbox Code Playgroud)


Mic*_*ngh 6

您可能有兴趣使用hReview格式 - 据传谷歌支持它,它几乎适用于您的情况,这取决于您是否只对外观感兴趣,或者您是否也想要提高机器的可读性.