页面预览的最佳元素是什么？答案

【问题标题】：What is the best element for a page preview?页面预览的最佳元素是什么？
【发布时间】：2014-03-21 23:40:27
【问题描述】：

代表另一个网页的预览或摘要的最佳 HTML5 元素是什么？我在想<abbr>，但有更好的代表这些吗？

【问题讨论】：

标签： html semantic-markup

【解决方案1】：

（我想不出适合使用abbr 的情况；好吧，除非预览内容是缩写。）

作为预告片预览等

如果你想显示一些在其他地方已经存在的内容，你可能想使用blockquote element。如果您不更改任何内容，则只能使用 blockquote。

因为它是一个分节根元素，所以任何标题/节都不会影响你的大纲。

<blockquote>
  <!-- the quoted page -->
  <h1>Foo bar page</h1>
  <nav>…</nav>
  <article></article>
  <!-- could of course also use 'iframe' if it’s the whole page + CSS -->
</blockquote>

当你想显示内容的截图时，也可以使用blockquote：

<blockquote>
  <img src="screenshot.png" alt="Article Foo …" />
</blockquote>

如果您需要更复杂的替代内容，您可能需要use object instead of img。

如果您不引用（即，内容位于同一站点上，或者您自己的内容，或者您是在解释），您可以使用article。

<article>
  <h1>Summary of article <a href="/article/foo">Foo</a></h1>
  <p>…</p>
</article>

在这种情况下，标题/部分确实会影响您的大纲，这是有道理的，因为它是您的内容（您总结/解释）。

如果它只是侧边栏中的预告片/sn-p（或search result，或帖子列表等），您可能希望使用bookmark link type 链接到实际内容。

预览，创建/编辑内容时

我想这取决于您对内容的理解是否首先需要一个专用元素。有人可能会争辩说，预览是页面的（部分）实际内容，而且它只是碰巧在另一个页面上发布。所以最基本的变种是使用适合该内容的分段元素，可能是article：

<form><!-- the content edit form --></form>
<article><!-- the preview --></article>

分别。更有用的大纲：

<body>
  <h1>Create a new foo</h1>
  <form><!-- the content edit form --></form>
  <section>
    <h1>Preview of your foo</h1>
    <article><!-- the preview --></article> <!-- depends on your case; would also be possible to have several sectioning content elements here -->
  </section>
</body>

在这里使用figure element 可能有意义；由于它是一个分节根，预览内容的可能标题/部分不会影响当前大纲：

<form>
  <!-- the content edit form -->
</form>
<figure>
  <!-- your preview -->
</figure>

这是我的建议：

<body>
  <h1>Create a new foo</h1>
  <form>
    <!-- the content edit form -->
  </form>

  <section>
    <h1>Preview of your foo</h1>
    <figure>
      <article>
        <!-- your preview -->
      </article>
      <!-- might use other, more or no sectioning elements here; depends on your case -->
    </figure>
  </section>
</body>

特殊情况

samp

在某些情况下，使用samp element 可能是合适的：

samp 元素表示程序或计算系统的（样本）输出。

请注意，samp 只能包含短语内容，因此您不能将其用于复杂内容。

output

在某些情况下，使用output element 可能是合适的：

output 元素表示计算或用户操作的结果。

您甚至可以使用for 属性将输出（= 预览）与表单相关联。

和samp一样，只能有分句内容，不适合复杂的内容。

【讨论】：

我喜欢这里的大量工作！但恐怕你误解了这个问题。例如，这将是另一个页面的屏幕截图或描述，就像人们可能在搜索中找到的那样，但用户输入不会改变任何内容。想想侧边栏中的 YouTube 推荐视频。
@Supuhstar：是的，在这种情况下，我的第二段应该适用：如果内容已经存在于其他地方，您应该使用blockquote。我现在就扩展它。
感谢您提出这个非常详细且经过充分研究的问题！ +50 代表给你！

【解决方案2】：

听起来您可能在一个页面中包含这些网站的许多简短预览或摘要？在这种情况下，我认为有很多方法可以在更小的 HTML 块中表达这些类型的块，同时赋予它们额外的语义含义。所以我会给你几个我会尝试在 HTML5 中使用的选项。

详细信息元素

details 元素是 HTML5 中的新交互式元素，它显示文本摘要和其他隐藏文本详细信息，用户可以通过单击摘要文本来查看。这通常由浏览器创建为一段标题文本，带有下拉切换箭头，单击时会显示隐藏的内容。此元素通常用作无 Javascript 的切换小部件，以在用户选择查看时公开附加信息。这个新的 HTML5 元素的优点在于，它无需任何 Javascript 即可创建这个漂亮的切换、打开和关闭文本块，其中包括一个漂亮的可点击摘要“栏”，展开更详细的文本。我添加了一些额外的 CSS 让它看起来很性感。（注意：IE1-11 不支持此元素，但随着我添加的样式，它会优雅地降级并在一个堆叠的块中显示摘要和 div 内容。）

<details>
  <summary style="display:block;margin: 0;padding: .2em;width: 25em;background-color: #ccccccff;box-shadow: 2px 2px 3px #aaa;">&copy; Copyright 2021</summary>
  <div style="display:block;margin: 0;padding: .2em;width: 25em;background-color: #efefefff;box-shadow: 2px 2px 3px #aaa;">
    <p>Owned by Company ABC. All Rights Reserved.</p>
    <p>All content and graphics on this web site are the property of Company ABC.</p>
  </div>
</details>

定义元素

dfn 元素在其术语在段落中定义时表示一段定义文本。它表示将在句子中定义的一段文本。定义项通常采用纯斜体样式。不像details 元素那么花哨，但它告诉搜索引擎您正在将文本标题与描述性文本相关联。如果您只想将页面预览放在普通段落中，但赋予其标题更多意义，请使用这段简单的 HTML 包装标题。您还可以在dfn 元素周围包裹一个锚标记并链接到您正在预览的页面。那么这个链接就有了更多的语义意义。

<p>The <dfn id="sun" title="Our Shining Celestial Body">Sun</dfn> is the name of the local star in our solar system.</p>

描述列表元素

如果您的页面预览需要更正式的内容，例如列表，请尝试描述列表。 dl 元素是一个描述列表，包含描述术语组 (dt) 和描述详细信息 (dd)。描述列表通常用于以键值对的形式显示页面的词汇表、词典或术语字典。如果您有许多这样的预览，那么描述列表非常棒。它确实包含很多语义含义，并允许您在不同的地方有一个描述 TERM 及其描述。同样，这比普通的 HTML 段落具有更多的语义含义。我已经为此添加了一些 CSS，当您将其粘贴到 HTML 页面中并查看它时，您将看到这些 CSS。每个描述都在一个带边框的白色块中。您可以将页面预览标题添加为术语，并将文本预览添加到描述元素中。

<dl>
  <div style="margin: .2em;padding: 0 .5em;border: 1px solid #999;">
    <dt id="fruit1">Apple</dt>
    <dd nowrap="no" role="definition" aria-labelledby="fruit1">A popular fruit that grows on trees</dd>
  </div>
  <div style="margin: .2em;padding: 0 .5em;border: 1px solid #999;">
    <dt id="fruit2">Strawberry</dt>
    <dd nowrap="no" role="definition" aria-labelledby="fruit2">A popular berry that grows low to the ground</dd>
  </div>
</dl>

【讨论】：