Using the HTML `` Element to Display Sample Output: Enhancing Readability and Accessibility

Learn how to semantically mark up sample computer program output using the HTML `` element. This tutorial explains its functionality, demonstrates its usage, and shows how to customize its appearance using CSS for improved readability and accessibility of technical content.

Using the HTML `` Element to Display Sample Output

Understanding the `` Element

The HTML `` (sample) element is used to indicate that a piece of text represents sample output from a computer program. This adds semantic meaning to your HTML, making your code more accessible and understandable. Browsers typically display the text within the `` tag using a monospace font (a font where every character has the same fixed width). This improves readability by making it easy to distinguish the output from other text on the page. While the `` tag is not deprecated, using CSS (Cascading Style Sheets) offers more control over styling and appearance.

Using the `` Element

To mark up sample output, simply wrap the output text within the opening and closing `` tags. For example:

<p>The program output is: <samp>Error 101</samp></p>

Browser Support for ``

The `` element is supported by all major modern web browsers.

Styling `` with CSS

You can customize the appearance of the sample output using CSS. This allows for a more consistent design and improved readability.

samp {
  font-family: monospace;
  background-color: #f0f0f0;
  padding: 2px 5px;
  border-radius: 3px;
}

Most browsers render the `` element with a monospace font by default.