Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest self-service freelancing marketplace for people like you.

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.

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


Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest self-service freelancing marketplace for people like you.

Guides