1

What's the best HTML5 element to represent a preview or summary of another webpage? I was thinking <abbr>, but is there a better one to represent these?

Ky -
  • 30,724
  • 51
  • 192
  • 308

2 Answers2

4

(I can’t think of a case where the use of abbr would be appropriate; well, unless the preview content is an abbreviation.)

Preview as teaser etc.

If you want to display some content that already exists at some other place, you probably want to use the blockquote element. You may only use blockquote if you aren’t changing anything of the content.

As it’s a sectioning root element, any headings/sections won’t affect your outline.

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

Also use blockquote when you want to display a screenshot of the content:

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

If you need more complex alternative content, you might want to use object instead of img.

If you are not quoting (i.e., the content is on the same site resp. your own content, or you are paraphrasing), you could just go with article.

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

In that case, headings/sections do affect your outline, which makes sense, as it’s your content (you summarized/paraphrased).

If it’s just a teaser/snippet in a sidebar (or a search result, or a list of posts etc.), you might want to use the bookmark link type to link to the actual content.

Preview, when creating/editing content

I guess it depends on your understanding of the content if a dedicated element is needed in the first place. One could argue that the preview is (part of) the actual content of the page, and it only happens to be published at another page in addition. So the most basic variant would be to use a sectioning element that is appropriate for this content, probably article:

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

resp. with a more useful outline:

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

It could make sense to use the figure element here; as it’s a sectioning root, possible headings/sections of the preview content wouldn’t affect the current outline:

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

This is what I would recommend:

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

Special cases

samp

In some cases it might be appropriate to use the samp element:

The samp element represents (sample) output from a program or computing system.

Note that samp can only have phrasing content, so you can’t use it for complex content.

output

In some cases it might be appropriate to use the output element:

The output element represents the result of a calculation or user action.

You could even use the for attribute to relate the output (= preview) with the form.

Just like samp, it can only have phrasing content, so it’s not appropriate for complex content.

Community
  • 1
  • 1
unor
  • 92,415
  • 26
  • 211
  • 360
  • I love the amount of work here! But I'm afraid you misunderstood the question. This will be, say, a screenshot or description of another page, as one might find in a search, but without user input changing anything. Think YouTube's recommended videos in the sidebar. – Ky - Mar 22 '14 at 07:05
  • 1
    @Supuhstar: Yes, in that case my second paragraph should apply: If the content already exists at some other place, you should use `blockquote`. I’ll extend it now. – unor Mar 22 '14 at 11:29
  • thank you for this immensely detailed and well-researched question! +50 rep to you! – Ky - Mar 25 '14 at 20:49
1

It sounds like you might have many short previews or summaries of these websites in a single page? In that case, I think there are many ways to express these types of blocks in smaller HTML chunks while giving them additional semantic meaning. So I will give you several options I would try using in HTML5.

The DETAILS element

The details element is new interactive element in HTML5 which shows a text summary and additional hidden text details that the user can see by clicking the summary text. This is usually created by the browser as a piece of title text with a dropdown toggle arrow that reveals hidden content when clicked. This element is typically used as a Javascript-free toggle widget to disclose additional information if the user chooses to view it. What is nice about this new HTML5 element is it will create this nice toggle, open-and-close, text block without the need for any Javascript, and which includes a nice clickable summary "bar" that unfolds with more detail text. Ive added some extra CSS to make it look sexy. (Note: IE1-11 does not support this element, but with the styles Ive added it degrades gracefully and shows summary and div content in one stacked block.)

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

The DEFINITION element

The dfn element represents a piece of definition text when its term is defined in a paragraph. It represents a piece of text that is going to be defined within a sentence. The definition item is usually styled in plain italics. Not as fancy as the details element but tells search engines you are associating a text title with descriptive text. If you want to just drop page previews in plain paragraphs but give their titles more meaning, wrap the titles with this simple piece of HTML. You could also wrap an anchor tag around the dfn element and link to your page you are previewing. This link then has more semantic meaning.

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

The DESCRIPTION LIST element

If your page previews need something more formal, as in a listing, try a description list. The dl element is a description list and contains groups of description terms (dt) and descriptions details (dd). The description list is often used to show a page's glossary, lexicon, or dictionary of terms in key-value pairs. A description list is great if you have many of these previews. It really holds a lot of semantic meaning and allows you to have a description TERM and its DESCRIPTION in separate places. Again, this has more semantic meaning than plain HTML paragraphs. Ive added some CSS to this which you will see when you paste this in an HTML page and view it. Each description is in a white block with a border. You might add your page preview titles as terms, and your text preview in the description element.

<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>
Stokely
  • 12,444
  • 2
  • 35
  • 23