Search code examples
htmlsemantic-markup

Which HTML tag do I use for bash command line input?

Say I'm writing an article

<p>If you want to check your total memory, run the following command

<pre>$ free -g
              total        used        free      shared  buff/cache   available
Mem:             25            0         25           0           0          24
Swap:             2           0           2</pre>

$ free -g is the bash input, and the text below is its output.

I would like to style the input and output properly. Although I can use <div>, I don't think it's sematic enough.

It looks like <kbd> is more for keys on keyboard; <command> is deprecated.

Which HTML tag should I use for command line input?

Solution

  • The HTML spec has a perfect example that shows the use of <pre> in conjunction with <kbd> and <samp> (and some syntax highlighting-specific <span>s) to mark up a command line sample:

    This second example shows a block of sample output from a console program. Nested samp and kbd elements allow for the styling of specific elements of the sample output using a style sheet. There's also a few parts of the samp that are annotated with even more detailed markup, to enable very precise styling. To achieve this, span elements are used.

    <pre><samp><span class="prompt">jdoe@mowmow:~$</span> <kbd>ssh demo.example.com</kbd>
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown

<span class="prompt">jdoe@demo:~$</span> <span class="cursor">_</span></samp></pre>

    This example can be found under the definition of <samp>.

    You don't need the <span>s, of course; those are just for syntax highlighting effects, and <span> itself, like <div>, does not carry any semantics whatsoever. In other words, the semantics of this example are identical with or without the <span>s.

    There is nothing wrong with using <code> instead; it's really up to you. But if you want to follow a reference, then the spec provides one and I recommend it all the same.