HTML <samp> tag

Introduction to <samp> Tag

The HTML <samp> tag stands for sample output. It is used to enclose inline text that represents the sample output from a computer program or a script. By default, its contents will be displayed in the browser in a mono-space 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: Creating Sample Element

In the following example, we see the usage of the <samp> tag in an HTML document. This HTML code uses the <samp> tag to display a humorous error message. Running the code will generate an output displaying the text on the webpage.

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

Example: Styling Sample Element

Here, we create an HTML document using the <samp> tag, and CSS properties to override the default font style. This HTML code displays sample output text in bold, italic, and courier font style. Running the code will generate an output window that displays the text with the applied CSS on the webpage.

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

Example: Using <kbd> with <samp> Tag

Let's look at the following example, we nest the <kbd> tag within a <samp> block to present text entered by the user. Consider the text as a transcript of 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

Print Page