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

Published:
Last modified:
Tags Html5 , Web-Development , Code

Overview

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>

Whitespaces

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:

Example

The following text using <pre>

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

produces:

.
├── 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

Code

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.

Example

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

<pre>
<code>
 if foo:
     if bar:
         print(bar)
 else:
   print(foo)
</code>
</pre>

Will be displayed as:


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

Without pre and code:

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

Variables

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>

Outputs:

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">
<samp>
<span class="shell-prompt">john@server:~$</span> <kbd>ssh nasa.com</kbd>
Last login: Tue Apr 5 07:11:05 2010 from mars.com 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>
</samp>
</pre>

Outputs (with proper CSS):


john@server:~$ ssh nasa.com
Last login: Tue Apr 5 07:11:05 2010 from mars.com 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

<p>
	To save it, select
	<kbd>
	  <kbd>
		  <samp>File</samp>
	  </kbd>
	  |
	  <kbd>
		  <samp>Save...</samp>
	  </kbd>
	</kbd>
</p>

Outputs:

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

References

Uruguay
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

Set of HTML5 tags recommended to show code and commands in a webpage.

Simple IT 🤘 Rocks

Clutter-free software concepts.
Translations English Español

Except as otherwise noted, the content of this page is licensed under CC BY-NC-ND 4.0 . Terms and Policy.

Powered by SimpleIT Hugo Theme

·