Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > HTML Code Tag

HTML Code Tag

PHPz
Release： 2024-09-04 16:28:53
Original
815 people have browsed it

HTML or Hyper Text Markup Language is a web development programming language that uses tag for defining, declaring, and performing operations on any web page element. Tags are defined using the symbols < and >, and a closing tag should have ‘/’ in front of it. A code tag is a type of tag that allows the programmer to write their chunk of code in between, like ……. , as every tag in HTML must have a close tag.

Syntax with Explanation:

The basic syntax is shown below, where the element comes with a pair and the fragments of code are written between these tags. Tag omission is not performed here as both the starting and closing tag is mandatory by default.

<pre class="brush:php;toolbar:false">
<code>
….
….
</code>
Copy after login

How does Code Tag Work in HTML?

By default, the content of the tag font is displayed using monospace, which means all the characters in a given content of the same width. It is specified in both HTML 5 and HTML4 standards.

HTML uses various text sizes and more properties with fonts and indent. There comes a scenario where it is necessary to display some content in the browser with both text and code of snippets, and then we shall make use of this tag. The code tag is paired together with the preformatted tag 

, which preserves the exact format of the text written in the source document.</p>
<p>To begin the text in the exact same line, this tag has been used, which literally removes the white space. To represent the code in a font style, it is preferred to use a code selector in the CSS style and to give a visual weight. To pick a font, it is beautiful to have CSS with already been set font-family to monospace. Coming to browser compatibility, it is supported in chrome, edge, opera, safari, Firefox. Even this element supports both the event and global attributes. Code tags make use of class attribute for a predefined language and also <id>, <style>, <title>.</p>
<p>This code tag makes use of some elements while implementation.</p>
<ul>
<li>
<strong><Code>:</strong> Defines code fragment</li>
<li>
<strong><var>:</strong> Explains variables</li>
<li>
<strong><samp></strong>: Throws computer Output</li>
<li>
<strong><kbd></strong>: Helps to display keyboard input</li>
</ul>
<h3>Examples to Implement HTML Code Tag</h3>
<p>Here is an example with different styles on the code tag.</p>
<h4>Example #1</h4>
<p>Here the first example program is to display the code, which forms a basic inline concept.</p>
<p><strong>Code:</strong></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<body>
<em># Display the sum</em><br>
<strong>program adds two numbers</strong><br>
<pre class="brush:php;toolbar:false">
<code>
nu1 = 2.5
nu2 = 5.3
sum = float(nu1) + float(nu2)
print('The sum of two num {0} and {1} is {2}'.format(nu1, nu2, sum))</code>

output from a program
input
Variable declaration
Copy after login

The generated output is given below as it displays the content of the program code and the output using the tag on the web page. To wrap multiple lines of a fragment, computer code 

 element has been used below.</p>
<p><strong>Output:</strong></p>
<p><img  src="https://img.php.cn/upload/article/000/000/000/172543853827005.png" alt="HTML Code Tag" ></p>
<p>Using Multiple <code> element in the same program.</p>
<p><strong>Code:</strong></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<body>
<h1>Various Programming language</h1>
<h2> Java</h2>
<code>
import java.io.*;<br>
System.out.println();
</code>
<h2>C programming</h2>
<code>
#include <stdio.h><br>
void main()<br>
printf()
</code>
</body>
</html>
Copy after login

We have a small code snapshot that displays java and C programming samples on a web page for the above code.

Output:

HTML Code Tag

Example #2

The second example shows a sample program that displays the code in the center aligned.

Code:

<!DOCTYPE html>
<html>
<body>
<code>
<center>
x = 3;
y = 2;
c = "To add a program";
</center>
</code>
</body>
</html>
Copy after login

Output:

HTML Code Tag

Example #3

Here additionally, I have included

concept to display the program along with the description content(to give semantic information). Even we can add any function code in between them to give the benefits of programs.

Code:

<!DOCTYPE html>
<h1>Demo of article tag</h1>
<p>The <code> fact()</code> this method is used to calculate a factorial of a given number.</p>
Copy after login

Code:

code {
background-color: #8A2BE2;
border-radius: 2px;
font-family: "Courier New", monospace;
padding: 0 4px;
}
Copy after login

Output:

HTML Code Tag

Example #4

html code format using href linkOutput.

Code:

<!DOCTYPE html>
<h1>Demo of code tag</h1>
<p>This is an implementaion of a <a href="http://www.educba.com" title="online tutorial"><code>link to edu</code></a> displayed with code tag.</p>
Copy after login

Code:

code {
background-color: #6495ED;
border-radius: 5px;
font-family: "italic", monospace;
padding: 1 5px;
}
Copy after login

Output:

HTML Code Tag

Example #5

To make a code properly and to look and read fashion, we have to use