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.
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.
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.
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();
}
}
}
<!-- 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>
<--...--> tag contains comments that are not visible to the user.
Tip: This example does not syntax-highlight the C# program.
For this you will need a JavaScript color coding utility.
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.
