From 754bbf7a25a8dda49b5d08ef0d0443bbf5af0e36 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 7 Apr 2024 13:41:34 -0500 Subject: new repository --- devdocs/html/element%2Fsamp.html | 119 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 119 insertions(+) create mode 100644 devdocs/html/element%2Fsamp.html (limited to 'devdocs/html/element%2Fsamp.html') diff --git a/devdocs/html/element%2Fsamp.html b/devdocs/html/element%2Fsamp.html new file mode 100644 index 00000000..c63e916b --- /dev/null +++ b/devdocs/html/element%2Fsamp.html @@ -0,0 +1,119 @@ +

<samp>: The Sample Output element

The <samp> HTML element is used to enclose inline text which represents sample (or quoted) output from a computer program. Its contents are typically rendered using the browser's default monospaced font (such as Courier or Lucida Console).

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

You can use a CSS rule to override the browser's default font face for the <samp> element; however, it's possible that the browser's preferences may take precedence over any CSS you specify.

The CSS to override the default font face would look like this:

+

css

+
samp {
+  font-family: "Courier";
+}
+
+

Note: If you need an element which will serve as a container for output generated by your website or app's JavaScript code, you should instead use the <output> element.

+
+

Examples

+ +

Basic example

+
+

In this simple example, a paragraph includes an example of the output of a program.

+

html

+
<p>
+  When the process is complete, the utility will output the text
+  <samp>Scan complete. Found <em>N</em> results.</samp> You can then proceed to
+  the next step.
+</p>
+
+

Result

+
+ + +
+
+

Sample output including user input

+
+

You can nest the <kbd> element within a <samp> block to present an example that includes text entered by the user. For example, consider this text presenting a transcript of a Linux (or macOS) console session:

HTML

+

html

+
<pre>
+<samp><span class="prompt">mike@interwebz:~$</span> <kbd>md5 -s "Hello world"</kbd>
+MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62
+
+<span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</span></samp></pre>
+
+

Note the use of <span> to allow customization of the appearance of specific portions of the sample text such as the shell prompts and the cursor. Note also the use of <kbd> to represent the command the user entered at the prompt in the sample text.

CSS

The CSS that achieves the appearance we want is:

+

css

+
.prompt {
+  color: #b00;
+}
+
+samp > kbd {
+  font-weight: bold;
+}
+
+.cursor {
+  color: #00b;
+}
+
+

This gives the prompt and cursor fairly subtle colorization and emboldens the keyboard input within the sample text.

Result

The resulting output is this:

+
+ + +
+
+

Technical summary

+
Content categories Flow content, phrasing content, palpable content.
Permitted content +Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role generic
Permitted ARIA roles Any
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-samp-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
samp1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp +

+
-- cgit v1.2.3