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?
(I can’t think of a case where the use of abbr would be appropriate; well, unless the preview content is an abbreviation.)
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.
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>
samp
In some cases it might be appropriate to use the samp element:
The
sampelement 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
outputelement 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.