HTML Sample Output <samp> Element
- By Christopher Kielty, updated Jan 5, 2019
Sample output likes to hang out with
<pre> -- and other tags also -- and is great for demonstrating the output from, say, an app running in the console. Actually, it's pretty good for just about any program where text is produced, say, a dialog, a menu, etc.
For example, say I'm using Inkscape and I want to save the document I'm working on so that it overwrites some older version of the file. When I hit save, Inkscape will say something to the effect of
<samp>This file already exists<br>Are you sure you want to overwrite this file?</samp>, which, with my stylesheet, will render as This file already exists
Are you sure you want to overwrite this file?.
<samp> can be mixed with other tags, like <kbd>. Say I want to demonstrate some stuff that can be typed into a console and the text the console will produce as a result. I could use <kbd> to demonstrate keyboard input and <samp> to demonstrate console output. I could then put this all in a <pre> element, which, again, with my stylesheet, this isn't the default, will look something like this:
example text to enter example console output
Because I'm using a pre here, and because of my CSS, there is no need to use a line break <br> tag between the two lines.
<samp> is an inline element that is well supported on pretty much all popular web browsers. I typically use within <p> or <pre> tags. As you can see above, CSS may be employed for styling <samp>, however, certain browser settings may override this. On Safari 12.0, which is what I'm using right now, without any CSS, <samp> text is rendered in a monospace font somewhat smaller than the regular paragraph text.
See also Complete List of HTML Tags.