<samp>
Overview
The <samp> element encapsulates inline text that showcases sample or quoted outputs from a computer system or program. By default, browsers typically render content within the element using a monospaced font.
Examples and Usage
When documenting or explaining software aspects, it's common to show examples of program outputs. Suppose we're documenting software and want to show its response when a user attempts to access a restricted file:
<p>When trying to open the protected file, the system responded: <samp>Access Denied: Unauthorized user.</samp></p>
This straightforward use of <samp> provides a clear distinction between regular narrative text and the system's output.
In the context of illustrating terminal or console interactions, <samp> often works with the <pre> element to keep the output format intact, preserving spaces and line breaks. In addition, the <kbd> element can be used to show user inputs or commands, making them stand out from system responses. For added clarity, you can use <span> elements in the output. With specific classes on these spans, parts like terminal prompts can get their own style. For instance, a terminal prompt could have a unique color, while user commands in <kbd> might get a background shade.
Attribute Breakdown
The <samp> element doesn't have any specific attributes; it inherits global attributes common to all HTML elements.
Accessibility Aspects
The <samp> element has a default role attribute value of generic as per the specification. While any role can be assigned, the use of generic is generally discouraged. In terms of naming, the <samp> element is prohibited from being named using ARIA naming techniques. Aside from this, the element can employ global aria-* attributes and any aria-* attributes that apply to the assigned roles. In practical terms, there are no direct accessibility considerations for this element in the majority of use cases.
Associated Elements
<code><kbd><output><pre><var>
Additional Notes
Both the start and end tags for the
<samp>element are required; there's no tag omission.As we previously mentioned, browsers typically display the content inside the
<samp>element using a monospaced font. You can change this default look with CSS, but remember that specific browser settings might override the styles you set.If you're looking to display immediate outputs, especially in web applications, the
<output>element is more appropriate for this use case.
Browser Compatibility
For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.
| Browser | Chrome | Edge | Safari | Firefox | Opera | Internet Explorer |
|---|---|---|---|---|---|---|
| Support | Yes | Yes* | Yes | Yes | Yes | Yes* |