HTML Code Tag Group

The Code Tag Group is a group of tags that assist developers with sharing code with other developers. Code group tags include <pre>, <code>, <--...-->, <output>, and others.

HTML Reference

Sharing Code

Presenting code snippets in HTML is mostly done with <pre> and <code> tags.

To syntax highlight the code you'll need JavaScript -- exactly what we do on this site.


Code Tags

A list of code tags.

Element Description
<pre> Displays pre-formatted text in fixed-width font -- usually computer code
<code> An element that is used to display computer code
<samp> Displays sample output from a coumputer code
<output> Displays output results of a calculation
<var> Defines its content as a variable
<!--...--> Marks text as comments in the source code. Not visible to users

Note: HTML was developed by programmers, so they have given themselves a reasonable share of HTML features and tags.


Example

#

A C# code example with tags from the code group.

Notice the use of the static void Main method in this C# program.
It's the entry point of the solution. Also notice that hello is a string variable.

Press F5 to start the program.

  using System; 

  namespace App 
  { 
    class HelloWorld 
    { 
      static void Main(string[] args) 
      { 
         var hello = "Hello World!";
         Console.WriteLine(hello); 
         Console.ReadKey(); 
      } 
    } 
  } 
Result:
Hello World!
<!-- Instructions to Hello World in C# -->

<p>
  Notice the use of the <code>static void Main</code> 
  method in this C# program.<br />It's the entry point 
  of the solution. Also notice that <var>hello</var> 
  is a string variable.<br /><br />
  Press <kbd>F5</kbd> to start the program.
</p>

<pre style="background:oldlace;">
  using System; 

  namespace App 
  { 
    class HelloWorld 
    { 
      static void Main(string[] args) 
      { 
         var hello = "Hello World!";
         Console.WriteLine(hello); 
         Console.ReadKey(); 
      } 
    } 
  } 
</pre>

<div>Result:</div>

<output style="color:white;background:darkslategray;">
Hello World!
</output>

Code explanation

  • The <--...--> tag contains comments that are not visible to the user.
  • The <code> tag highlights inline code.
  • The <var> tag displays a variable.
  • The <kbd> tag displays a keyboard shortcut.
  • The <pre> tag displays pre-formatted code exactly as it was entered in HTML.
  • The <output> tag displays the output of the program.

Tip: This example does not syntax-highlight the C# program.
For this you will need a JavaScript color coding utility.


Did you know?

Did you know?

Coding on the Web

Developers have succeeded in creating sophisticated IDEs (Interactive Developer Environments) on the front-end.

They use a combination of HTML, CSS, and JavaScript.

The site codepen.io is an example of what can be accomplished in this area.


You may also like

 Back to Tag Groups


Guides