The <samp> Element
As defined in the HTML Living Standard, the <samp> element represents sample output from a computer program, a script, or other system.
Scanning files... done.
Audit complete. 0 accessibility errors found.
<p>The system responded with: <samp>Invalid login</samp>.</p>
View HTML Living Standard: The samp element
Nesting Scenarios
The <samp> element is frequently nested with other phrase elements to convey complex relationships:
<kbd>inside<samp>: Represents input that was echoed back by the system.<samp>inside<kbd>: Represents a menu item or a button label as seen on the screen.<code>inside<samp>: Represents code as part of the output (e.g., a traceback or error message showing line of code).
<!-- Input echoed by system -->
<samp>You entered: <kbd>admin</kbd></samp>
Accessibility Impact
Using the <samp> element ensures that system responses are programmatically distinguishable from standard prose or code instructions.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
By identifying computer output with <samp>, you allow assistive technologies to provide context to the user. While most current screen readers simply announce the text, the semantic marker provides a foundation for future improvements and allows for custom user stylesheets that can highlight "output" differently for users with cognitive or visual impairments.
Styling Best Practices
Following SMACSS Module Rules, you should style the <samp> element to look like terminal or screen text. Browsers use a monospace font by default.
A11y Tip: Logical Fragments
If the sample output contains error messages, ensure that the <samp> text is clear and readable. If you use color coding (like red for errors), ensure you meet WCAG SC 1.4.1 (Use of Color) by including a text-based indicator (e.g., "Error: [message]").