HTML <samp> tag

HTML <samp> tag stands for sample output; it is used to enclose the inline text that represents the sample output from a computer program or a script. Their contents will be visible in the browser by default in monospace font.

To change the style and font of the <samp>’s tag content, we can use the CSS properties to override the browser's default font.

Syntax

<samp>.....</samp>

Examples of HTML samp Tag

Bellow examples will illustrate the usage of samp tag, where, when and how to use to samp tag to show sample output.

Creating samp element using <samp> tag

In the following example, let’s see the usage of the <samp> tag in the HTML document.

<!DOCTYPE html>
<html>
<body>
   <p>
      I was trying to boot my computer, 
      but I got this hilarious message:
   </p>
   <p>
      <samp>
         Keyboard not found <br>Press F1 to continue 
      </samp>
   </p>
   <body>
</html>

Styling samp element using CSS

Considering the following example, we are creating an HTML document and using the <samp> tag, and we are also using the CSS properties to override the default font style of the <samp>content.

<!DOCTYPE html>
<html>
<head>
   <style>
      samp {
         font-weight: bold;
         font-family: courier;
         font-style: italic;
      }
   </style>
</head>
<body>
   <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>
   <body>
</html>

Using <kbd> with <samp> tag

Let's look at the following example, where we are nesting the <kbd> tag with a <samp> block to present an example that includes text entered by the user. Consider this text as a transcript of a Linux (or macOS) console session.

<!DOCTYPE html>
<html>
<head>
   <style>
      .prompt {
         color: #b00;
      }

      samp>kbd {
         font-weight: bold;
      }

      .cursor {
         color: #00b;
      }
   </style>
</head>
<body>
   <pre>
      <samp>
         <span class="prompt">John@interwebz:~$</span>
         <kbd>md5 -s "Hello world"</kbd>
         MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62
      
         <span class="prompt">John@interwebz:~$</span>
         <span class="cursor"></span>
      </samp>
   </pre>
</body>
</html>

Tag
samp	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm