Marking up Terminal Sessions in HTML

When writing a technical article, we might want to include a copy of a terminal session. For example, a curl command:

mike@MacBook-Pro ~ % curl -Is j4e.name | grep Server
Server: cloudflare

Wrapping the text from the session in a <pre> element preserves line breaks and indentation, plus we can use <samp> and <kbd> to improve the semantics.

<samp> represents output from a computer program. <kbd> represents user input. Nesting a <kbd> element inside a <samp> element represents input that has been echoed back to the user by the system, which is perfect for representing a terminal session.

Last, to help with styling, we can add <span> elements to distinguish between the input (including PS1) and the output.

<pre>
  <samp>
    <span class="input">
      <span class="ps1">mike@MacBook-Pro %</span>
      <kbd>curl -Is j4e.name | grep Server</kbd>
    </span>
    <span class="output">Server: cloudflare</span>
  </samp>
</pre>