<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.
<samp> element doesn't have any specific attributes; it inherits global attributes common to all HTML elements.
<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.
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.
For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.