Appropriate HTML5 tags to show source code, commands and software related tasks on blogs

  • Published: July 22, 2016


HTML5 provides a set of tags that can be used to represent code, commands and anything related with software development.

The content that any tech related blog will contain would tipipcally be:

  • Text with whitespaces: <pre>
  • Software Code examples: <code>
    • Refering to variables in any paragraph: <var>
  • Displaying User Input <kbd>
  • Showing Computer Output <samp>


Many languages give whitespaces a special meaning, they can be used to convey a program’s structure or be a core part of a programming language that adhere to the off-side rule.

Leading indentation in these cases should be respected when showing content.

A computer programming language is said to adhere to the __off-side rule__ if blocks in that language are expressed by their indentation

The pre element is defined as follows:

 element represents a block of preformatted text, 
 in which structure is represented by typographic conventions 
 rather than by elements.
Off-side rule in W3

It is useful to show fragments of computer code or any text that needs to preserve whitespaces like ASCII art or directory trees:


The following text using <pre>

├── config.yml
└── drafts
    ├── begin-with-the-crazy-ideas.textile
    └── on-simplicity-in-technology.markdown


├── config.yml
└── drafts
    ├── begin-with-the-crazy-ideas.textile
    └── on-simplicity-in-technology.markdown

Without <pre>:

. ├── config.yml └── drafts ├── begin-with-the-crazy-ideas.textile └── on-simplicity-in-technology.markdown


Fragment of computer code can be represented with the <code> element.

It can be used to represent:

  • file names
  • source code
  • any string that a computer would recognize

When used with <pre> it can show source code conserving whitespaces, useful to represent source code from languages like python.


The following source using <pre> and <code>:

 if foo:
     if bar:

Will be displayed as:

 if foo:
     if bar:

Without pre and code:

if foo: if bar: print(bar) else: print(foo)


The var element represents a variable. This could be an actual variable in a mathematical expression or programming context, an identifier representing a constant, a symbol identifying a physical quantity, a function parameter, or just be a term used as a placeholder in prose.

Example: The letter “n” is being used as a variable in prose:

<p>If there are <var>n</var> pipes leading to the ice
cream factory then I expect at <em>least</em> <var>n</var>
flavors of ice cream to be available for purchase!</p>


If there are n pipes leading to the ice cream factory then I expect at least n flavors of ice cream to be available for purchase!

Computer Output

Computer output can be

The samp element represents (sample) output from a program or computing system.

Console Commands

A sequence of commands introduced in a termianl can be represented with samp, for example:

<pre class="shell">
<span class="shell-prompt">john@server:~$</span> <kbd>ssh</kbd>
Last login: Tue Apr 5 07:11:05 2010 from on pts/1
Linux nasa 2.6.11-grsec-v6.189 #1 SMP Tue Feb 1 12:21:05 PST 2010 i586 

<span class="shell-comment"># I'm in</span>
<span class="shell-prompt">john@nasa:~$</span> <span class="shell-cursor">_</span>

Outputs (with proper CSS):

john@server:~$ ssh
Last login: Tue Apr 5 07:11:05 2010 from on pts/1
Linux nasa 2.6.11-grsec-v6.189 #1 SMP Tue Feb 1 12:21:05 PST 2010 i586

# I'm in
john@nasa:~$ _

User Input

The element to represent user input is kbd.

This element is useful to represent:

  • terminal commands
  • keyboard input
  • voice commands

Examples and nesting:

Input echoed

<samp><kbd>..</kbd></samp> represents the input as it was echoed by the system.

Input based on something

  • <kbd><samp>..</samp></kbd> represents input based on system output, for example invoking a menu item.

the samp elements inside them indicating that the steps are input based on something being displayed by the system

Example: The following code

	To save it, select


To save it, select File | Save…

Key press

  • <kbd><kbd>..<kbd></kbd> represents an actual key or other single unit of input.

Example: To indicate keys to press:

<p>To continue press <kbd><kbd>Ctrl</kbd>+<kbd>Space</kbd></kbd></p>

Woulde produce the following output:

To continue press Ctrl+Space


Marcelo Canina
I'm Marcelo Canina, a developer from Uruguay. I build websites and web-based applications from the ground up and share what I learn here.
comments powered by Disqus
Except as otherwise noted, the content of this page is licensed under CC BY-NC-ND 4.0 ·