Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to define a piece of computer code in HTML5?
In this article, we will discuss how to define a piece of computer code in HTML5. When creating a website that includes computer programming code, it's necessary to make sure the code is easy to read and stands out from the rest of the text. Here, we are using some tags to define the piece of computer code.
Approaches
We have two different approaches to defining a piece of computer code in HTML5 including the following −
Using the “<code> element”
Using the “<pre> element”
Let us look at each step in detail.
Approach 1: Using the "<code> method"
The first approach is to define a piece of computer code in HTML5 as “<code>”. It allows you to define a piece of computer code in HTML5 while maintaining the same font and text size as the surrounding text. This approach is useful when you want to embed a small snippet of code within a larger block of text.
Example
Following is an example to define a piece of computer code in HTML5 using “<code>”.
<!DOCTYPE html>
<html>
<head>
<title>Code Example</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
p {
color: red;
}
h1 {
color: blue;
}
code {
background-color: #f2f2f2;
border: 1px solid #d3d3d3;
padding: 5px;
font-family: Consolas, monospace;
}
</style>
</head>
<body>
<h1>Code Example</h1>
<p>Below is an example of a function in JavaScript:</p>
<code>
function greet(name) {
console.log("Hello, " + name + "!");
}
</code>
</body>
</html>
Approach: Using the "<pre> method"
The first approach is to define a piece of computer code in HTML5 as “<pre>”. It helps you display a large block of computer code with a fixed-width font and proper spacing. This approach is ideal for displaying longer pieces of code, like a full program or script.
Example
Following is an example of defining a piece of computer code in HTML5 using “<pre>”.
<!DOCTYPE html>
<html>
<head>
<title>Using the <pre> Tag</title>
<style>
body {
font-family: Arial, sans-serif;
}
pre {
background-color: #f4f4f4;
padding: 10px;
border-radius: 5px;
font-size: 15px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>Tutorials Point Articles</h1>
<p>The following code block demonstrates how to use the <pre> tag:</p>
<p>C Program to Check Whether a Number is Prime or not</p>
<pre>
<code>
// C program to swap two variables
#include <stdio.h>
int main() {
int x, y;
printf("Enter Value of x ");
scanf("%d", &x);
printf("
Enter Value of y ");
scanf("%d", &y);
int temp = x;
x = y;
y = temp;
printf("
After Swapping: x = %d, y = %d", x, y);
return 0;
}
</code>
</pre>
</body>
</html>
Conclusion
In this article, we examined two different approaches to defining a piece of computer code in HTML5. Here, we are using two different approaches “<code>” and the “<pre>”. The "<code>" tag is used to identify and format inline snippets of code, while the "<pre>" tag is used to display blocks of code with proper indentation and spacing. By using these tags, developers can enhance the presentation of code on their web pages and make it easier for users to understand and interact with the code.
177 Views
