【问题标题】:"Correct" way to mark up testimonials in HTML在 HTML 中标记推荐的“正确”方式
【发布时间】:2009-07-15 10:20:26
【问题描述】:

我认为这很容易在网上找到,但似乎并非如此。我正在尝试找出在页面上标记推荐列表(作者引用)的正确方法。

例如

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

我想这句话应该放在一个大引号中。我还看到了一些使用 cite 来显示引用的来源,但 HTML 参考似乎表明这应该用于给出引用来自的网页的 URL,而不是人名。

有人对如何标记有任何建议吗?

【问题讨论】:

  • 当你提到“引用”时,你指的是:
    的属性还是元素?
  • 我指的是元素 - 实际上并没有意识到有同名的属性。

标签: html


【解决方案1】:

“旧”方式:

我可能非常晚了,但我认为以下是标记推荐的正确方法:

<figure>
    <blockquote>
        "This is what I think"
    </blockquote>
    <footer>
        — <cite class="author">My Name</cite>, <cite class="company">My Company</cite>
    </footer>
</figure>

根据 W3C 规范:

...引用包含在图形元素的页脚中,这会将有关引用的信息与引用...进行分组和关联...

.

.

.

图形元素表示一些流内容,可选带标题,是自包含的(就像一个完整的句子)...

更新:

正如@MCTaylor17 所指出的,引用引用的最佳实践已经改变。这是新规范(截至 2017 年 12 月):https://www.w3.org/TR/html52/textlevel-semantics.html#the-cite-element

现在&lt;cite&gt; 元素可以在您期望Phrasing Content 的任何地方出现。这意味着它应该在&lt;p&gt;&lt;blockquote&gt; 等范围内。

规范中的示例 17 演示了在 &lt;blockquote&gt; 中使用 &lt;cite&gt;

  <blockquote>"Money is the real cause of poverty,"
  <footer>
  <cite id="baseref">The Ragged-Trousered Philanthropists, page 89.</cite>
  </footer>
  </blockquote>

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

<blockquote>
    "This is what I think"
    <footer>
        — <cite class="author">My Name</cite>, <cite class="company">My Company</cite>
    </footer>
</blockquote>

【讨论】:

  • 我认为这不再是最佳实践。据我所知,最好将&lt;footer&gt; 放在&lt;blockquote&gt; 中,这样就不需要&lt;figure&gt;
  • @MCTaylor17 如果最佳实践在过去 3 年发生了变化,我不会感到惊讶 :) 我会检查 W3C 规范,看看他们是否修改了它。如果是这样,我将在我的帖子中添加新建议的更新。
  • 这值得一读,因为它可能始终是最新的:html.spec.whatwg.org/multipage/…
【解决方案2】:

您的假设是正确的,引用应该进入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>

然后我只是使用 CSS 让它看起来不错。很基本。您可能还想查看Microformats.org 并四处寻找想法。

希望对你有帮助

编辑:太晚了,我忘记了,但你也可以使用 cite 元素

<blockquote cite="http://a.uri.com/">
    <p>This is a really insightful sentence.</p>
    <cite>Darko Z</cite>
</blockquote>

但说实话,我不能 100% 确定它的支持程度

编辑 2:根据 HTML 5 草案,cite shoudn't be an author name 因此,为了将来的校对,您可能不应该为此目的使用 cite。

【讨论】:

  • 引用不是引用的一部分,它应该在 blockquote 元素之外。 Blockquote 用于引用块内容,因此您应该将段落(例如)元素包裹在它们的内容周围。
  • 同意包装内容 - 已更新代码。仍然不确定引用是否应该是引用的一部分(尽管我过去就是这样做的)。现在正在寻找可靠的消息来源,看看他们怎么说...
  • 感谢 cmets 和建议。微格式示例似乎都涉及完全删除块引用元素;这似乎有点奇怪。我快速浏览了 HTML 5 草案。他们说 cite 不应该用于作者姓名,然后忽略说明应该使用什么,这很方便。所以,可能会使用一些块引用、引用和微格式的混搭。再次感谢,K
  • RE:名称使用什么元素。来自 HTML 5 工作草案,2009 年 4 月 23 日:“在某些情况下,b 元素可能适用于名称;例如,在八卦文章中,名人的名字是用不同样式呈现的关键字以引起人们的注意。在其他情况下情况下,如果确实需要某个元素,可以使用 span 元素。”
  • 9 年后,HTML 5.3 说名称是引用的一部分w3c.github.io/html/textlevel-semantics.html#the-cite-element
【解决方案3】:

情况发生了变化。我认为本世纪一个合适的结构应该是这样的:

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

【讨论】:

    【解决方案4】:

    您可能对使用hReview 格式感兴趣——据传Google 支持它,并且它几乎适用于您的情况,这取决于您是否只对外观感兴趣,或者您是否想要方便机器可读性也是如此。

    【讨论】:

    • 谢谢 - 我没想过使用评论 mf 作为推荐 - 好主意!
    【解决方案5】:

    按照Mozilla Developer API,这是标记推荐的正确方法:

    <figure>
        <blockquote>
            "This is my testimonial"
        </blockquote>
        <figcaption>
            — <cite class="author">My Name</cite>, <cite class="company">My Company</cite>
        </figcaption>
    </figure>
    

    【讨论】:

      【解决方案6】:

      如果你问如何在语义上标记它,是的,使用块引用,是的,引用属性是用于 URL 的。至于演示,你可以使用任何你想要的东西并相应地设置它的样式。

      除非查看源代码,否则访问者永远不会看到差异,我无法想象它也会影响 SEO。

      【讨论】:

      • cite 属性适用于 URI,而不仅仅是 URL。例如,如果您引用一本书,则可以使用 ISBN URN。
      • 我知道。为了简单起见,我使用了他的术语。
      【解决方案7】:

      HTML5 包含一个&lt;figcaption&gt; 标记。对白衣:

      <figure>
          <blockquote cite="http://example.com/page">
              Nevermore
          </blockquote>
          <figcaption>
              The Raven
          </figcaption>
      </figure>
      

      【讨论】:

        【解决方案8】:

        这里有两个基于HTML Living Standard的解决方案:

        <blockquote>
         <p>This is what I think</p>
        </blockquote>
        <p>- My Name, My Company</p>
        
        <figure>
         <blockquote>
          <p>This is what I think</p>
         </blockquote>
         <figcaption>My Name, My Company</figcaption>
        </figure>
        

        作为Darko Z. says in the edit of his answer,您不应使用&lt;cite&gt; 作为作者姓名。这是因为,根据the spec today&lt;cite&gt;是用来标注作品的标题的,不是用来命名作者的。用WHATWG自己的话来说:

        cite 元素代表作品的标题...一个人的名字不是作品的标题——即使人们称那个人为一件作品——因此不能使用该元素来标记人名.

        The spec also says,即“引用的属性,如果有的话,必须放在 blockquote 元素之外。”

        【讨论】:

          【解决方案9】:
          <!DOCTYPE html>
          <blockquote>
            <p>Quote
          </blockquote>
          <p>Author
          

          应该是最正确的。

          【讨论】:

          • 您至少可以添加结束 标记。可能有助于消除反对票....
          • @RickDonohoe 实际上根据 HTML5 规范:如果 p 元素后面紧跟地址、文章、旁边、块引用、详细信息、div、dl、字段集、figcaption,则可以省略 p 元素的结束标记, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, menu, nav, ol, p, pre, section, table, or ul element,或者如果没有父元素和父元素中的更多内容
          猜你喜欢
          • 1970-01-01
          • 2018-08-06
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2011-11-29
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多