HTML <samp> tag

The 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

Following is the syntax of <samp> tag −

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

Example

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

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

When we run the above code, it will generate an output consisting of the text displayed on the webpage.

Example

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, as follows −

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

On running the above code, the output window will pop up displaying the text along with a CSS applied to it on the webpage.

Example

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>

When we run the above code, it will generate an output consisting of the text displayed on the webpage.

html_tags_reference.htm
Advertisements