Heim >Web-Frontend >HTML-Tutorial >HTML-Code-Tag

HTML-Code-Tag

PHPzOriginal: 2024-09-04 16:28:53842Durchsuche

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>

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>
<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


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>
<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>
We have a small code snapshot that displays java and C programming samples on a web page for the above code.
Output:

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>
Output:

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>
Code:
code {
background-color: #8A2BE2;
border-radius: 2px;
font-family: "Courier New", monospace;
padding: 0 4px;
}
Output:

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>
Code:
code {
background-color: #6495ED;
border-radius: 5px;
font-family: "italic", monospace;
padding: 1 5px;
}
Output:



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