The samp HTML Element

While writing my last few blog posts, I’ve noticed they include a fair amount of code and outputs. I haven’t been consistent with which HTML elements I’m using for these.

For code, I typically use hugo’s highlight shortcode, which semantically translates to <pre><code>.

For command/program outputs though, sometimes I use <blockquote>, sometimes it’s included in the “highlight” block, sometimes it’s just regular text (ex: <p>).

I set out to make things more consistent, and the first element I thought of was the <output> element. They’re command/program outputs, right? Well, maybe that’s not exactly what the <output> element was meant for after all.

According to the excellent MDN web docs:

The <output> HTML element is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.

My output isn’t dynamic. Nothing gets injected anywhere based on anybody’s actions, so that doesn’t seem to fit.

After a bit more searching, I found the <samp> element which is described as:

The <samp> HTML element is used to enclose inline text which represents sample (or quoted) output from a computer program.

Bingo!

In fact, a lot of my samples look a lot like the MDN example of a shell prompt and output.

So I went and retrofitted all the blog posts (I might’ve missed a few instances. If so, I’m hoping to find and fix them at a later date).

I ended up creating a few Hugo shortcodes:

• repl
  • input
  • prompt
• htmltag

You can see the “repl” and related “input” and “prompt” shortcodes in action here, for example. Maybe I’ll write more about those in a later blog post.